效果:订单状态实现不同状态不同颜色
html:
<el-table
:data="tableData" // 绑定数据
style="width: 100%"
border // 边框
:header-cell-style="{ background: '#BFBFBC'}" > // 表头背景颜色
<el-table-column prop="state" label="订单状态" width="130"> // prop绑定数组中的数据
<template scope="scope"> // 插槽
<span v-if="scope.row.state==='审核通过'" style="color: green">审核通过</span>
<span v-else-if="scope.row.state==='待审核'" style="color: dodgerblue">待审核</span>
<span v-else style="color: red">未通过</span>
</template>
</el-table-column>
</el-table>
script:
<script>
export default {
data () {
return {
tableData: [
{name: '数据一', date: '2019-11-20', state: '待审核'},
{name: '数据二', date: '2019-11-20', state: '审核通过'},
{name: '数据三', date: '2019-11-20', state: '未通过'}
]
}
}
}
</script>