言简意赅的 el-table 跨页多选

步骤一

在<el-table>中**:row-key="getRowKeys"** 和**@selection-change="handleSelectionChange"**

在<el-table-column>中type="selection" 那列,添加**:reserve-selection="true"**

html 复制代码
<el-table
   :data="tableData"
   ref="multipleTable"
   border
   style="width: 100%"
   :row-key="getRowKeys"
   @selection-change="handleSelectionChange"
 >
    <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
     >
     </el-table-column>
     <el-table-column type="index" label="序号" width="50">
     </el-table-column>
     <el-table-column prop="code" label="设备编号"> </el-table-column>
      <el-table-column prop="name" label="设备名称"> </el-table-column>
      <el-table-column prop="capacity" label="标准产能(kg/天)">
      </el-table-column>
      <el-table-column prop="shopName" label="车间"> </el-table-column>
      </el-table>

步骤二

javascript 复制代码
methods: {
    getRowKeys(row) {
      return row.id;
    },
    handleSelectionChange(e) {
      console.log(e,"被选中数据")
      this.addDeviceData = e;
    },
}

提示

在开发过程中,示如我遇到的需求,<el-table> 展示在<el-dialog>弹框中。第二次点击近弹窗,要求数据不选择。那么可以在<el-dialog>弹框关闭时的事件中加上这行代码。

javascript 复制代码
this.$refs.multipleTable.clearSelection(); //取消全部选中
相关推荐
@大迁世界2 分钟前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
DoraBigHead17 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu17 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu26 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu26 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu28 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
LuckySusu30 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
今天头发还在吗43 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
渣哥1 小时前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong1 小时前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron