Vxetable實(shí)現(xiàn)更新列屬性,比如過(guò)濾,排序等等
更新時(shí)間：2025年04月25日 08:38:45 作者：夢(mèng)凡塵
這篇文章主要介紹了Vxetable實(shí)現(xiàn)更新列屬性,比如過(guò)濾,排序等等問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vxetable如何更新列屬性,比如過(guò)濾,排序
在使用vxeTable 進(jìn)行二次封裝表格組件時(shí)，會(huì)遇到更改表頭數(shù)據(jù)從而更改列屬性的變化的情況。
如果直接更改表頭數(shù)據(jù)控制列是否可以排序和過(guò)濾，這樣是不生效的，因?yàn)関xeTable 的列屬性不是響應(yīng)式的。
解決方法
可以在每次更新之前，先從表格中獲取所有的列信息，然后用結(jié)構(gòu)賦值的方法，將當(dāng)前跟新的數(shù)據(jù)補(bǔ)充進(jìn)列信息之后，使用。
loadColumn 進(jìn)行列刷新
// 獲取原始vxeTable的column 數(shù)據(jù)
const oldColumns = xTable.value.getColumns() || [];
const reFreshColumn = [] as any;
// 對(duì)之前存在的數(shù)據(jù)列進(jìn)行強(qiáng)制刷新
tableNormalOptions.value.forEach((item: any) => {
let temp = oldColumns.find((oldItem: any) => item.prop === oldItem.field);
if (temp) {
temp = {
...temp,
...item,
};
reFreshColumn.push(temp);
}
});
// 對(duì)于之前存在的列進(jìn)行強(qiáng)制刷新
xTable.value.loadColumn(reFreshColumn);這樣僅僅只適用于只有一級(jí)表頭的簡(jiǎn)單的表格，如果目標(biāo)表格是一個(gè)多級(jí)表頭的復(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:()=>({});
}
})
// 用隨機(jī)數(shù)生成一個(gè)唯一key
const currentKey = ref(Math.random())
// watch 監(jiān)聽(tīng)表頭數(shù)據(jù)變化，更新currentKey, 從而達(dá)到表格重新渲染的效果
watch(()=>props.tableHeadOptions,()=>{
// props.tableHeadOptions 生成多級(jí)表頭省略代碼
currentKey.value = Math.random();
})
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
從源碼角度來(lái)回答keep-alive組件的緩存原理
這篇文章主要介紹了從源碼角度來(lái)回答keep-alive組件的緩存原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue jsx 使用指南及vue.js 使用jsx語(yǔ)法的方法
這篇文章主要介紹了vue jsx 使用指南及vue.js 使用jsx語(yǔ)法的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue截取視頻第一幀的圖片問(wèn)題,基本就是用cavas進(jìn)行繪制，解決一下跨域問(wèn)題，截視頻第一幀，然后根據(jù)視頻原本的寬高進(jìn)行繪制，最后轉(zhuǎn)一下圖片格式即可，需要的朋友可以參考下2022-11-11
vue中this.$refs.name.offsetHeight獲取不到值問(wèn)題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了如何利用vue3實(shí)現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
@error函數(shù)vue圖片加載失敗空白頁(yè)解決方案
這篇文章主要介紹了@error函數(shù)vue圖片加載失敗空白頁(yè)解決方案，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
element?ui?就是基于vue的一個(gè)ui框架,該框架基于vue開(kāi)發(fā)了很多相關(guān)組件,方便我們快速開(kāi)發(fā)頁(yè)面,餓了么前端團(tuán)隊(duì)基于vue進(jìn)行開(kāi)發(fā)并且進(jìn)行了開(kāi)源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過(guò)程,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue+ESLint 配置保存 自動(dòng)格式化代碼的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue-cli3訪問(wèn)public文件夾靜態(tài)資源報(bào)錯(cuò)的解決方式
這篇文章主要介紹了vue-cli3訪問(wèn)public文件夾靜態(tài)資源報(bào)錯(cuò)的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09