VUE+ElementUI对Table的多选进行批量操作(复选框勾选删除)完整功能实现
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
其实实现批量操作功能的重点在于如何取到索引值,之前懵懵懂懂不明白,想通了之后还是比较简单的。
ElementUI:选择多行数据时使用 Checkbox。当用户勾选目标信息时,会触发selection-change事件。
<el-button type="warning" @click="deleteSelectItem">批量删除</el-button>
<el-table
ref="multipleTable"
:data="searchlist"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="bianhao" label="" width="200">
</el-table-column>
</el-table>
在method中实现handleSelectionChange方法,val为选中的数据集合。其中, multipleSelection: [],需要在data()中声明
//获取多选的数据
handleSelectionChange(val) {
this.multipleSelection = val;//存储选中的数据
console.log(val);
},
实现deleteSelectItem方法(批量删除按钮点击触发)。
deleteSelectItem() {
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
//遍历获得多选选中的index值
this.multipleSelection.forEach((value, index) => {
//遍历多选框获取的数据
this.searchlist.forEach((v, i) => {
//遍历数据表,任意一个属性值相同,则说明该数据被选中,其i则为索引值
if (value.bianhao == v.bianhao) {
this.searchlist.splice(i, 1);
}
});
});
this.$message({
type: "success",
message: "删除成功!",
});
console.log("删除成功");
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
},
修改选中数据的某字段值与删除类似,找到索引号后进行操作,例如修改searchlist中选中项的状态。editSelectItem(state)中的state为需要改成的状态,比如说选中的项的状态全部改为正常那就editSelectItem(“正常”)。
editSelectItem(state) {
this.$confirm("是否修改选中记录的状态?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
//遍历获得多选选中的index值
this.multipleSelection.forEach((value, index) => {
//遍历多选框获取的数据
this.searchlist.forEach((v, i) => {
//遍历数据表,任意一个属性值相同,则说明该数据被选中,其i则为索引值
if (value.goodinid == v.goodinid) {
this.searchlist[i].state = state
}
})
})
this.$message({
type: "success",
message: "审核成功!",
})
})
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)