1.定义过滤器:地位要和Vue中的methods、created同等,一般写在script标签的最后
filters: {
// 学历过滤器
educationFilter(type) {
const edu = education.find(obj => obj.type === type);
return edu ? edu.name : null;
},
//职位过滤器
postFilter(type) {
const pt = post.find(obj => obj.type === type);
return pt ? pt.name : null;
},
}
2.定义数组:
let education = [
{ type: 1, name: "博士" },
{ type: 2, name: "硕士" },
{ type: 3, name: "工程硕士" },
{ type: 4, name: "本科" },
{ type: 5, name: "专科" },
{ type: 6, name: "其他" }
];
需要注意的是:要定义在<script>标签的里面,export default{}的上面(或者外边)
3.在elementUI中的位置或者说格式
<saice-table-column prop="education" label="学历" width="120">
<template slot-scope="scope">
<span>{{scope.row.education | educationFilter}}</span>
</template>
</saice-table-column>
注意:一定要加上<template slot-scopt="scopt">插槽,否则过滤器不起作用。
VUE中的过滤器使用方法详解及注意事项
最新推荐文章于 2021-10-21 18:46:45 发布