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正则表达式限制input的输入范围
我们有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码,感兴趣的朋友跟随小编一起看看吧
2023-12-12
如何利用vue3实现放大镜效果实例详解
最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下
2021-09-09
vue中this.$confirm的使用及说明
这篇文章主要介绍了vue中this.$confirm的使用及说明方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
浅析Vue如何巧用computed计算属性
在日常使用Vue开发项目的时候，计算属性computed是一个非常常用的特性，本文就来分享一些使用Vue的computed计算属性时的一些小技巧，希望能够帮助到大家
2023-06-06
vue实现一个炫酷的日历组件
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
2018-10-10
vue3 + antv/x6实现流程图的全过程
随着互联网的发展,越来越多的应用需要实现流程图的制作,如工作流程图、电路图等,文中通过代码以及图文将实现的过程介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-06-06
详解vue与后端数据交互(ajax)：vue-resource
本篇文章主要介绍了详解vue与后端数据交互(ajax)：vue-resource，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
下面小编就为大家分享一篇浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue实现右上角时间显示实时刷新
这篇文章主要为大家详细介绍了vue实现右上角时间显示实时刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
element-ui重置resetFields()不生效的解决
本文主要介绍了element-ui重置resetFields()不生效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-12-12