如何将表格中的状态数据转换为Tag标签显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何将表格中的状态数据转换为Tag标签显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

考虑到系统前端页面的美观程度，通常通过Tag标签来代替某条数据中的状态信息。仅通过一点操作，便能够使得页面美观程度得到较大提升，前后对比如下所示。代码基于Vue以及Element-ui组件实现。
修改前：
如何将表格中的状态数据转换为Tag标签显示,Java学习,java,前端,Vue
修改后：

修改前的原始代码如下所示：

<el-table :data="tableData" border stripe header-cell-class-name="headerBgColor">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="name" label="数据集名称" width="200"></el-table-column>
          <el-table-column prop="time" label="上传时间" width="200"></el-table-column>
          <el-table-column prop="status" label="可用状态" width="200"></el-table-column>
</el-table>

修改后的代码如下所示：文章来源地址https://www.toymoban.com/news/detail-619740.html

 <el-table :data="tableData" border stripe header-cell-class-name="headerBgColor">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="name" label="数据集名称" width="200"></el-table-column>
          <el-table-column prop="time" label="上传时间" width="200"></el-table-column>
          <el-table-column prop="status" label="可用状态" width="200">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 1">可用</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 0">不可用</el-tag>
            </template>
          </el-table-column>
</el-table>