elementui如何对标签上绑定的Prop属性进行过滤更改
element-ui默认可以用prop
对应tabledata中的对应字段进行显示,但当遇见需要对默认数据进行更改时,则不能使用prop。而采用<template />
配合过滤器实现
示例:
常规数据渲染:直接用prop接受数据
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
prop="mobile"
label="用户手机号"
>
</el-table-column>
</el-table>
data() {
return {
tableData: [
{
"type": 0,
"mobile": "18319011111"
},
]
}
}
当需要更改数据显示时,如将tableData中的type的0值改为‘未完成’,(0:未完成;1:完成)。配合<template>
标签和过滤器实现。
<el-table-column
label="操作类型"
>
<template mplate slot-scope="scope">{{ scope.row.type | getType}}</template>
</el-table-column>
filters: {
getType(val) {
return val=val===0?'未完成':'完成'
}
},