1. Table表格从后台接收数据并个性化展示
方法一:添加格式化函数
<el-table-column prop="status" label="流程状态" min-width="70" :formatter="stateFormat">,:formatter="stateFormat"
然后写函数方法
stateFormat(row, column) {
if (row.status === 0) {
return '正常'
} else if (row.status === 1) {
return '暂停'
}
},
方法二:插槽
<el-table-column prop="status" label="流程状态" min-width="70">
<template slot-scope="scope">
<span v-if="scope.row.status=='0'">正常</span>
<span v-if="scope.row.status=='1'" style="color:red;">暂停</span>
<span v-if="scope.row.status=='2'">终止</span>
</template>
</el-table-column>
效果:


本文介绍两种在Table表格中个性化展示数据的方法:一是通过添加格式化函数实现状态的文本转换;二是利用插槽进行更复杂的样式定制,如根据不同状态显示不同颜色的文字。
974

被折叠的 条评论
为什么被折叠?



