人员选择组件，记住用户选择，分页查询也管用：核心逻辑

//template
<el-table
	  ref="tableRef"
	  :height="440"
	  :data="orgList"
	  v-loading="loading"
	  @row-click="handleClickRow"
	  @selection-change="handleSelectionChange"
	  @select="handleSelectChange"
	  @select-all="handleSelectAll"
	>
	<el-table-column type="selection"></el-table-column>
</el-table>
props:
//最开始已经选择的数据
  initEmpArray: {
    type: Array<any>,
    default: [],
  },
  //接口获取的数据中 可以将conversionKey对应的字段值 复制一份给到 checkKey
  conversionKey: {
    type: String,
    default: "",
  },
  //校验的key，标记选中还是未选择数据逻辑中对比的key
  checkKey: {
    type: String,
    default: "id",
  },

/**
 * 全选
 * @param selection
 */
const handleSelectAll = (selection: any) => {
  handleAddOrDelete(selection, orgList.value, selectedEmpList.value);
};
/**
 * 勾选多行
 * @param data
 */
function handleSelectionChange(selection: any) {}
/**
 * 表格勾选事件
 */
const handleSelectChange = (selection: any, row: any) => {
  //判断当前是勾选还是取消勾选  selection 里面有 row 就是 新增，  没有就是删除
  let isCheck = false;
  if (
    selection.filter((item: any) => item[props.checkKey] == row[props.checkKey])
      .length != 0
  ) {
    isCheck = true;
  } else {
    isCheck = false;
  }
  handleRowAddOrDelete(row, isCheck, selectedEmpList.value);
};

//运行逻辑
/**
 * 处理单个数据的新增删除
 * @param row
 * @param isCheck
 * @param allSelectedData
 */
const handleRowAddOrDelete = (
  row: any,
  isCheck: boolean,
  allSelectedData: any
) => {
  if (isCheck) {
    allSelectedData.push(row);
  } else {
    allSelectedData.forEach((item: any, index: number) => {
      if (item[props.checkKey] == row[props.checkKey]) {
        allSelectedData.splice(index, 1);
      }
    });
  }
  return allSelectedData;
};
/**
 * 处理当前已经选择的数据中是否需要新增和修改
 */
const handleAddOrDelete = (
  selection: any,
  tableData: any,
  allSelectedData: any
) => {
  //从显示的表格数据中取出未被选中的数据
  const noSelectedEmp = tableData.filter(
    (item: any) =>
      selection.findIndex(
        (oItem: any) => oItem[props.checkKey] == item[props.checkKey]
      ) == -1
  );
  //将noSelectedEmp数据和allSelectedData中数据对比，如果没有就说明数据被取消勾选了，需要在allSelectedData中删除
  noSelectedEmp.map((noItem: any) => {
    const index = allSelectedData.findIndex(
      (sItem: any) => sItem[props.checkKey] == noItem[props.checkKey]
    );
    if (index != -1) {
      allSelectedData.splice(index, 1);
    }
  });
  //将selection 和 allSelectedData 中数据对比，有不处理，没有就加进去
  selection.map((item: any) => {
    const index = allSelectedData.findIndex(
      (sItem: any) => sItem[props.checkKey] == item[props.checkKey]
    );
    if (index == -1) {
      allSelectedData.push(item);
    }
  });
  return allSelectedData;
};
/**
 * 表格数据对比已经选择的数据，处理是否需要勾选上
 */
const handleCheckTableData = (tableData: any, allSelectedData: any) => {
  tableData.forEach((item: any, index: number) => {
    const selectIndex = allSelectedData.findIndex(
      (sItem: any) => sItem[props.checkKey] == item[props.checkKey]
    );
    if (selectIndex != -1) {
      tableRef.value.toggleRowSelection(item, true);
    }
  });
};


getTableData(queryParams)
    .then((res: any) => {
      const data = res.data;
      //这里复制一个数据的原因是因为 可能 列表查询接口中返回的数据里面没有我们需要对比的 key
      if (props.conversionKey && props.conversionKey != "") {
        data.list.forEach((item: any) => {
          item[props.checkKey] = item[props.conversionKey];
        });
      }
      //标记表格选中
      nextTick(() => {
        handleCheckTableData(data.list, selectedEmpList.value);
      });
    })
    .finally(() => {
      loading.value = false;
    });