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

背景:

使用vxe-table渲染表格,支持列选和拖拽列宽,并可按用户记忆,支持一键恢复默认列选、列宽,因此使用v-for动态渲染列。当点击一键恢复的时候,需要恢复成默认的列选及列宽。

问题:

使用vxe-table,用v-for渲染列,修改列宽调用vxe提供的refreshColumn和recalculate方法都不生效。表格列宽没有重新渲染。

解决方案:

利用vue触发重新渲染的机制,给表格绑定key为随机生成的字符串,当点击一键恢复时,重新生成一段新的随机字符串赋值给表格绑定的key,这样就会触发表格的重新渲染。

代码示例:


export defalut {

  data(){
        tableKey:Math.random()
    },
  methods:{
    refreshTable(){
      this.tableKey = Math.random()
    }, 
  }
}

你可能感兴趣的:(前端,javascript,vue.js)