vue3 element 多选表格 翻页多选

代码示例

//表格部分
<el-table ref="multipleTableRef" :data="userList" :header-cell-style="{ background: '#0c3d6b !important', height: '40px !important' }" :row-key="(row) => { return row.userId; }"  @select="selectChange" @select-all="selectAllChange">
   <el-table-column :reserve-selection="true" align="center" type="selection" width="55" />
   <el-table-column align="center" label="姓名" prop="nickName" show-overflow-tooltip />
</el-table>
<div class="table-footer flex justify-center" style="font-size: 14px">
   <pagination v-show="totalUser > 0" v-model:limit="queryParamsUser.pageSize" v-model:page="queryParamsUser.pageNum" :total="totalUser" @pagination="getUserList" />
</div>
//选中部分
<el-tag v-for="(tag, index) in selPeople" :key="index" closable type="info" 
 @close="handleTag(tag, index)">{{ tag.nickName }}</el-tag>
//js部分
const selPeople = ref([]);
const userList = ref([]);
const totalUser = ref(0)
//查询列表
const getUserList = async () => {
  const res = await //接口;
  userList.value = res.rows;
  totalUser.value = res.total;
  userList.value.forEach(row => {
    let status = selPeople.value.find((item) => {
      return row.userId == item.userId;
    })
    if (status) {
      nextTick(() => {
        multipleTableRef.value.toggleRowSelection(row, true)
      })
    } else {
      nextTick(() => {
        multipleTableRef.value.toggleRowSelection(row, false)
      })
    }
  })
}
// 单行前的勾选状态切换
const selectChange = (selectedRows, row) => {
  let selected = selectedRows.length && selectedRows.indexOf(row) !== -1;
  if (selected) {
    addItem(row);
  } else {
    removeItem(row);
  }
}

// 全选/取消全选
const selectAllChange = (selectedRows) => {
  let selectedMarkList = selPeople.value.map((item) => item.userId);
  // 当前页选中行的标记列表
  let pageSelectedMarkList = Array.isArray(selectedRows)
    ? selectedRows.map((item) => item.userId)
    : [];

  userList.value.forEach((row) => {
    if (pageSelectedMarkList.includes(row.userId)) {
      if (!selectedMarkList.includes(row.userId)) {
        addItem(row);
      }
    } else if (selectedMarkList.includes(row.userId)) {
      removeItem(row);
    }
  });
}
// 新增选中项
const addItem = (item) => {
  selPeople.value.push(item);
}

//移除选中项
const removeItem = (item) => {
  selPeople.value.forEach((el, index)=>{
    if(item.userId==el.userId) {
      selPeople.value.splice(index,1);
    }
  })
}

const handleTag = (rows, index) => {
  selPeople.value.splice(index, 1);
  userList.value.forEach(el => {
    if (rows.userId == el.userId) {
      nextTick(() => {
        multipleTableRef.value!.toggleRowSelection(el, false);
      })
    }
  })
}