Vue使用Vxe-table组件,动态设置table表头过滤信息:filters

组件官网: vxe-table v4

通常情况下,表头的这些过滤备选信息我们是直接在页面里面写死的. 

比如下图

<vxe-table-column
            v-if="columns.visible('createType')"
            width="120"
            field="createType"
            :filters="[{label: '导入', value: 1}, {label: '手录', value: 2}]"
            :filter-multiple="false"
            sortable
            show-overflow="ellipsis"
            show-header-overflow
            title="创建方式" >

或者将数据数组放在data中, 然后:filters 绑定下命名

问: 如何让这个过滤列表内容为我们从后台获取到的内容?

尝试: 将filters绑定一个数组,然后在获取数据的接口回调里面,修改数组内容, 结果数组内容变更之后, 页面表头过滤内容并不刷新: 

:filters="typeArr"

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

methods: {
     getTypeEnum(){
      publicApi('CreateTypeEnum').then((res) => {
       // 期望数据格式[{label: '导入', value: 1}, {label: '手录', value: 2}],
       /* 接口返回的[
        {
            "code": "1",
            "name": "手输",
            "key": 1
        },
        {
            "code": "2",
            "name": "导入",
            "key": 2
        },
        {
            "code": "3",
            "name": "系统同步",
            "key": 3
        }
      ]*/
      res.forEach((type) => {
         this.typeArr.push({label: type.name, value: type.code})
       })
     })
    },
}

两种实现方式: 

1: 加工完数据之后, 代码里面找到该子段的filters并赋值. 可能存在问题, 根据索引取字段不太靠谱,后面如果页面字段调整也需要跟着调整

res.forEach((type) => {
  this.typeArr.push({label: type.name, value: type.code})
})
this.$refs.table.collectColumn[19].filters = this.typeArr;

 2: 将列v-if设置成数组的长度.   问题: 如果数组数据为空会导致该字段不显示 哈哈.

<vxe-table-column
            v-if="typeArr.length"/>