鍍金池/ 問答/Java  HTML/ element-ui的table組件,如何操作過濾條件?

element-ui的table組件,如何操作過濾條件?

問題描述

公司開發(fā)一款vue應(yīng)用,在一個頁面上顯示table組件的同時,需要頁面其他組件內(nèi)的圖表與table進行聯(lián)動,
即:點擊圖表某一項,在table內(nèi)過濾對應(yīng)項的數(shù)據(jù)

相關(guān)代碼

以下是過濾條件發(fā)生變化(filter-change)時的方法:

fillFilter() {
   this.dynamicTags= [];//dynamicTags是過濾項的集合,在監(jiān)聽器里watch了這個屬性,一旦dynamicTags變化,則調(diào)接口更新數(shù)據(jù)
   var condition = {
        page: this.page,
        category:"",
         effect:"",
        timeScale:"",
        state:""
   };
    for (let e of this.$refs.expandTable.columns) {//循環(huán)列的每一項,將已存在的過濾項添加到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);
                
  },

實際看到的錯誤信息又是什么?你期待的結(jié)果是什么?

用這種方式過濾數(shù)據(jù)有一個問題,即若先利用圖表聯(lián)動更新了dynamicTags,然后再點擊filter觸發(fā)過濾過濾方法,那么之前圖表聯(lián)動里更新的dynamicTags將被覆蓋掉,

而我期待的實現(xiàn)方式,是在點擊圖表某項后,直接操作table的過濾條件,使table自己觸發(fā)過濾方法,但查閱了文檔,沒有發(fā)現(xiàn)直接觸發(fā)過濾的方法,有什么其他方式解決這個問題嘛

回答
編輯回答
未命名

當(dāng)前問題不就說你圖表點擊 然后去把右邊的table進行過濾么

你去觸發(fā)api的事件 你得符合它的條件,為什么不換個思路直接去處理數(shù)據(jù)呢 非得去觸發(fā)它的事件 然后傳入?yún)?shù) 然后去處理你的數(shù)據(jù)么?
2018年1月13日 04:40
編輯回答
爆扎

目前的解決方案,是操作table里的filterdValue屬性,然后重新執(zhí)行上面的fillFilter方法來實現(xiàn)數(shù)據(jù)的更新

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

        }
    }
}

然后每次點擊圖標(biāo)項后,觸發(fā)這個changeFilterdValue方法:

var _this = this;
bus.$on('stateSelect',function(stateType){
    _this.changeFilteredValue('state',stateType.toString());
    _this.fillFilter();
})
2018年4月2日 20:58