vxe-table動態(tài)渲染列,刷新列寬的方式
更新時間：2025年04月24日 09:32:55 作者：six+seven
這篇文章主要介紹了vxe-table動態(tài)渲染列,刷新列寬的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vxe-table動態(tài)渲染列,刷新列寬方式
背景
使用vxe-table渲染表格，支持列選和拖拽列寬，并可按用戶記憶，支持一鍵恢復(fù)默認(rèn)列選、列寬，因此使用v-for動態(tài)渲染列。
當(dāng)點擊一鍵恢復(fù)的時候，需要恢復(fù)成默認(rèn)的列選及列寬。
問題
使用vxe-table，用v-for渲染列，修改列寬調(diào)用vxe提供的refreshColumn和recalculate方法都不生效。表格列寬沒有重新渲染。
解決方案
利用vue觸發(fā)重新渲染的機(jī)制，給表格綁定key為隨機(jī)生成的字符串，當(dāng)點擊一鍵恢復(fù)時，重新生成一段新的隨機(jī)字符串賦值給表格綁定的key，這樣就會觸發(fā)表格的重新渲染。
代碼示例
<template>
<vxe-table
ref="table"
:key="tableKey"
:data="tableData"
border>
<vxe-column
v-for="item in showColumns"
:key="item.field"
:field="item.field"
:type="item.type"
:title="item.title"
:fixed="item.fixed"
:align="item.align"
:sortable="item.sortable ? item.sortable : false"
:formatter="item.formatter"
:class-name="item.class"
:show-overflow="item.overflow ? item.overflow : 'tooltip'"
:visible="item.visible"
>
</vxe-column>
</vxe-table>
</template>
export defalut {
data(){
tableKey:Math.random()
},
methods:{
refreshTable(){
this.tableKey = Math.random()
},
}
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中動態(tài)路由加載組件,找不到module問題及解決
這篇文章主要介紹了vue中動態(tài)路由加載組件,找不到module問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue3中的h函數(shù)及使用小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這段時間一直在弄vue，當(dāng)然也遇到很多問題，這里就來跟大家分享一些注冊自定義模板組件的心得 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了通過vue實現(xiàn)網(wǎng)頁截圖的功能，有興趣的童鞋可以了解一下2021-11-11
Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解
這篇文章主要介紹了Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解,通過示例代碼給大家介紹的非常詳細(xì)，對vue-property-decorator?和?vux-class的使用感興趣的朋友一起看看吧2022-08-08
Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實例
這篇文章主要給大家介紹了關(guān)于Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，相信對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
本篇文章主要介紹了Vue 換膚的示例實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來具體介紹一下,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了vue vant中picker組件的使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
el-table點擊某一行高亮并顯示小圓點的實現(xiàn)代碼
這篇文章主要介紹了el-table點擊某一行高亮并顯示小圓點，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08