如何将表格中的状态数据转换为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>
相关推荐
bxlj_jcj1 分钟前
解锁Java线程池:性能优化的关键
java·性能优化·多线程
海棠一号5 分钟前
JAVA理论第七章-MYSQL
java·数据库·mysql
拉不动的猪33 分钟前
JQ常规面试题
前端·javascript·面试
海上彼尚34 分钟前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
网安INF41 分钟前
CVE-2024-23897源码分析与漏洞复现(Jenkins 任意文件读取)
java·web安全·网络安全·jenkins·漏洞
oioihoii1 小时前
C++11列表初始化:从入门到精通
java·开发语言·c++
Random_index1 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
qqxhb1 小时前
零基础设计模式——行为型模式 - 命令模式
java·设计模式·go·命令模式
sg_knight1 小时前
Ribbon负载均衡实战指南:7种策略选择与生产避坑
java·spring boot·spring·spring cloud·微服务·ribbon·负载均衡
Shimeng_19891 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app