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)文章
我們有時需要限制文本框輸入內(nèi)容的類型,本節(jié)分享下正則表達(dá)式限制文本框只能輸入數(shù)字、小數(shù)點、英文字母、漢字等代碼,感興趣的朋友跟隨小編一起看看吧2023-12-12
最近有項目需要用到對圖片進(jìn)行局部放大,類似淘寶商品頁的放大鏡效果,經(jīng)過一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue中this.$confirm的使用及說明方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在日常使用Vue開發(fā)項目的時候，計算屬性computed是一個非常常用的特性，本文就來分享一些使用Vue的computed計算屬性時的一些小技巧，希望能夠幫助到大家2023-06-06
公司業(yè)務(wù)新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實現(xiàn)一個炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10
隨著互聯(lián)網(wǎng)的發(fā)展,越來越多的應(yīng)用需要實現(xiàn)流程圖的制作,如工作流程圖、電路圖等,文中通過代碼以及圖文將實現(xiàn)的過程介紹的非常詳細(xì),對大家學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)右上角時間顯示實時刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
element-ui重置resetFields()不生效的解決
本文主要介紹了element-ui重置resetFields()不生效的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12