Vxetable实现更新列属性,比如过滤,排序等等
作者：梦凡尘
这篇文章主要介绍了Vxetable实现更新列属性,比如过滤,排序等等问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vxetable如何更新列属性,比如过滤,排序
在使用vxeTable 进行二次封装表格组件时，会遇到更改表头数据从而更改列属性的变化的情况。
如果直接更改表头数据控制列是否可以排序和过滤，这样是不生效的，因为vxeTable 的列属性不是响应式的。
解决方法
可以在每次更新之前，先从表格中获取所有的列信息，然后用结构赋值的方法，将当前跟新的数据补充进列信息之后，使用。
loadColumn 进行列刷新
// 获取原始vxeTable的column 数据
const oldColumns = xTable.value.getColumns() || [];
const reFreshColumn = [] as any;
// 对之前存在的数据列进行强制刷新
tableNormalOptions.value.forEach((item: any) => {
let temp = oldColumns.find((oldItem: any) => item.prop === oldItem.field);
if (temp) {
temp = {
...temp,
...item,
};
reFreshColumn.push(temp);
}
});
// 对于之前存在的列进行强制刷新
xTable.value.loadColumn(reFreshColumn);这样仅仅只适用于只有一级表头的简单的表格，如果目标表格是一个多级表头的复杂表格，此种方式就不适用了。
可以尝试使表格重新渲染的方法
<template>
<vxe-table :key=currentKey></vxe-table>
</template>
<script>
import {ref, watch, defineProps} from 'vue';
cosnt props = defineProps({
tableHeadOptions:{
type:Object as any,
default:()=>({});
}
})
// 用随机数生成一个唯一key
const currentKey = ref(Math.random())
// watch 监听表头数据变化，更新currentKey, 从而达到表格重新渲染的效果
watch(()=>props.tableHeadOptions,()=>{
// props.tableHeadOptions 生成多级表头省略代码
currentKey.value = Math.random();
})
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。