Element el-table 中 type=“selection“ 的列 没法用 if 判断显示隐藏??

你是否也遇到了 Element el-table 中 type="selection" 的列 没法用 if 判断显示隐藏??

例如 

/***此处还有两个 按钮graduate 一个 已毕业1 一个未毕业0 ,需求是当已毕业的时候 需要增加多选框,未毕业不需要增加多选框,点击按钮 切换页面表格中 多选框那列的显示隐藏
*****/

        
          
        
         
 
      

//此处省略 获取tableData的代码 

类似上面是需求,如果你直接像上面写肯定不能实现,原因 在element el-table  源码中 单独对 type="selection"  有不一样的判断 下面代码 摘自源码文件 element -ui ---packages---- el-table ---src----table-column.js 文件的146-155行

 setColumnRenders(column) {
      // renderHeader 属性不推荐使用。
      if (this.renderHeader) {
        console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
      } else if (column.type !== 'selection') {
        column.renderHeader = (h, scope) => {
          const renderHeader = this.$scopedSlots.header;
          return renderHeader ? renderHeader(scope) : column.label;
        };
      }

修改办法

第一个代码段里el-table 标签内增加 :key="graduate"  ,key 不同表示不同表格,会重新渲染  :key="graduate" > 

你可能感兴趣的:(VUE,ElementUI,el-table,ElementUI)