vue+elementUI实现对表格批量操作

目的

需求实现批量删除：将表格选中行的参数放在请求中传给后端

实现方案

ref=“multipleTable”
this.$refs.multipleTable.selection;获取表格中被选中行的信息

代码块

<template>
<div id="text">
<el-card class="box-card m-t-10" shadow="hover">
<div slot="header" >
<el-row type="flex" justify="space-between">
<el-col :span="12">
<el-button size="mini" @click="deletes">批量删除</el-button>
</el-col>
</el-row>
</div>
<el-table :data="tableData" border style="width: 100%" ref="multipleTable">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="username" label="用户名称" align="center"></el-table-column>
<el-table-column prop="updateTime" label="上传时间" width="160" align="center"></el-table-column>
<el-table-column prop="authorName" label="作者名称" align="center"></el-table-column>
<el-table-column prop="authorFirm" label="作者单位" align="center"></el-table-column>
</el-table>
</el-card>
</div>
</template>

<script>
import request from "@/Utils/request";

export default {
data () {
return {
tableData:[{username:'username1'},{username:'username2'},{username:'username3'}],
}
},
methods:{
// 批量删除
deletes() {
this.selectionDatas = [];
var arr=[];
var data = this.$refs.multipleTable.selection;
data.forEach(function(item){
arr.push(item.username)
});
console.log(arr,"测试选中arr");
request.delete(apis.manageModel,arr)
.then(function(response) {
if (response.data.code == 200) {

}
})
.catch(function(error) {
console.log(error);
});

},
}
}
</script>

效果展示

打印结果选中表格

• 点赞
• 收藏
• 分享
• 文章举报