Element-ui el-table组件单选/多选/跨页勾选讲解

Element-ui的el-table组件提供了单选和多选的功能，并且在多选的基础上还增加了跨页勾选的功能。

1. 单选：

你需要在el-table-column中使用type="radio"来实现单选功能。

<el-table :data="tableData" @row-click="handleRowClick">
  <el-table-column type="radio" width="55">
    <!-- 这里可以自定义模板，如果不指定，将使用默认的单选按钮 -->
  </el-table-column>
  <!-- 其他列 -->
</el-table>

methods: {
  handleRowClick(row, event, column) {
    // 你可以在这里处理单选事件，row是当前行的数据
  }
}

2. 多选：

在el-table-column中使用type="selection"来实现多选功能。

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55">
    <!-- 这里可以自定义模板，如果不指定，将使用默认的多选按钮 -->
  </el-table-column>
  <!-- 其他列 -->
</el-table>

methods: {
  handleSelectionChange(selection) {
    // 你可以在这里处理多选事件，selection是当前选中的行数据数组
  }
}

3. 跨页多选：

Element-ui的el-table组件默认不支持跨页多选，但你可以通过以下方式实现：

• 使用row-key属性为每行数据分配唯一标识。
• 使用reserve-selection属性在切换分页时保留选中状态。

<el-table :data="tableData" row-key="id" @selection-change="handleSelectionChange" :reserve-selection="true">
  <!-- 多选列 -->
  <!-- 其他列 -->
</el-table>

确保你的tableData中的每个对象都有一个唯一的id属性，这样row-key才能正常工作。

以上代码片段提供了基本的单选、多选和跨页多选的实现方式，你可以根据实际需求进行调整和扩展。