Vxetable實現(xiàn)更新列屬性,比如過濾,排序等等

更新時間：2025年04月25日 08:38:45 作者：夢凡塵

這篇文章主要介紹了Vxetable實現(xiàn)更新列屬性,比如過濾,排序等等問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vxetable如何更新列屬性,比如過濾,排序

在使用vxeTable 進行二次封裝表格組件時，會遇到更改表頭數(shù)據(jù)從而更改列屬性的變化的情況。

如果直接更改表頭數(shù)據(jù)控制列是否可以排序和過濾，這樣是不生效的，因為vxeTable 的列屬性不是響應(yīng)式的。

解決方法

可以在每次更新之前，先從表格中獲取所有的列信息，然后用結(jié)構(gòu)賦值的方法，將當(dāng)前跟新的數(shù)據(jù)補充進列信息之后，使用。

loadColumn 進行列刷新

 // 獲取原始vxeTable的column 數(shù)據(jù)
            const oldColumns = xTable.value.getColumns() || [];
            const reFreshColumn = [] as any;
            // 對之前存在的數(shù)據(jù)列進行強制刷新
            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);

這樣僅僅只適用于只有一級表頭的簡單的表格，如果目標表格是一個多級表頭的復(fù)雜表格，此種方式就不適用了。

可以嘗試使表格重新渲染的方法

<template>
<vxe-table :key=currentKey></vxe-table>
</template>
<script>
import {ref, watch, defineProps} from 'vue';
    cosnt props = defineProps({
        tableHeadOptions:{
             type:Object as any,
            default:()=>({});
       }
     })
    // 用隨機數(shù)生成一個唯一key
    const currentKey = ref(Math.random())
    // watch 監(jiān)聽表頭數(shù)據(jù)變化，更新currentKey, 從而達到表格重新渲染的效果
    watch(()=>props.tableHeadOptions,()=>{
        // props.tableHeadOptions 生成多級表頭省略代碼
        currentKey.value = Math.random();
})
</script>