vue表格中常见状态的判断方法
方法1:<el-table :data="list" style="width: 100%"><el-table-column prop="sn" label="订单号"></el-table-column><el-table-column prop="amount" label="数量"></el-table-colu...
·
方法1:
<el-table :data="list" style="width: 100%">
<el-table-column prop="sn" label="订单号"></el-table-column>
<el-table-column prop="amount" label="数量"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<span>{{formatStatus(scope.row.status)}}</span>
</template>
</el-table-column>
</el-table>
// 状态过滤
formatStatus(val) {
return val==1 ? '未结算' : val == 2 ? '已结算' : ''
},
方法2:
<el-table :data="list" style="width: 100%">
<el-table-column prop="sn" label="订单号"></el-table-column>
<el-table-column prop="amount" label="数量"></el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">
<span>{{scope.row.status | formatStatus}}</span>
</template>
</el-table-column>
</el-table>
filters: {
// 状态过滤
formatStatus(val) {
console.log('this',this) // undefind
return val==1 ? '未结算' : val == 2 ? '已结算' : ''
},
}
注:filters中没有this,故不能修改或使用data中的值
更多推荐
已为社区贡献2条内容
所有评论(0)