言简意赅的 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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui