el-table相关

Question

问题描述

当value为1时,el-table按照showColumn1显示;为2时,按照showColumn2显示;为3时,按照showColumumn3显示.
如何在修改value的值时,可以使表格根据showColumn显示不同的列?

问题出现的环境背景及自己尝试过哪些方法

使用如下方法显示时,只会改变showColumn的值,表格显示的列不会变化;尝试过watch也没有用.

相关代码

粘贴代码文本（请勿用截图）

        <el-table
          ref="csTable"
          :tableDataUrl="tableDataUrl"
          :isShowEditBtn="false"
          :showColumn="value == '1' ? showColumn1 : value == '2' ? showColumn2 : showColumn3"
          :tableColumn="tableColumn"
          :highlight-current-row="true"
          border
          stripe
          size="medium"
        >
        
 data() {
    return {
      showColumn1: ['a','b','c'],
      showColumn2: ['a','b','c'],
      showColumn3: ['a','b','c']
      }
  }

Answer 1

可以使用computed声明一个变量，比如showColumn，在showColumn根据value计算showColumn的值（推荐）

:showColumn="showColumn"

computed: {
  showColumn(){
    return this.value == '1' ? this.showColumn1 : this.value == '2' ? this.showColumn2 : this.showColumn3
  }
}

也可以使用watch，监听value的值，更新showColumn

data(){
  return {
    showColumn: [],
    showColumn1: [],
    ...
  }
}
watch: {
  value(val){
     this.showColumn = val == '1' ? this.showColumn1 : val == '2' ? this.showColumn2 : this.showColumn3
  }
}