如何将表格中的状态数据转换为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>
相关推荐
weixin_443290698 分钟前
【阅读记录-章节2】Infrastructure as Code Dynamic Systems for the Cloud Age
运维·前端
山河木马9 分钟前
前端学C++可太简单了:指针
前端·javascript·c++
EndingCoder10 分钟前
算法在前端框架中的集成
前端·javascript·算法·前端框架·排序算法
东阳马生架构10 分钟前
订单初版—8.取消订单实现的重构文档一
java
东阳马生架构11 分钟前
订单初版—8.取消订单实现的重构文档二
java
天天摸鱼的java工程师12 分钟前
“你能从字节码层面解释JVM内存模型吗?”——面试官的死亡提问
java·后端·面试
知识分享小能手25 分钟前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue
悠哉清闲27 分钟前
C++ 指针与引用
java·c++·算法
三天不学习30 分钟前
CSS :root伪类详解:实现动态主题切换的关键所在
前端·css·root·主题换肤·css 伪类
江城开朗的豌豆33 分钟前
Vue图片懒加载:极简方案 vs 兼容全攻略
前端·javascript·vue.js