element-ui 中el-table 中多选回显

<template>
  <div style="border: 1px solid rgba(234, 236, 240)">
    <div>
      <el-input
        v-model="ruleForm.input"
        placeholder="请输入姓名/身份证号/工种/班组关键字"
        style="width: 50%; height: 10%; padding: 2%"
      >
      </el-input>
      <el-button type="primary" plain @click="search1">搜索</el-button>
    </div>
    <div>
      <el-table
        ref="multipleTable1"
        :data="tableData1"
        :row-key="getRowKeys"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :reserve-selection="true" type="selection" width="55">
        </el-table-column>

        <el-table-column label="姓名" prop="workerName" width="120">
        </el-table-column>
        <el-table-column
          label="人员类型"
          prop="workerType"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="身份证号" prop="idNumber" width="200">
        </el-table-column>
        <el-table-column label="类别" prop="position" width="120">
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: flex-end; padding-left: 5px">
        <el-pagination
          @current-change="handleCurrentChange3"
          :current-page="this.workerlist.pageNo"
          :page-size="this.workerlist.pageSize"
          layout="total,prev, pager, next, jumper"
          :total="this.workerlistTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 新增的人员列表
import behaviorStatisticsApi from "@/api/behaviorStatistics";
export default {
  data() {
    return {
      ruleForm: {
        input: "",
        multipleSelection: [],
      },
      tableData1: [],
      workerlist: {
        keyword: "",
        pageNo: 1,
        pageSize: 5,
      }, 
      workerlistTotal: 0, 
    };
  },
  created() {
    this.workerList();
  },
  methods: {
    getRowKeys(row) {
      //唯一值，一般都是id
      return row.workerId;
    },
    // 在获取tableData数据的接口中调用
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable1.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable1.clearSelection();
      }
    },
    // 获取人员列表
    workerList() {
      behaviorStatisticsApi
        .getworkerList(this.workerlist)
        .then((res) => {
          this.tableData1 = res.data.records;
          this.$nextTick(() => {
            this.ruleForm.multipleSelection.forEach((item1) => {
              this.tableData1.forEach((item) => {
                let dataparams = [];
                if (item1.workerId === item.workerId) {
                  console.log(item, "huhu778");
                  dataparams.push(item);
                  console.log(dataparams, "dataparams");
                  this.toggleSelection(dataparams);
                }
              });
            });
          });
          this.workerlistTotal = res.data.total;
          this.error = null;
          this.isGetData = true;
        })
        .catch((error) => {
          console.error(error);

          this.error = "查询人员列表失败！";
        });
    },
    // 分页
    handleCurrentChange3(currentPage) {
      if (
        currentPage ===
        Math.ceil(this.workerlistTotal / this.workerlist.pageSize)
      ) {
        this.tableData1 = [];
      }
      this.workerlist.pageNo = currentPage;
      this.workerList();
    },
    search1() {
      this.workerlist.pageNo = 1;
      this.workerlist.keyword = this.ruleForm.input;
      this.workerList();
    },
    handleSelectionChange(val) {
      this.ruleForm.multipleSelection = val;
    },
  },
};
</script>

第一步 如果要实现分页多选，保持数据的选中状态

给el-table组件添加：:row-key="getRowKeys"

第二步：在methods中添加toggleSelection方法，在获取人员列表中调用该方法

完成后需要清空选中的：this.$refs.multipleTable1.clearSelection()