言简意赅的 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(); //取消全部选中
相关推荐
正义的大古14 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
雲墨款哥14 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程14 小时前
深入JS(一):手写 Promise
前端·javascript
EndingCoder16 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
子兮曰16 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
牛十二16 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
kk不中嘞18 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
yanlele18 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试
影子信息19 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js