首页 编程开发element-ui表格筛选的filters数据异步获取

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

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

鲤鱼的同桌咨询:

表格筛选的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就行了。

发表评论