Element-UI实现跨页勾选

更新时间：2026年05月28日 14:35:09 作者：Code不是可乐

本文主要介绍了Element-UI实现跨页勾选,Element 跨页勾选,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

实现思路：使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>

修正后代码

大佬指点过后，我翻了下文档找到了大佬说的这个参数，这个参数只能用在type="selection"的列上，并指明主键id就能跨页勾选了，非常方便~

在el-table 中加入:row-key="getRowKeys"

const getRowKeys = (row: User) => {
  return row.id;
};

在<el-table-column type="selection" width="55" />中加入reserve-selection="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"
    :row-key="getRowKeys"
    ref="tableRef"
  >
    <el-table-column type="selection" width="55" reserve-selection="true" />
    <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 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 getRowKeys = (row: User) => {
  return row.id;
};

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

// 选择数据
const handleSelect = (selection: User[]) => {
  console.log(
    "当前已经选择的数据id列表",
    selection.map((elem) => elem.id)
  );
};

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

到此这篇关于Element-UI实现跨页勾选的文章就介绍到这了,更多相关Element 跨页勾选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js中substring使用示例详解
substring是从中截取一段字符串,在组成一个新的字符串,这篇文章主要介绍了js中substring使用示例小结,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-01-01
bootstrap布局中input输入框右侧图标点击功能
这篇文章主要为大家详细介绍了bootstrap布局中input输入框右侧图标点击功能实现的相关代码，感兴趣的小伙伴们可以参考一下
2016-05-05
前端滚动锚点三个常用方案(点击后页面滚动到指定位置)
这篇文章主要给大家介绍了关于前端滚动锚点的三个常用方案,实现的效果就是点击后页面滚动到指定位置,三种方法分别是scrollIntoView、scrollTo和scrollBy,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-01-01
基于JavaScript的MQTT实时通信应用开发实战记录
MQTT是轻量级发布/订阅协议,专为物联网等低带宽场景设计,支持QoS分级、遗嘱消息等特性,本文通过JavaScript库实现客户端,涵盖连接管理、消息处理及优化方案,适用于实时通信应用开发,本文给大家介绍基于JavaScript的MQTT实时通信应用开发,感兴趣的朋友一起看看吧
2025-09-09
JS数据类型（基本数据类型、引用数据类型）及堆和栈的区别分析
这篇文章主要介绍了JS数据类型（基本数据类型、引用数据类型）及堆和栈的区别,结合实例形式分析了JS基本数据类型、引用数据类型概念、用法,以及堆和栈的区别,需要的朋友可以参考下
2020-03-03
基于jquery实现导航菜单高亮显示（两种方法）
本篇文章是基于jquery实现导航菜单高亮显示，当点击不同导航菜单实现当前点击的菜单是高亮的，有需要的朋友可以关注下本文
2015-08-08
深入了解JavaScript中逻辑赋值运算符的应用
逻辑赋值是对现有数学和二进制逻辑运算符的扩展。我们先复习一下，然后看看把它们结合在一起能得到什么，感兴趣的小伙伴可以跟随小编一起学习一下
2022-11-11
JavaScrip变量声明关键字var、let、const详解
在JavaScript中var、let和const是用于声明变量的关键字,但它们之间存在一些关键的区别,这篇文章主要介绍了JavaScrip变量声明关键字var、let、const的相关资料,需要的朋友可以参考下
2025-04-04
JavaScript原型继承_动力节点Java学院整理
这篇文章主要为大家详细介绍了JavaScript原型继承的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
微信小程序实现多行文字滚动
这篇文章主要为大家详细介绍了微信小程序实现多行文字滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11

Element-UI实现跨页勾选

修正后代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具