el-table多列 复选框

您可以使用el-table-column的type属性来定义多列复选框。例如：

<el-table :data="tableData" style="width: 100%">
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
  <el-table-column
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="200">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址">
  </el-table-column>
</el-table>

在这个例子中，我们在第一列中添加了type="selection"属性来定义多列复选框。这将在第一列中显示一个复选框，允许用户选中或取消选中整个表格的行。

相关问题

el-table-v2增加复选框

在Element UI的v2版本中（也称为Element Plus），`el-table-v2`组件是用来展示表格数据的，如果你想在其中添加复选框，你可以使用`cell-template`属性结合自定义的模板来实现这一功能。以下是一个简单的例子：

<template>
  <el-table :data="tableData" v-bind:class="{ striped: true }" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column> <!-- 添加选择列 -->
    <el-table-column property="name" label="姓名"></el-table-column>
    <!-- 其他列... -->
    <template slot-scope="scope">
      <el-checkbox v-model="scope.row.selected" @change="handleSelectionChange(scope.$index, scope.row)"></el-checkbox>
      <!-- 这里每一行都会显示一个复选框，v-model绑定到数据项selected属性 -->
      {{ scope.row.name }}
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', selected: false },
        { name: '李四', selected: false },
        // 更多数据...
      ],
      selectedRows: [] // 存储被选中的数据
    };
  },
  methods: {
    handleSelectionChange(index, row) {
      this.selectedRows.push(row);
      // 更新或处理选中状态
    }
  }
};
</script>

在这个例子中，`handleSelectionChange`函数会在每次复选框状态改变时被调用，你可以在这里管理被选中的行。

el-table取消复选框

你可以通过设置 `show-checkbox` 属性为 `false` 来取消 `el-table` 组件的复选框。代码示例如下：

<el-table :data="tableData" show-checkbox="false">
  <!-- 表格列配置 -->
</el-table>

这样就可以隐藏复选框了。注意，这会同时隐藏表头的复选框和每一行的复选框。如果你只想隐藏表头的复选框，可以设置 `header-checkbox-disabled` 属性为 `true`：

<el-table :data="tableData" show-checkbox header-checkbox-disabled>
  <!-- 表格列配置 -->
</el-table>

希望对你有所帮助！如有更多问题，请继续提问。