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 跨页勾选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

通过url查找a元素应用案例
这篇文章主要介绍了通过url查找a元素的实现思路，解决一些比较实际的问题，感兴趣的朋友可以参考下
2014-04-04
JavaScript简单实现鼠标拖动选择功能
本篇文章主要是对JavaScript简单实现鼠标拖动选择功能的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
js异步加载的三种解决方案
默认情况javascript是同步加载的,javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载,如何解决这个问题呢,接下来将为你详细介绍下异步加载js三种实现方案,感兴趣的你可以参考下哈
2013-03-03
javascript中Date对象的getDay方法使用指南
这篇文章主要介绍了javascript中Date对象的getDay方法使用以及各种优化方案，非常不错的文章，这里推荐给大家。
2014-12-12
js中var、let、const之间的区别
本文主要介绍了js中var、let、const之间的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
微信小程序外卖选购页实现切换分类与数量加减功能案例
这篇文章主要介绍了微信小程序外卖选购页实现切换分类与数量加减功能,结合具体实例形式分析了微信小程序状态记录、判定及数值运算相关操作技巧,需要的朋友可以参考下
2019-01-01
layui 图片上传+表单提交+ Spring MVC的实例
今天小编就为大家分享一篇layui 图片上传+表单提交+ Spring MVC的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
浅谈移动端之js touch事件手势滑动事件
这篇文章主要和大家聊一聊移动端之js touch事件，即手指的滑动事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
js特殊字符过滤的示例代码
本篇文章主要是对js特殊字符过滤的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
JS生成不重复的随机数组的简单实例
下面小编就为大家带来一篇JS生成不重复的随机数组的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07

Element-UI实现跨页勾选

修正后代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具