vue如何在table中根据不同的状态码显示不同的图片或文字
vue如何在table中根据不同的状态码显示不同的图片或文字
·
一、定义好table
<el-table>
<el-table-column label="通行权限" prop="status">
<div slot-scope="{ row }" class="status-box-style">
<img :src="statusMap[row.status].img" alt="" class="status-image-style">
<span> {{statusMap[row.status].text}}</span>
</div>
</el-table-column>
</el-table>
二、在data中定义一个对象,n个状态有n个属性,若同时要遍历多个字段,可以嵌套对象
代码如下:
statusMap: {
READY: {
img: require('../../../../../assets/images/to-be-open.png'), //待下发,
text: '待下发',
},
DOWNLOADING: {
img: require('../../../../../assets/images/in-the-open.png'), //下发中
text: '下发中',
},
PRE_FAIL: {
img: require('../../../../../assets/images/open-failure.png'), //下发失败
text: '下发部分失败',
},
FAIL: {
img: require('../../../../../assets/images/open-failure.png'), //下发失败
text: '下发失败',
},
SUCCESS: {
img: require('../../../../../assets/images/open-success.png'), //下发成功
text: '下发成功',
},
},
三、效果
更多推荐
已为社区贡献1条内容
所有评论(0)