记录一个问题:
之前处理 element-table 根据数字展示不同状态时,通常都使用三元表达式,因为一般不会有太多的状态;但是今天碰到一条数据需要处理七种状态,写三元表达式就有些过长,询问大佬后学会一种新处理方法
这个方法使用到 vue 的过滤方法,之前有学习过,但没有过多使用,此次加强回忆,并重新学习
<el-table :data='list'>
<el-table-column prop="state" label="商品状态" align="center">
<template slot-scope="scope">
{
{ scope.row.state | stateFmt }}
</template>
</el-table-column>
</el-table>
export default {
name: "GoodsOrder",
filters: {
stateFmt(state) {
return (
{
1: "待审核",
2: "审核通过",
3: "商家待确认",
4: "待送货",
5: "商家已发货",
6: "门店确认收货",
9: "取消",
}[state] || "其他"
);
},
},
data() {
return {
// 加载状态
loading: true,
// 请求参数
queryParams: {
pageNum: 1,
pageSize: 10,
},
},
};
处理完成后展示效果