vxe-table動態(tài)渲染列,刷新列寬的方式
更新時間：2025年04月24日 09:32:55 作者：six+seven
這篇文章主要介紹了vxe-table動態(tài)渲染列,刷新列寬的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vxe-table動態(tài)渲染列,刷新列寬方式
背景
使用vxe-table渲染表格，支持列選和拖拽列寬，并可按用戶記憶，支持一鍵恢復默認列選、列寬，因此使用v-for動態(tài)渲染列。
當點擊一鍵恢復的時候，需要恢復成默認的列選及列寬。
問題
使用vxe-table，用v-for渲染列，修改列寬調用vxe提供的refreshColumn和recalculate方法都不生效。表格列寬沒有重新渲染。
解決方案
利用vue觸發(fā)重新渲染的機制，給表格綁定key為隨機生成的字符串，當點擊一鍵恢復時，重新生成一段新的隨機字符串賦值給表格綁定的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é)分享下正則表達式限制文本框只能輸入數字、小數點、英文字母、漢字等代碼,感興趣的朋友跟隨小編一起看看吧2023-12-12
最近有項目需要用到對圖片進行局部放大,類似淘寶商品頁的放大鏡效果,經過一番研究功能可用,下面這篇文章主要給大家介紹了關于如何利用vue3實現放大鏡效果的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue中this.$confirm的使用及說明方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在日常使用Vue開發(fā)項目的時候，計算屬性computed是一個非常常用的特性，本文就來分享一些使用Vue的computed計算屬性時的一些小技巧，希望能夠幫助到大家2023-06-06
公司業(yè)務新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數據。下面小編給大家?guī)砹嘶趘ue實現一個炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10
隨著互聯網的發(fā)展,越來越多的應用需要實現流程圖的制作,如工作流程圖、電路圖等,文中通過代碼以及圖文將實現的過程介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
詳解vue與后端數據交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數據交互(ajax)：vue-resource，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
淺談在vue中用webpack打包之后運行文件的問題以及相關配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運行文件的問題以及相關配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現右上角時間顯示實時刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
element-ui重置resetFields()不生效的解決
本文主要介紹了element-ui重置resetFields()不生效的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-12-12