element UI table表格的多选框如何根据条件隐藏显示

最新推荐文章于 2024-12-10 17:10:31 发布

原创最新推荐文章于 2024-12-10 17:10:31 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

在Vue.js项目中，通过使用`cell-class-name`属性和自定义方法`cellcb`，可以实现根据`row.channelName`的值来决定表格内的多选框是否显示。当`channelName`存在时，应用`myCell`类以隐藏对应的多选框。

**问题：**控制table里面的多选框根据条件不显示
**解决：**通过:cell-class-name="cellcb"属性控制

<el-table
      :data="tableList"
      @selection-change="handleSelectionChange"
      highlight-current-row
      @row-click="rowClick"
      row-key="id"
      :cell-class-name="cellcb"
      :tree-props="{ children: 'channelListVoList'}"
    >
      <el-table-column
        type="selection"
        align="center"
        width="45"
        :selectable="getSelectable"
      >
      </el-table-column>
      el-table-column
        prop="lightingState"
        label="状态"
        align="center"
        width="70"
      >
        <template slot-scope="{ row }">
          <light-newest
            v-if="row.channelName"
            :row="row"
            @change="changeStatus"
          ></light-newest>
        </template>
      </el-table-column>
</el-table>

cellcb({ row }){
 	return row.channelName ? "myCell" : ''
},

::v-deep .myCell .el-checkbox__input {
  display: none
}

element UI table表格的多选框 如何根据条件隐藏显示

element UI table表格的多选框如何根据条件隐藏显示