言简意赅的 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(); //取消全部选中
相关推荐
reoreo39 分钟前
如何使用 i18next 实现多种语言的国际化(从新建 vite ts 项目开始)
前端·javascript
咸虾米40 分钟前
在unicloud的云对象中如何调用同一服务空间内的另外其他云对象
javascript·微信小程序·前端框架
南山安41 分钟前
从零开始玩转 AIGC:用 Node.js 调用 OpenAI 接口实现图像生成与销售数据分析
javascript·node.js
Asort43 分钟前
JavaScript设计模式(二十三)——访问者模式:优雅地扩展对象结构
前端·javascript·设计模式
诸葛韩信1 小时前
我们项目中如何运用vueuse
javascript
用户9290412768551 小时前
在 react 中单独使用 kityformula-editor
javascript·react.js
一 乐1 小时前
口腔健康系统|口腔医疗|基于java和小程序的口腔健康系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·小程序·毕设
旺财是只喵1 小时前
vue项目里使用3D模型
前端·vue.js
Java陈序员1 小时前
完全开源!一款基于 SpringBoot + Vue 构建的社区平台!
vue.js·spring boot·github·社区
好奇的候选人面向对象1 小时前
基于 Element Plus 的 TableColumnGroup 组件使用说明
开发语言·前端·javascript