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进行清空。避免数据缓存。

相关推荐
MrGaoGang15 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭29 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
跟橙姐学代码32 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom36 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌37 分钟前
Web3基础
前端
RoyLin40 分钟前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端
stoneship3 小时前
Web项目减少资源加载失败白屏问题
前端