Element-UI实现跨页勾选

Element-UI实现跨页勾选

最近接到了一个需求，需要保证在翻页和查询的时候，不能清除已经勾选的记录。

实现思路：使Map保存被选择的数据，<主键ID，选中状态true/false>。在执行翻页、查询操作后，遍历Map，将状态为true的数据进行勾选

核心代码：

// 回显勾选状态
const handleSelectionChange = () => {
  nextTick(() => {
    tableData.value.forEach((item) => {
      console.log(map.get(item.id));
      if (map.get(item.id)) {
        tableRef.value.toggleRowSelection(item, true);
      }
    });
  });
};

全部代码

<template>
  <el-row>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-table
    :data="tableData"
    style="width: 100%"
    @select="handleSelect"
    @select-all="handleSelect"
    ref="tableRef"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column
      property="address"
      label="use show-overflow-tooltip"
      width="240"
      show-overflow-tooltip
    />
    <el-table-column property="address" label="address" />
  </el-table>
  <el-pagination
    layout="prev, pager, next"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="globalData.length"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
interface User {
  id: number;
  date: string;
  name: string;
  address: string;
}

const form = ref({
  name: "",
});

const map = new Map<Number, boolean>();
const currentPage = ref(1);
const pageSize = ref(4);
const tableRef = ref();

const globalData: User[] = [
  {
    id: 1,
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
  },
  {
    id: 2,
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
  },
  {
    id: 3,
    date: "2016-05-02",
    name: "Brandon Deckert",
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
  },
  {
    id: 4,
    date: "2016-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
  },
  {
    id: 5,
    date: "2017-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
  },
  {
    id: 6,
    date: "2017-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
  },
  {
    id: 7,
    date: "2017-05-02",
    name: "Brandon Deckert",
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
  },
  {
    id: 8,
    date: "2017-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
  },
];
const tableData: User[] = ref(globalData.slice(0, 4));

// 发生页面变化
const handleCurrentChange = (val: number) => {
  const start = (val - 1) * pageSize.value;
  const end = start + pageSize.value;
  tableData.value = globalData.slice(start, end);
  handleSelectionChange();
};

// 选择数据
const handleSelect = (selection: User[]) => {
  for (const elem of tableData.value) {
    const { id } = elem;
    const tlist = selection.filter((item) => item.id === id);
    map.set(id, tlist.length > 0);
  }
};

// 查询数据
const onSubmit = () => {
  const { name } = form.value;
  if (!name) {
    handleCurrentChange(1);
    return;
  }
  const filteredData = globalData.filter((item) => item.name.includes(name));
  tableData.value = filteredData;
  handleSelectionChange();
};

// 回显勾选状态
const handleSelectionChange = () => {
  nextTick(() => {
    tableData.value.forEach((item) => {
      console.log(map.get(item.id));
      if (map.get(item.id)) {
        tableRef.value.toggleRowSelection(item, true);
      }
    });
  });
};
</script>