element-ui表格筛选的filters数据异步获取

jaeheng 2021-10-22 08:35:02 0 1262

鲤鱼的同桌咨询：

表格筛选的filters数据是异步获取的是怎么放进去的啊，写死的是这样：

 filters: [
    {text: 'B1', value: 'B1'},
    {text: '1F', value: '1F'},
    {text: '2F', value: '2F'},
    {text: '3F', value: '3F'},
    {text: '4F', value: '4F'},
    {text: '5F', value: '5F'}
]

回答：

第一步: 将filters放在data中:

data () {
    return {
        floorFilter: []
    }
}

然后在el-table中使用该floorFilter：

<el-table-column
      :filters="floorFilter"
      ...其它参数
    >
</el-table-column>

然后新建一个异步获取floorFilter选项的方法:

methods: {
    getFloorFilter() {
         // 模拟异步请求，需用ajax请求数据
        setTimeout(() => {
            this.floorFilter = 返回的筛选列表数组
        }, 1000)
    }
}

最后在created钩子函数里调用getFloorFilter就行了。