背景:
使用vxe-table渲染表格,支持列选和拖拽列宽,并可按用户记忆,支持一键恢复默认列选、列宽,因此使用v-for动态渲染列。当点击一键恢复的时候,需要恢复成默认的列选及列宽。
问题:
使用vxe-table,用v-for渲染列,修改列宽调用vxe提供的refreshColumn和recalculate方法都不生效。表格列宽没有重新渲染。
解决方案:
利用vue触发重新渲染的机制,给表格绑定key为随机生成的字符串,当点击一键恢复时,重新生成一段新的随机字符串赋值给表格绑定的key,这样就会触发表格的重新渲染。
代码示例:
<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()
},
}
}