Iview table实现动态过滤

最新推荐文章于 2023-07-19 14:59:27 发布

nanrochelle

最新推荐文章于 2023-07-19 14:59:27 发布

阅读量984

点赞数

分类专栏： iview JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/nanrochelle/article/details/121147114

版权

iview 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

首先行数据中增加filters:[]和filterMethod()方法

familyColumns: [
                    {
                        title: '类别&族',
                        align: 'center',
                        children: [
                            {
                                title: '族类别',
                                key: 'Classification',
                                width: 100,
                                filters: [

                                ],
                                filterMethod (value, row) {
                                    //return row.category.indexOf(value) > -1
                                    return row.Classification == value;
                                }
                            },
                            {
                                title: '族名称',
                                key: 'FamilyStr',
                                render: (h, params) => {
                                    return h('span', {
                                        attrs: {
                                            title: params.row.FamilyStr
                                        },
                                        domProps: {
                                            innerHTML: params.row.FamilyStr
                                        },
                                    });
                                },
                            }
                        ],
                    },

                ],

然后在给表单数据填充内容赋值时，同时可以写一些操作对过滤器数组进行赋值

_this.familyParamData = data.Data;
if (_this.familyParamData.length > 0) {
    let obj = [];
     for (var i = 0; i < _this.familyParamData.length; i++) {
     			let temp = _this.familyParamData[i];
           obj.push({
                 label: temp.Classification,
                 value: temp.Classification,
            });
		}
	_this.familyColumns[0].children[0].filters = obj; // 此处就是动态赋值了
}