使用Element-Ui中的table的时候，怎么实现表格内容过滤

Question

1. 我想使用element-ui中的input去过滤掉table中的内容，可是发现实现不了。也就是相当于去实现条件查询。代码如下：

过滤器:

 filters:{
            filterContent: function (items) {
                let arr=[];
                for(let i= 0;i<items.length; i++){
                    arr[i] = {};
                    arr[i].id = items[i].id;
                    arr[i].uName = items[i].uName;
                    arr[i].is_active = items[i].is_active;
                    arr[i].phone = items[i].phone;
                    arr[i].roles = items[i].roles;
                    if(items[i].uName.indexOf(this.serachContent)>=0 || items[i].phone.indexOf(this.serachContent)>=0){
                        arr.push(arr[i]);
                    }else{
                        arr.splice(i,1);
                    }
                }
                return arr;
            }
        },

视图:

 <el-input style="width: 200px;" class="filter-item" placeholder="用户名" v-model="serachContent">
<el-table :data="adminData | filterContent"  border fit highlight-current-row style="width: 100%" >....

最后出现的错误是:
(unknown) TypeError: Cannot read property 'serachContent' of undefined

Answer 1

<el-input placeholder="请输入学校名称" icon="search" v-model="schfilter" class="search-input">
</el-input>

watch: {
    schfilter: function(val, oldVal){
        this.tableData = this.otableData.filter( item => (~item.name.indexOf(val)));
    }
},

otableData为tableDate复制品。

Answer 2

看着浏览量挺大的，，上图吧~