filter我的理解是对数据的再处理函数集合,和methods类似,区别是里面专门放对于数据处理的函数。比如把5转换为$5,就是对于数据的再处理吧。一般的用法
html部分用{{abc | methodA}}
然后JS部分
filters{
methodA(val){
具体的方法
}
}
val的值就是abc的值。还有{{abc|efd|methodA}}的写法,意思时abc的值给efd,efd处理后的值传给methodA。除此以外还有{{abc|methodA(efd)}}的写法,这时候的filters函数methodA就有两个入参了,要改成methodA(val1,val2).val1就是abc的值,efd就是val2的值。
下面举个demo
<el-table v-show="iftableshow" :data="tableData" style="width: 100%" border>
<el-table-column prop="a" label="A" width="120" align="center">
</el-table-column>
<el-table-column prop="b" label="B" width="120" align="center">
</el-table-column>
<el-table-column prop="c" label="C" width="180" align="center">
<template scope="scope">
<span>
{{scope.row.c|decoder}}
</span>
</template>
</el-table-column>
<el-table-column prop="d" label="D" width="120" align="center">
</el-table-column>
</el-table>
JS部分
filters: {
decoder(val) {
console.log(val);
let str1 = "出库";
let str2 = "回库";
if(val==1){
return str1;
}else if(val == 2){
return str2;
}
},
},
这里对每一行的type值做了统一的处理。
但是这边我用着有点问题。问题1:出现循环次数大于表格的数量的问题。不知道为什么表格实际数量只有10行,但是循环了超过10次。怀疑会记录之前的数据。
问题2:我不是很明白scope到底指的时什么,为什么在有的时候val输出的是object类型。
这些目前没解决。但是循环归循环,上述的方法还是可以用。