如何将表格中的状态数据转换为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>
相关推荐
巛、2 分钟前
ES6面试题
前端·面试·es6
hymuuuu18 分钟前
【最新案例】智能物料称重柜/生鲜称重售卖柜系统, 共享自助管理系统, 物联网应用定制开发
java
编程绿豆侠26 分钟前
力扣HOT100之栈:394. 字符串解码
java·算法·leetcode
周全全29 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
hstar952742 分钟前
三十四、面向对象底层逻辑-SpringMVC九大组件之FlashMapManager接口设计哲学
java·spring·设计模式·架构
汪子熙44 分钟前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
yuren_xia1 小时前
Spring MVC执行流程简介
java·spring·mvc
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九1 小时前
html、css(javaweb第一天)
前端·css·html
黄雪超1 小时前
JVM——对象模型:JVM对象的内部机制和存在方式是怎样的?
java·开发语言·jvm