elementui table的多选框

在elementUI中，使用多选框checkbox在表格中有两种方法。第一种方法是在elementUI的table组件中的一列设置一个属性type="selection"，这样就可以实现像第一列多选框一样的效果。另外一种方法是单独设置一列多选框，并通过设置disabled属性来控制是否禁用多选框。

为了解决点击第一列多选框选中时，修改其他列多选框的值的问题，可以通过设置勾选事件handleSelectionChange和更新disabled属性的方法updateDisable来实现。当选中第一列多选框时，使其他列的多选框无法选中，通过改变disabled属性来控制禁用状态。

对于表格数据中的每一列多选框，可以增加一个disabled属性，并通过第一列的勾选事件来控制传递值type，从而控制是否删除这一列的多选框是否禁用。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

elementui table多选框单选

可以通过以下步骤实现elementui的表格多选框单选：
1. 隐藏多选框：在样式中添加以下代码：`.el-table__header .el-checkbox { display: none; }`
2. 监听selection-change事件：在el-table标签中添加`@selection-change="handleSelectionChange"`，并在methods中添加`handleSelectionChange`方法。
3. 在handleSelectionChange方法中判断选中的行数，如果大于1，则清除所有选中项，只选中最后一个选中的项；否则，将选中项赋值给tableSelect。
4. 在table中添加`:row-class-name="tableRowClassName"`，并在methods中添加`tableRowClassName`方法，用于判断当前行是否被选中，如果被选中，则添加`row-selected`类名。
5. 在样式中添加以下代码：`.row-selected .el-checkbox { display: none; }`，用于隐藏多选框。
代码如下：

<template>
  <el-table :data="tableData" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column label="角色名称" min-width="120" prop="name"></el-table-column>
    <el-table-column prop="num" label="成员数量" min-width="120"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableSelect: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      } else {
        this.tableSelect = val;
      }
    },
    tableRowClassName({ row }) {
      if (this.tableSelect.indexOf(row) !== -1) {
        return 'row-selected';
      }
      return '';
    }
  }
}
</script>

<style scoped>
.el-table__header .el-checkbox {
  display: none;
}
.row-selected .el-checkbox {
  display: none;
}
</style>

elementui表格多选框

在elementUI中，表格的多选框有两种使用方法。第一种方法是在table的一列中设置属性type="selection"，这样就可以在表格的第一列显示多选框。如下所示：

<el-table :data="tableData" :current-page.sync="currentPage" @selection-change="handleSelectionChange" style="width: 100%;" class="" ref="taskTable">
  <el-table-column type="selection" width="55"></el-table-column>
</el-table>

第二种方法是在单独的一列中使用多选框，并与其他多选框进行区分。如下所示：

<el-table-column width="55" label="是否删除">
  <template slot-scope="scope">
    <el-checkbox v-model="tableData