ElementUI表格數(shù)據(jù)批量選中操作

最近做項(xiàng)目時(shí)碰到個(gè)需求，要對(duì)表格中的數(shù)據(jù)批量處理，花了點(diǎn)時(shí)間最終解決了這個(gè)問(wèn)題

elementui表格中封裝了多選框，在el-column中選擇type為selection即可
獲取選中行的數(shù)據(jù)需要在table中定義ref使this.$refs.table.selection方法便可獲取到選中行的數(shù)據(jù)
如果要獲取不同頁(yè)的數(shù)據(jù)進(jìn)行操作，利用reserve-selection，這在官方文檔中有說(shuō)明

需要注意的是使用reserve-selection屬性必須配合row-key（不然會(huì)報(bào)錯(cuò)）

<el-table-column type="selection" width="55" :reserve-selection="true">

下面是完整代碼：

<template><div class="container"><el-button type="warning" @click="handle">批量操作</el-button><el-table:data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"style="width: 100%"ref="table"row-key="id"><el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column><el-table-column prop="id" label="序號(hào)"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="age" label="年齡"> </el-table-column><el-table-column prop="tel" label="電話"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><el-paginationbackgroundlayout="prev, pager, next, jumper":page-size="pagesize":total="list.length"@current-change="handleCurrentChange"@size-change="handleSizeChange"></el-pagination></div> </template><script> export default {components: {},data() {return {list: [],pagesize: 5,currpage: 1};},methods: {getTableDate() {this.$http.post("http://127.0.0.1:8888/user/tableList").then(res => {console.log(res.data);this.list = res.data;});},//獲取到選中行的數(shù)據(jù)handle() {console.log(this.$refs.table.selection);},del(row) {},handleCurrentChange(cpage) {this.currpage = cpage;},handleSizeChange(psize) {this.pagesize = psize;}},mounted() {this.getTableDate();} }; </script> <style lang="scss" scoped></style>

一共選中了5條數(shù)據(jù)

這是打印結(jié)果

總結(jié)

以上是生活随笔為你收集整理的ElementUI表格数据批量选中操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。