element 表格绑定动态变量且具备selection列的批量删除功能

功能介绍：对表格中的数据实现批量删除的功能。表格数据众多，利用分页组件进行分页显示，批量删除按钮在默认状态下是不可用的，当selection列有选中的数据时批量删除按钮可用。

示例代码：

<template>
	<div>
	  <!--批量删除按钮-->
	  <el-button :disabled="isDisabled" type="danger" @click="multipleDelete">批量删除</el-button> 
	  
	  <!--表格-->
	  <el-table
	  :data="clientAllData.slice(sizePerPage*(currentPage-1),sizePerPage*currentPage)"
	  @selection-change="selectionChange"> 
	     <el-table-column type="selection" align="center"></el-table-column>
	     <!--有若干条 el-table-column -->
	  </el-table>
	  
	  <!--分页-->
	  <el-pagination :page-size="sizePerPage" :total="clientAllData.length" @current-change="currentChange"></el-pagination>
	
	</div>
</template>

data(){
	return {
		isDisabled:true,  // 批量删除按钮是否不可用
		clientAllData:[],  // 表格中所有的客户信息，在 mounted钩子函数中通过调取后台接口获取
		sizePerPage:4,   // 分页组件每页显示的数据个数
		currentPage:1,   //分页组件的显示当前页码
		multipleDeleteData:[]     // 存放批量删除的数据		
	}
}

methods:{
	// 当分页组件的当前页码发生变化时
	currentChange(page){
		this.currentPage=page;
	},
	//  设置批量删除按钮是否可用（利用el-table的selection-change事件）
    selectionChange(selection){     // 参数selection返回所选行的各个分量
        if(selection.length>0){   
            this.isDisabled=false;  // 批量删除按钮可用
            this.multipleDeleteData=selection;
        }else{
            this.isDisabled=true;   // 批量删除按钮不可用
        }
    },
    // 批量删除按钮的单击事件
    multipleDelete(){
    	// 调取接口批量删除
    	let url='/api/staff/clientDeleteMultiple.jsp';
    	let clientIds=this.multipleDeleteData.map(item=>{
            return item.clid
        }).join(',');
        let data=`clientIds=${clientIds}`;
        this.$confirm('此操作将永久删除客户信息，是否继续？','提示',{
           type:'warning'
        }).then(()=>{
           this.$axios.post(url,data).then(()=>{
              let temp = this.multipleDeleteData.map(item=>{
                 if(this.clientAllData.indexOf(item)!=-1){
                    return this.clientAllData.indexOf(item);
                 }
              }).sort((a,b)=>b-a);
              temp.forEach(item=>{
                this.clientAllData.splice(item,1);
              });
           });
           this.$message.success('删除成功');
        }).catch(()=>{
           this.$message.info('已取消删除');
        });
    }
}

页面效果：

以上代码在操作中发现：复选框无法选中，批量删除按钮一直是不可用状态。
此时我们在selectionChange事件中输出事件参数console.log(selection)，控制台会输出两次，而且输出参数selection一次有数据，一次无数据。如下图：

该情况的问题描述：
当的数据:data是一个动态数据（currentPage）时，若表格具备selection列，且对selection列操作的事件（例如selection-change事件）也具备对变量（isDisabled）的操作时，表格的复选功能会执行两次

解决方案：

 （1）让表格数据不再是一个动态数据。
 （2）让事件不具备对变量的操作。（计算属性或者侦听属性）

1、让事件不具备对变量的操作
让批量删除按钮一直处于可用状态，当执行selection列的selection-change事件时判断参数selection的数组元素个数是否为0，如果为0则利用弹框让用户选择要删除数据，如果不为0就接着执行下面的操作。此方法因不管有没有要删除的数据批量删除按钮一直是可用状态，用户体验差。

2、让表格的数据不再是一个动态数据。
在数据区定义currentClientData作为表格中用data属性的动态绑定值，currentClientData的变化和哪些数据有关？我们先来看看之前:data绑定的数据是:data=clientAllData.slice((currentPage-1)*sizePerPage,currentPage*sizePerPage)
所以当clientAllData（所有客户信息）或者currentPage（当前页）发生变化时currentXClientData都会发生改变。此时考虑用计算属性来实现。

将currentClientData作为计算属性，将clientAllData（所有客户信息）和currentPage（当前页）作为计算属性的依赖变量，当计算属性的依赖变量发生变化时计算属性也随之改变。
但是在此案例中，所有客户信息在mounted()钩子函数中获取，计算属性先于mounted()执行。当操作所有客户信息数据时，所有客户信息数据还没有获取到，所以会报错，因此此方案不可取。

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

代码如下：

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