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。