element-ui的table组件，如何操作过滤条件？

Question

问题描述

公司开发一款vue应用，在一个页面上显示table组件的同时，需要页面其他组件内的图表与table进行联动，
即：点击图表某一项，在table内过滤对应项的数据

相关代码

以下是过滤条件发生变化(filter-change)时的方法:

fillFilter() {
   this.dynamicTags= [];//dynamicTags是过滤项的集合，在监听器里watch了这个属性，一旦dynamicTags变化，则调接口更新数据
   var condition = {
        page: this.page,
        category:"",
         effect:"",
        timeScale:"",
        state:""
   };
    for (let e of this.$refs.expandTable.columns) {//循环列的每一项，将已存在的过滤项添加到condition里
         if (e.filteredValue.length > 0) {
             for (let v of e.filteredValue) {
                if("category" == e.property)
                    {
                        condition.category += (condition.category === "" ?  v : "," + v);
                    }
                    else if("effect" == e.property)
                    {
                        condition.effect += (condition.effect === "" ?  v : "," + v);
                    }
                    else if("recording" == e.property)
                    {
                        condition.timeScale += (condition.timeScale === "" ?  v : "," + v);
                    }
                    else if("state" == e.property)
                    {
                        condition.state += (condition.state === "" ?  v : "," + v);
                    }
               }
              }
          }
   this.dynamicTags=(condition);
                
  },

实际看到的错误信息又是什么？你期待的结果是什么？

用这种方式过滤数据有一个问题，即若先利用图表联动更新了dynamicTags，然后再点击filter触发过滤过滤方法，那么之前图表联动里更新的dynamicTags将被覆盖掉，

而我期待的实现方式，是在点击图表某项后，直接操作table的过滤条件，使table自己触发过滤方法，但查阅了文档，没有发现直接触发过滤的方法，有什么其他方式解决这个问题嘛

Answer 1

目前的解决方案，是操作table里的filterdValue属性，然后重新执行上面的fillFilter方法来实现数据的更新

changeFilteredValue(name,value){
    for(let e of this.$refs.expandTable.columns){
        if(e.property===name){
            if(value===''){
                e.filteredValue=[];
            }else{
                e.filteredValue=[value];
            }

        }
    }
}

然后每次点击图标项后，触发这个changeFilterdValue方法:

var _this = this;
bus.$on('stateSelect',function(stateType){
    _this.changeFilteredValue('state',stateType.toString());
    _this.fillFilter();
})

Answer 2

当前问题不就说你图表点击 然后去把右边的table进行过滤么

你去触发api的事件 你得符合它的条件,为什么不换个思路直接去处理数据呢 非得去触发它的事件 然后传入参数 然后去处理你的数据么?