这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

elementUI table的翻页多选效果

前言

最近项目中出现了这样一个需求, 在选择表格的时候, 选中翻下一页,再回来还要看到选中的项, 今天就来写一下我的思路。

效果

环境的搭建

# 创建deom
vue create demo 

# 添加element-plus
yarn add element-plus

思路

1. 在选择时把选项保存起来。
2. 在翻页时，将当前数据过滤出选中的。
3. 利用element的api实现选中。

步骤

先模拟一个翻页效果

因为没有接口，所以写了一些模拟数据， 模拟数据如下：

const page: Array<Array<PageData>> = [
      [
        {
          id: 1,
          name: "张三1",
        },
        {
          id: 2,
          name: "张三2",
        },
        {
          id: 3,
          name: "张三3",
        },
      ],
      [
        {
          id: 4,
          name: "李四1",
        },
        {
          id: 5,
          name: "李四2",
        },
        {
          id: 6,
          name: "李四3",
        },
      ],
    ];

table组件的事件

我们这次实现这个效果主要使用以下两个事件

事件	说明	参数
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
selection-change	当选择项发生变化时会触发该事件	selection

在设置选中效果时，要使用以下的方法

方法	说明	参数
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected

开搞

1. 我们先声明一个Set，可以利用Set的特性

Set对象允许你存储任何类型的唯一值，无论是[原始值]或者是对象引用。

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

const multipleSelection = new Set();

2. 在获取数据时， 使用toggleRowSelection方法设置选中项。

setTimeout(() => {
    tableData.value = page[index]; //  page[index]是模拟的数据
    const selectId = Array.from(multipleSelection);
    page[index].forEach((v) => {
      selectId.forEach((val) => {
        if (v.id === val) {
          table.value.toggleRowSelection(v, true);
        }
      });
    });
 }, 10);

3. selectionChange触发时我们把选中项的id塞给我们刚才定义的Set： multipleSelection

function selectionChange(val: Array<PageData>) {
  val.forEach((v: PageData) => {
    multipleSelection.add(v.id);
  });
}

4. 在select事件触发时，我们判断是否是取消选择，是取消时，删除multipleSelection里的id

function select(rows: Array<PageData>, row: PageData) {
  const arr = rows.filter((v) => v.id === row.id);
  if (arr.length === 0) {
    multipleSelection.delete(row.id);
  }
}

完整代码

<template>
  <el-table
    :data="tableData"
    border
    ref="table"
    stripe
    @select="select"
    @selection-change="selectionChange"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column prop="name" key="name" label="姓名"> </el-table-column>
  </el-table>
  <el-pagination
    layout="prev, pager, next"
    :total="6"
    :page-size="3"
    @current-change="currentChange"
  ></el-pagination>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  name: "Home",
  setup() {
    interface PageData {
      id: number;
      name: string;
    }
    const tableData = ref<Array<PageData>>([]);

    const page: Array<Array<PageData>> = [
      [
        {
          id: 1,
          name: "张三1",
        },
        {
          id: 2,
          name: "张三2",
        },
        {
          id: 3,
          name: "张三3",
        },
      ],
      [
        {
          id: 4,
          name: "李四1",
        },
        {
          id: 5,
          name: "李四2",
        },
        {
          id: 6,
          name: "李四3",
        },
      ],
    ];
    const multipleSelection = new Set();
    const table = ref()
    function setData(index: number) {
      setTimeout(() => {
        tableData.value = page[index];
        const selectId = Array.from(multipleSelection);
        page[index].forEach((v) => {
          selectId.forEach((val) => {
            if (v.id === val) {
              table.value.toggleRowSelection(v, true);
            }
          });
        });
      }, 10);
    }

    onMounted(() => {
      setData(0);
    });

    function currentChange(row: number) {
      setData(row - 1);
    }

    function select(rows: Array<PageData>, row: PageData) {
      const arr = rows.filter((v) => v.id === row.id);
      if (arr.length === 0) {
        multipleSelection.delete(row.id);
      }
    }

    function selectionChange(val: Array<PageData>) {
      val.forEach((v: PageData) => {
        multipleSelection.add(v.id);
      });
    }

    return {
      tableData,
      currentChange,
      select,
      selectionChange,
      table,
    };
  },
});
</script>

结论

合理利用特性， 非常简单的效果！让我想想明天写个啥（头秃）