el-table多选限制分页怎么办

 当我们使用多选的时候 , 数据在不同的地方 , 分页又不能准确拿到 , 这个时候就要用:row-key了

<el-table
   ref="multipleTable"
   :data="gridData"
   :row-key="getRowKey"
    @selection-change="handleSelectionChange"
>
    <el-table-column type="selection" width="55" :reserve-selection="true" />
    <el-table-column property="userName" label="姓名" width="200" />
    <el-table-column property="phone" label="电话" />
</el-table>
// 这里使用el-tag标签进行一个循环遍历出来
<el-tag v-for="(index,user) in userName" :key="index" closable @close="handle(user)">
   {{ userName[user] }}
</el-tag>

data(){
    return{
        gridData: [], // 表格数据
        userName: [],
    }
},
methods(){
    getRowKey(val) {
      return val.userId
    },
    // 当数据发生改变时,数组的值也要随之发生改变
    handleSelectionChange(val) {
      const arr1 = []
      val.forEach(item => {
        arr1.push(item.userName + item.phone)
      })
      this.userName = arr1
    },
    // 当点击标签的关闭按钮时,清除掉数组的那一项(val是索引)
    handle(val) {
      this.userName.splice(val, 1)
    },
}

row-key的这个方法ELement官网也做出了详细的解释

 最后的效果图是这样的