如何将表格中的状态数据转换为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>
相关推荐
耶啵奶膘38 分钟前
uniapp-是否删除
linux·前端·uni-app
魔道不误砍柴功1 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
NiNg_1_2341 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
闲晨1 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
测开小菜鸟3 小时前
使用python向钉钉群聊发送消息
java·python·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
P.H. Infinity4 小时前
【RabbitMQ】04-发送者可靠性
java·rabbitmq·java-rabbitmq