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

场景

在表格中点击多选框根据每个数据的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进行清空。避免数据缓存。

相关推荐
一枚前端小能手1 分钟前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码2 分钟前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码3 分钟前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗4 分钟前
VS Code 中手动和直接运行TS代码
前端
小高0076 分钟前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
Samsong6 分钟前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
Lotzinfly8 分钟前
8 个经过实战检验的 Promise 奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
RoyLin9 分钟前
TypeScript设计模式:单例模式
前端·后端·node.js
小公主10 分钟前
我的第一个 React Flow 小实验
前端