element table checkbox 显示与隐藏

table表头中,全选复选框的隐藏,可以使用 :header-cell-class-name,例如:

<el-table border ref="multipleTable" 
   :header-cell-class-name="headerCellClass">
    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
    <el-table-column prop="tmTitle" label="名称" min-width="120" show-overflow-tooltip> </el-table-column>
    <el-table-column  type="selection" width="45" v-bind:selectable="checkSelect"> </el-table-column>     
</el-table>

// js
headerCellClass(row){
   if (row.columnIndex === 3) { // 第三列表头加 class, 用样式去隐藏
      return 'DisableSelection'
   }
},

//css
.DisableSelection > .cell {
  display: none !important;
}

 

table内容,根据每一行数据显示或隐藏复选框,可以使用  :cell-class-name,例如:

<el-table border ref="multipleTable" 
   :cell-class-name="cellClass">
    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
    <el-table-column prop="tmTitle" label="名称" min-width="120" show-overflow-tooltip> </el-table-column>
    <el-table-column  type="selection" width="45" v-bind:selectable="checkSelect"> </el-table-column>     
</el-table>

// js
cellClass(row){
   if (!row.row.name) {  // 根据某个属性,添加样式,隐藏复选框
      return 'myCell'
   }
},

//css
.myCell .el-checkbox__input{ 
  display: none;
}

 


版权声明:本文为a314753967原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。