iview table多选框

### iview Table 组件多选框使用详解

#### 表格初始化设置
为了实现带有复选框功能的表格，需先引入 `iview` 的 `Table` 组件并定义好数据源。通过给 `columns` 添加 `{type: 'selection', width: 60, align: 'center'}` 来启用列的选择模式[^2]。

// 定义表格的数据结构
const tableColumns = [
    {
        type: 'selection',
        width: 60,
        align: 'center'
    },
    // ...其他列配置...
];

#### 数据处理逻辑
当用户操作复选框时，可以通过监听特定事件来获取当前被选中的项。这些事件包括但不限于：

- 用户点击全选/取消全选按钮时分别触发 `@on-select-all` 和 `@on-select-all-cancel`

下面是一个简单的例子展示如何捕获上述事件，并更新状态管理变量 `selectedItems` 存储已选项的信息[^4]。

<template>
  <div>
    <!-- 表格 -->
    <Table 
      :data="tableData"
      :columns="tableColumns"
      @on-selection-change="handleSelectionChange"
      @on-select-all="selectAllRows"
      @on-select-all-cancel="cancelSelectAllRows">
    </Table>

    <!-- 显示已选择条目数量 -->
    Selected Items Count: {{ selectedItems.length }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],          // 表格显示的数据列表
      tableColumns: [...],     // 列定义，含 selection 类型
      selectedItems: []       // 已经选择了哪些记录
    };
  },

  methods: {
    handleSelectionChange(selection) {
      this.selectedItems = selection;
    },

    selectAllRows(selected) {
      if (selected) {
        this.selectedItems = this.tableData.slice();
      } else {
        this.selectedItems = [];
      }
    },

    cancelSelectAllRows() {
      this.selectedItems = [];
    }
  }
};
</script>

#### 后端分页场景下的注意事项
对于采用服务端分页的应用程序来说，在翻页之后保持之前页面上已经勾选的状态是一项挑战。通常的做法是在前端维护一个映射关系（比如以 ID 作为键），每当加载新一页数据时重新应用之前的选中状态。