基于elementUI官网实例实现多行删除，反选模型
首先看看效果图
在没有选择任何多选框的时候，考虑多行删除属于危险操作，故将其隐藏了；只要被选择，批量删除和取消选择的按钮就会出现（你也可以不要这个功能）
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.引入elementUI的样式文件-->
<link rel="stylesheet" href="css/index.css">
<!--2.引入vue-->
<script src="js/vuejs-2.5.16.js"></script>
<!--3.引入elementUI组件库-->
<script src="js/index.js"></script>
<!--引入删除js数组中某一项的js方法-->
<script src="js/arrayRemove.js"></script>
</head>
<body>
<div id="app">
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button type="danger" v-if="multipleSelectionFlag" @click="deleteSelect()">批量删除</el-button>
<el-button type="primary" v-if="multipleSelectionFlag" @click="toggleSelection()">取消选择</el-button>
<el-button type="primary" @click="invertSelect()">反选</el-button>
</div>
</template>
</div>
<script>
new Vue({
el: "#app",
data: {
//模拟数据
tableData: [{
id: 1,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 4,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 5,
date: '2016-05-05',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 6,
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 7,
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
//专门用于存放需要被删除的项目的id
multipleSelection: [],
//用于控制删除选中和取消选中的按钮是否可见(其实就是一个小优化，因为删除功能比较危险，只有多选框有被选中的才会显示出来)
multipleSelectionFlag: false
},
methods: {
//选中多选框实现自动加入待删除行对象的数组
handleSelectionChange(val) {
//下面这个表示选择的多选框都会被加到存放待删除行的行对象！
this.multipleSelection = val;
//当用户只要选择了任意个多选框，删除选中和取消选中按钮就会出现
this.multipleSelectionFlag = true;
if (this.multipleSelection.length === 0) {
//如不进行判断则勾选完毕后批量删除按钮还是会在
this.multipleSelectionFlag = false;
}
},
//切换选中状态
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
//删除选中
deleteSelect() {
//首先弹出确定删除的对话框
this.$confirm('你确定要删除选中吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//遍历需要删除的数组
this.multipleSelection.forEach((item) => {
this.tableData.remove(item);
});
}).catch(() => {
this.$message("已取消");
});
},
//反选
/*
原理：
之前选中的现在取消选中，之前没有选中的现在选中
将选中和没有选中的均放在各自的数组里面,利用elementUI内置的toggleSelection方法
实现这样的效果！
关于a.filter(key => !b.includes(key))，这个是es6的语法，比较超前，笔者在此不做说明，请自行查阅资料
*/
invertSelect() {
var a = this.tableData;//这个是模型数据
var b = this.multipleSelection;//存放待删除行对象的数组
//获取差集
var diff = a.filter(key => !b.includes(key));
//调用elementUI内置的方法实现反转
this.toggleSelection(this.multipleSelection);
this.toggleSelection(diff);
}
}
});
</script>
</body>
</html>
其中的arrayRemove.js代码如下，其实就是自定义了实现数组删除指定项的自定义remove方法
//自定义一个获取数组中某一项所在索引的方法
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
//自定义删除数组中某一项的方法
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
//关于splice的用法请参考：https://www.w3school.com.cn/jsref/jsref_splice.asp
this.splice(index, 1);
}
};
核心功能总结
- 多行删除的原理：
你选的需要被删除的行对象会被存入multipleSelection数组，遍历获取每一个行对象，再调用之前自定义的数组删除方法remove，实现多行删除。 - 反选的原理：
2.1 elementUI的多行删除组件有一个内置的函数toggleSelection（rows），这个函数的功能是实现选中状态反转，其中参数rows表示用于存放行对象的数组。利用这点，当我传递一个封装删除行对象的数组的时候，就会取消这个行对象对应的多选框，反之，就会选中这些多选框，从而实现反选！
2.2 而获取这两个集合笔者用到了如下es6的新语法，其作用是返回一个数组，这个数组就是a和b的差集；类似的，获取a和b的交集则去掉！即可。
a.filter(key => !b.includes(key));//获取a和b的差集(a的长度要大于b)
a.filter(key => b.includes(key));//获取a和b的交集
以上代码笔者已上传至git：https://gitee.com/pkya/elementUIDemo.git