场景

在表格中点击多选框根据每个数据的ID能够查询到相关的信息

（1）不支持全选；做法隐藏了全选按钮

css 复制代码

::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//设置不成功，页面卡顿
  visibility: hidden;
}

（2）不支持跨页

（3）点击就进行查询

（4）行内数据某种状态的不支持选择

|------------|---------------------------------------------------------------------------|----------------------|-----|-----|
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | --- | --- |

代码

多选框的选择状态

html 复制代码

        <el-table-column type="selection" :selectable="selectable" width="55" />
   /**
     * @func 多选框不能选中已结算
     *
     */
    selectable(row, index) {
      if (row.status == 1) {
        return false;
      } else {
        return true;
      }
    },

搜索

点击多选框的事件

事件名	说明	参数
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection

html 复制代码

 <el-table :data="tableData" style="width: 100%" @select="selectOrderList">

这里使用的是select 不使用selection-change。因为点击事件一个获得的是点击行的row。另一个是取消选择返回一个[ ].

需求是将点击的id存入一个list。需要去重之类的操作。我直接使用的是点击获取id，在数组中如果没有进行push，如果有就删除。

javascript 复制代码

/**
     * @func 获取列表
     * @param {*} val
     */
    selectOrderList(selection, row) {
      const index = this.OrderListId.indexOf(row.id);
      if (index === -1) {
        // 如果id不在数组中，将id插入到数组末尾
        this.OrderListId.push(row.id);
      } else {
        // 如果id在数组中，从数组中删除该id
        this.OrderListId.splice(index, 1);
      }
      console.log(this.OrderListId);
     //将list发送请求
      this.getOrderMoneyMsg();
    },

注意点

在重置搜索切换页面时候，加载时候都需要将list进行清空。避免数据缓存。

elementUI中表格多选框的记录--v2

场景

代码

注意点