vue实现iview表格添加筛选功能的示例代码

<template>
    <Table border :columns="columns" :data="data"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        filters: [
                            {
                                label: '大于25',
                                value: 1
                            },
                            {
                                label: '小于25',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.age > 25;
                            } else if (value === 2) {
                                return row.age < 25;
                            }
                        }
                    },
                    {
                        title: '地址',
                        key: 'address',
                        filters: [
                            {
                                label: '北京',
                                value: '北京'
                            },
                            {
                                label: '上海',
                                value: '上海'
                            },
                            {
                                label: '四川',
                                value: '四川'
                            }
                        ],
                        filterMethod (value, row) {
                            return row.address.indexOf(value) > -1;
                        }
                    }
                ],
                data: [
                    {
                        name: '张三',
                        age: 10,
                        address: '四川',
                    },
                    {
                        name: '李四',
                        age: 25,
                        address: '上海',
                    },
                    {
                        name: '王五',
                        age: 35,
                        address: '北京',
                    },
                    {
                        name: '秀豆',
                        age: 27,
                        address: '四川',
                    }
                ],
            }
        }
    }
</script>

{
    title: '年龄',
    key: 'age',
    filters: this.filters, // 从接口返回的数据
    filterMultiple: false,
    filterMethod (value, row) {
        // ...
    }
},

// 伪代码
const res = await this.$axois(...); // 获取对应接口数据
this.filters = res;
this.columns[1].filters = this.filters; // 当前把需要的数据赋值给columns

// 接上面的示例，当filters中的数据从接口中获取到后，我们`f12`拿到指定元素，修改它的高度等属性即可。
this.$nextTick(() => {
  if (this.filters.length) {
    let listDom = document.querySelector(".main-ui-table-filter-list-item");
    listDom.style.height = "400px";
    listDom.style.overflow = "auto";
  }
})