iView table動態設置filters

轉載來源：https://blog.csdn.net/headmaster_tan/article/details/79931763

常規寫法都是把filters寫死了的

columns: [
..., {
...,
filters: [{
label: 'Greater than 25',
value: 1
}, {
label: 'Less than 25',
value: 2
}],...
},...
]

但是有時候我們需要的是可以根據后台所給的數據初始化filters，這時候需要做的並不是在data寫下filters: this.variable，而是在你需要改變他的時候寫下（例如：接收到響應的時候）：

this.columns[index].filters = variable;
1
iView table組件會監聽columns和data的改變而重新渲染。

但是如果是寫成上述filters: this.variable方式

首先vue加載的時候運行到this.variable，此時this.variable的值為undefined
然后table組件並不會監聽到columns的變化而重新渲染，畢竟此時table都還沒渲染，而且data中其他值的變化又不會重新給columns賦值

--------------------實際使用-----------------------

                    {
                        key: 'Species', title: '種名', halign: 'center', align: 'center',
                        filters: [
                        ],
                        filterMethod (value, row) {
                            // console.log(row.Species === value, row.Species, value)
                            return row.Species === value;
                        }
                    }

 

1如果沒有分頁，可以前端過濾。

如果數據名稱有重復，可以前端去重。

 let speciesList_qm = unique2(qiaomuInitList, 'Species');

var speciesFilters_qm = [];
for (let a = 0, len_qm = speciesList_qm.length; a < len_qm; a++) {
speciesFilters_qm.push({ label: speciesList_qm[a], value: speciesList_qm[a] })
}
that.gvcolumns_qm[1].filters = speciesFilters_qm; // 賦值
console.log('speciesFilters_qm', speciesFilters_qm)

　　

去重算法：

// 按某一屬性去重
 function unique2(arr, name) {
     var hash = [];
     var len = arr.length;
     for (var i = 0; i < len; i++) {
         for (var j = i + 1; j < len; j++) {
             if (arr[i][name] === arr[j][name]) {
                 j = ++i;
             }
         }
         hash.push(arr[i][name]);
     }
   //  console.log("speciesList-hash", hash);
     return hash;
 }

 

如果有分頁，你需要去服務器端獲取唯一值列表。

然后for循環得到filter。