一、需求:我们需要把状态栏不同的值转为相应文字
![](https://i-blog.csdnimg.cn/blog_migrate/b08544a09048d932848c5cf4b3e1c5fd.png)
这里status 为 0 表示的是 发布 1表示未发布
二、回应需求
我们使用的是 el-table 进行列表的显示
![](https://i-blog.csdnimg.cn/blog_migrate/c4c41f1cdc4d7c7eda92f7759f52f630.png)
![](https://i-blog.csdnimg.cn/blog_migrate/64fd19cae25d82930e2e575dfed970ad.png)
公告的状态是使用 el-table-column 的prop绑定数据
需要使用span 和v-if判断用户状态码显示响应的含义
(简单的系统就数据不怎么变化的情况写在代码里面就行,复杂系统也可以把这些含义存在数据库,取出装进数组里面,再到前端判断选择数组中的含义)
改进代码如下:
<el-table-column label="公告状态" align="center" prop="status">
<template slot-scope="scope">
<span v-if="scope.row.status === '0'">发布</span >
<span v-if="scope.row.status === '1'">未发布</span >
</template>
</el-table-column>
页面显示如下:
![](https://i-blog.csdnimg.cn/blog_migrate/a45c4bf24f60f883b68f3078754cdb1f.png)