element UI表格绑定动态数据与selection复选操作的坑

案例介绍：此案例是要求完成对客户的批量删除功能，因为客户有多条数据所以要结合分页组件来实现，并且批量删除按钮默认是禁用的，当有数据被选中时变为可用状态。

当<el-table></el-table>的数据:data是一个动态数据时（分页功能导致），若表格具备selection列，且对当前操作的事件（例如selection-change）也具备对变量的操作时：表格的复选功能会执行两次。

示例代码：

<!--批量删除按钮-->
<el-button type="danger" :disabled="isDisabled"
@click="btnDelMultiple">批量删除</el-button>

<!--表格-->
<el-table @selection-change="selectionChange"
	:data="clientData.slice((currentPage-1)*sizePerPage,currentPage*sizePerPage)">
	<el-table-column type="selection" align="center"></el-table-column>
	<el-table-column label="客户姓名" prop="name" align="center"></el-table-column>
	... ...
</el-table>

<!--分页组件-->
<el-row class="pagination">
	<el-col :span="14" :offset="5">
		<el-pagination @current-change="currentChange" :total="clientData.length" :page-size="sizePerPage"></el-pagination>
	</el-col>
</el-row>

data(){
	return {
		clientData:[], //所有客户信息
		isDisabled:true, //批量删除按钮是否被禁用
		userClients:[], //要删除的客户组成的数组
		sizePerPage:5,  //分页中每页数据的个数
		currentPage:1,  //当前页面
	}
},
mounted(){
	let url = '/api/staff/clientQueryByWid.jsp';
	let data = {
		wid:this.workerId
	};
	this.$axios.post(url,this.qs.stringify(data)).then(res=>{
		// console.log(res.data);
		this.clientData = res.data
	})
}

//checkbox多选操作
selectionChange(selection){
	console.log(selection);	//所有被选中的元素的集合，组成的数组
	this.userClients = selection;	//把删除的客户组成的数组赋值给数据区变量
	if(selection.length > 0){
		this.isDisabled = false;
		console.log('批量删除按钮可用');
	}else{
		this.isDisabled = true;
		console.log('批量删除按钮不可用');
	}
},

此时，由下图看出表格的复选功能会连着执行两次

解决方案：

（1）让事件不具备对变量的操作。

可以让批量删除按钮一直处于可用状态，当点击按钮时判断有没有数据被选中，如果没有提示弹框让用户选择要删除数据，如果有就接着执行下面的操作。

（2）让表格的数据不再是一个动态数据。

首先定义一个currentData作为当前分页的数据在表格中用:data动态绑定，分析一下currentData和哪些数据有关系？
之前:data绑定的数据是:data=clientData.slice((currentPage-1)*sizePerPage,currentPage*sizePerPage)，
所以当clientData（所有客户信息）或者currentPage（当前页面）发生变化时currentData都会发生改变。

可以在计算属性（computed）中将currentData作为计算属性，将clientData（所有客户信息）于currentPage（当前页面）作为计算属性的依赖变量实现，当计算属性的依赖变量发生变化时计算属性也随之改变。
但是在此案例中，所有客户信息在mounted()钩子函数中获取，由于计算属性先于mounted()执行。当操作所有客户信息数据时，所有客户信息数据还没有获取到，所以会报错，因此此方案不可取。
想更多了解计算属性，可以看小编之前写的文章：Vue计算属性和侦听属性

可以在watch侦听属性中将clientData（所有客户信息）于currentPage（当前页面）作为被侦听的变量，当被侦听的变量发生变化时执行侦听属性所对应的函数也随之发生变化。
如下代码：

<!--表格-->
<el-table @selection-change="selectionChange" :data="currentData">

</el-table>

data(){
	return {
		currentData:[], //当前页面的数据
	}
},

watch:{
	clientData(newValue,oldValue){
		this.currentData = newValue.slice((this.currentPage-1)*this.sizePerPage,this.currentPage*this.sizePerPage);
	},
	currentPage(newValue,oldValue){
		this.currentData = this.clientData.slice((newValue-1)*this.sizePerPage,newValue*this.sizePerPage);
	}
}