vxe-table动态渲染列,刷新列宽的方式

更新时间：2025年04月24日 09:32:55 作者：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()
    }, 
  }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中动态路由加载组件,找不到module问题及解决
这篇文章主要介绍了vue中动态路由加载组件,找不到module问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vue3中的h函数及使用小结
这篇文章主要介绍了Vue3中的h函数及使用小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue，当然也遇到很多问题，这里就来跟大家分享一些注册自定义模板组件的心得 ,需要的朋友可以参考下
2019-04-04
vue 实现网页截图功能详解
这篇文章主要介绍了通过vue实现网页截图的功能，有兴趣的童鞋可以了解一下
2021-11-11
Vue装饰器中的vue-property-decorator 和 vux-class使用详解
这篇文章主要介绍了Vue装饰器中的vue-property-decorator 和 vux-class使用详解,通过示例代码给大家介绍的非常详细，对vue-property-decorator 和 vux-class的使用感兴趣的朋友一起看看吧
2022-08-08
Vue.js学习记录之在元素与template中使用v-if指令实例
这篇文章主要给大家介绍了关于Vue.js学习记录之在元素与template中使用v-if指令的相关资料，文中给出了详细的示例代码供大家参考学习，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
Vue 换肤的示例实践
本篇文章主要介绍了Vue 换肤的示例实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue中v-if失效原因及解决方法
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下
2023-09-09
vue vant中picker组件的使用
这篇文章主要介绍了vue vant中picker组件的使用说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
el-table点击某一行高亮并显示小圆点的实现代码
这篇文章主要介绍了el-table点击某一行高亮并显示小圆点，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08