element-ui 表格列el-table-column根据数据展示不同内容
使用element-ui的表格时,有时候后台给的字段和要显示在表格列里的内容不一致。
例如后台给的是status,它的值为true或false,要求显示在表格里是‘正确’或‘错误’
这时可以给el-table-column添加一个属性:formatter
html代码:
<el-table ref="accountTable"
:data="accountsListData"
border>
<el-table-column label="状态" prop="state" :formatter="stateFormat"></el-table-column>
</el-table>
js代码:
methods:{
stateFormat(row, column) {
if (row.state === true) {
return '正确'
} else {
return '错误'
}
}
formatter返回的是字符串。如果要求带样式(比如设置颜色),不建议采用这种方式,可以采用内嵌template的方式。
或者
在 el-table-column 标签内,添加一个template标签,使用插槽slot-scope属性,即可在
template标签内自定义单元格显示的内容及样式
html代码:
<el-table-column label="status" width="100">
<template slot-scope="scope">
<!-- scope.row 包含表格里当前行的所有数据 -->
<span :class="scope.row.status?'act':'inact'">{{scope.row.status?'True':'False'}}</span>
</template>
</el-table-column>