vxe-table动态渲染列,刷新列宽的方式
作者：six+seven
这篇文章主要介绍了vxe-table动态渲染列,刷新列宽的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vxe-table动态渲染列,刷新列宽方式
背景
使用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()
},
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。