el-table分页数据+回显+勾选状态+记录数据(map实战)

简介: el-table分页数据+回显+勾选状态+记录数据(map实战)

原以为js中即便是学到了map可实际上也不会用到map,可我今天就遇到一个el-table分页查询,然后需要勾选表格内容,切换页码后回显勾选项的需求。
一开始想的是,把所有已勾选的数据用list来维护,可稍微一思索就发现这样实际执行起来还是有缺陷的,比如用于来回切换页码等场景稍微一复杂就容易乱套。还是应该记录每一条数据的信息,用户点击勾选的时候,用当前的勾选情况去跟已勾选的数据做一个比对。如果已记录的数据里存在当前列表中的勾选项,同时本次属于勾选状态,则不做处理。如果处于未勾选状态,则从用于记录的总数据中删除该选项。如果总得记录结果没有改数据,同时该数据本次是勾选状态,则把新数据添加进去。
用map是最好的了,于是就实战一下,试试手~

<el-button @click="query"> 获取新数据</el-button>
<el-table
  ref="myTable"
  :data="tableData"
  style="width: 100%"
  @selection-change="handleSelectionChange"
>
  <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  <el-table-column prop="address" label="地址"> </el-table-column>
  <el-table-column type="selection" width="55"> </el-table-column>
</el-table>

选择selection-change ,它会把当前页码的勾选项列出来。
接下来就是它对应的handle函数了,我把处理逻辑用备注的形式写出来

const selectedMap = new Map();
handleSelectionChange(val) {
// val 表示当前勾选项,属于array类型
// 我们首选需要一个list用来记录当前tableData都有哪些备选哪些没有被选上,我这里先用一个map记录当前表格中的备选项
// 然后遍历tableData 把已选项维护到一个list中
  const currSelectMap = new Map();
  for (let i = 0; i < val.length; i++) {
    currSelectMap.set(val[i].name, true);
  }

  const selectList = [];
  this.tableData.forEach((item) => {
    const name = item.name;
    selectList.push({
      name,
      selected: currSelectMap.has(name) ? true : false,
    });
  });
// 遍历selectList,它记录了当前表格中每一项的一个唯一ID(我这里是name是唯一的),以及是否选中两个参数
// 遍历过程中与记录总的被选中的数据做一个比较,代码由本文前面的处理逻辑形成
  selectList.forEach((item) => {
    const name = item.name;
    const selected = item.selected;
    if (selectedMap.has(name) && !selected) {
      selectedMap.delete(name);
    }
    if (!selectedMap.has(name) && item.selected) {
      selectedMap.set(name, item);
    }
  });
  console.log("selectedMap", selectedMap);
},

最后的最后,el-table切换页码时候还需要额外处理一下,

getRowKey(row) {
      return row.name;
    },
    query() {
      // 查询
      this.tableData = [
        {
          date: "2016-05-02",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎6",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎7",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ];

      for (let i = 0; i < this.tableData.length; i++) {
        //如果有的话,添加进去,把参数设置为true
        const name = this.tableData[i].name;
        if (selectedMap.has(name)) {
          this.$nextTick(() => {
            this.$refs.myTable.toggleRowSelection(this.tableData[i], true);
          });
        }
      }
    },

就是切换到新数据时,我们要打勾,但是通过代码打钩的过程会触发handleSelectionChange函数
这样就导致,可能就跟我们期待的差很多了,具体差到哪里,读者朋友可以把this.$nextTick去掉试试。
ps:能看到这篇文章的估计也有遇到类似问题哈哈

相关文章
|
17天前
|
存储 Java API
深入剖析Java Map:不只是存储数据,更是设计艺术的体现!
【10月更文挑战第17天】在Java编程中,Map是一种重要的数据结构,用于存储键值对,并展现了设计艺术的精髓。本文深入剖析了Map的设计原理和使用技巧,包括基本概念、设计艺术(如哈希表与红黑树的空间时间权衡)、以及使用技巧(如选择合适的实现类、避免空指针异常等),帮助读者更好地理解和应用Map。
53 3
|
17天前
|
存储 Java 开发者
Java Map实战:用HashMap和TreeMap轻松解决复杂数据结构问题!
【10月更文挑战第17天】本文深入探讨了Java中HashMap和TreeMap两种Map类型的特性和应用场景。HashMap基于哈希表实现,支持高效的数据操作且允许键值为null;TreeMap基于红黑树实现,支持自然排序或自定义排序,确保元素有序。文章通过具体示例展示了两者的实战应用,帮助开发者根据实际需求选择合适的数据结构,提高开发效率。
48 2
SpringMVC入门到实战------5、域对象共享数据 Request、Session、Application、Model、ModelAndView、Map、ModelMap的详细使用及代码实例
这篇文章详细解释了在IntelliJ IDEA中如何使用Mute Breakpoints功能来快速跳过程序中的后续断点,并展示了如何一键清空所有设置的断点。
SpringMVC入门到实战------5、域对象共享数据 Request、Session、Application、Model、ModelAndView、Map、ModelMap的详细使用及代码实例
域对象共享数据model、modelAndView、map、mapModel、request。从源码角度分析
这篇文章详细解释了在IntelliJ IDEA中如何使用Mute Breakpoints功能来快速跳过程序中的后续断点,并展示了如何一键清空所有设置的断点。
域对象共享数据model、modelAndView、map、mapModel、request。从源码角度分析
|
3月前
|
存储 算法 Java
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
|
3月前
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端,并展示了后端如何使用Map接收这些参数,以及如何避免参数转换错误和统一接口设计的方法。
|
3月前
|
JSON 数据可视化 定位技术
Map——使用BIGEMAP+geojson获取乡镇行政边界数据
Map——使用BIGEMAP+geojson获取乡镇行政边界数据
160 0
|
5月前
|
缓存 安全 算法
Go 中使用 map 实现高效的数据缓存
Go 中使用 map 实现高效的数据缓存
|
5月前
|
存储 缓存 安全
Go 中使用 map 实现高效的数据查找和更新
Go 中使用 map 实现高效的数据查找和更新
|
5月前
|
存储 Java 数据处理
Java Map实战:用HashMap和TreeMap轻松解决复杂数据结构问题!
【6月更文挑战第18天】在Java中,HashMap基于哈希表提供快速的键值对操作,适合无序数据;而TreeMap利用红黑树保证排序,适用于有序场景。示例展示了HashMap如何存储并查找用户信息,以及TreeMap如何按员工编号排序存储员工名。两者在不同需求下优化了数据处理。
151 0