Element表格具备selection列，data是一个动态数据时。

在做<el-table></en-table>使用data注入数据后,用<el-pagination></el-pagination>做了分页效果。
结果出了一些问题。
请看下列代码：

<el-button type="danger" :disabled="isdelete" @click="batchDelete">批量删除</el-button>
<!--表格-->
      <el-row>
        <el-col :span="20" :offset="2">
          <el-table 
          /*slice截取表格数据(开始位置,结束位置)*/
          /*clientData从后台获取到的数据调取成功后给了数据区的clientData，然后在这里用data注入数据*/
          :data="clientData.slice((pageCurrent-1)*pageSize,pageCurrent*pageSize)" 
          @selection-change="selectionChange"   /*批量删除触发的事件*/
          >
            
          </el-table>
        </el-col>
      </el-row>


<!--分页-->
      <el-row>
        <el-col :span="18" :offset="3">
          <el-pagination :total="clientData.length"     /*clientData是表格data的数据（获取数据个数）*/
                         :page-size="pageSize"      /*每页数据个数*/
                         @current-change="currentChange"    /*当用户单击任意页码或实现页面跳转时会触发current-page属性的变化。*/
          ></el-pagination>
        </el-col>
      </el-row>

<!--data区-->
data(){
	return{
		clientData:[],  /*从后台获取到的表格数据放入表格中的data中*/
		
		pageSize:3,    /*每页的数据个数*/
        pageCurrent:1,  /*当前选中页*/
        isdelete:true  /*批量删除按钮为禁用状态，默认值禁用为true，所以禁用为true，可用为false*/
	}
},
mehtods:{
	/*分页发生变化*/
    currentChange(current){
    	console.log(current);    /*点击分页条的时候打印当前分页（1,2,3.....）*/
    	this.pageCurrent=current  /*将当前点击的分页数据复制给出数据区的 当前选中页*/
    },
   /*当选择项发生变化时会批量删除按钮可用*/
   selectionChange(selection){
	   	console.log(selection)   /*选中的这一行的数据是一个数组（数组包对象）*/
	   	if(selection.length>0){   /*判断这个数组的长度，长度大于0让按钮变成可用*/
		   	this.isdelete=false
	   	}else {
	   		this.isdelete=true		/*否则数组变成禁用状态*/
	   	}
   },
}

上述代码出现的问题是：
分页可以正常使用，但是点击selection框的时候会发现并不会点中。

此时打印
看控制台打印出来的会是两条数据

会发现，表格复选功能会执行两次。选中之后马上就有没有了。

解决方案：

• （1）让表格数据不再是一个动态数据。
• （2）让事件不具备对变量的操作。

/*在上述代码基础上修改*/
/*在数据区新建一个空数组*/
data(){
	return{
		currentData:[]    
	}
},
/*将表格data注入这个新数组*/
	<!--表格-->
      <el-row>
        <el-col :span="20" :offset="2">
          <el-table 
          :data="currentData"    /*此时currentData为空没有数据*/
          @selection-change="selectionChange"   /*批量删除触发的事件*/
          >
            
          </el-table>
        </el-col>
      </el-row>

/*书写侦听事件侦听表格的变化和当前选中页的变化*/
watch:{
	/*侦听从后台获取到的数据*/
	clientData(newValue,oldValue){
		console.log(newValue)    /*获取到数据集合*/
		/*截取数据,此时newValue就代替了clientData是一个数据集合，所以这里截取newValue就好了,截取之后给了currentData*/
		this.currentData=newValue.slice((this.pageCurrent-1)*this.pageSize,this.pageCurrent*this.pageSize)
	}
	/*侦听当前页的变化*/
	pageCurrent(newValue,oldValue){
		console.log(newValue)    /*当前页面的新值(1,2,3,...)*/
		this.currentData=this.clientData.slice((newValue-1)*this.pageSize,newValue*this.pageSize)
	}
}

这样就可以选中了

这样就解决了问题了！