如何将表格中的状态数据转换为Tag标签显示

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

修改后:

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

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"></el-table-column>
</el-table>

修改后的代码如下所示:

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>
相关推荐
蚂蚁RichLab前端团队17 分钟前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光33 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
ChillJavaGuy37 分钟前
常见限流算法详解与对比
java·算法·限流算法
huangql52044 分钟前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
寻星探路44 分钟前
数据库造神计划第六天---增删改查(CRUD)(2)
java·大数据·数据库
Days20501 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
毕设源码-朱学姐1 小时前
【开题答辩全过程】以 4S店汽车维修保养管理系统为例,包含答辩的问题和答案
java·spring boot·汽车
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js