通常情况下,表头的这些过滤备选信息我们是直接在页面里面写死的.
比如下图
<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"/>