vue iview table实现全选

之前我们在文章《iview Table实现跨页勾选记忆功能以及利用ES6的Map数据结构实现根据id进行对象数组的去重》里实现过全选功能,不过那有一个弊端就是需要调接口一次性获取全部的数据,这会造成请求数据响应超时或报错,因为数据量大的话这样体验也不好,于是我们改了一下,因为我们全选后需要传递给后端所有数据,那可以用个特定标识all即可,页面效果如下,当我点击“选择档案”后勾选全选即可实现全选,然后“确定”,最后点击“保存”:
在这里插入图片描述
每次只调一次查询接口,不需要获取全部的数据:
在这里插入图片描述
如上图所示,这里选择档案的弹窗我封装到了公共的组件task-file-table-doc.vue里,其完整代码如下:

<template>
  <div class=

相关推荐

  1. js_表格

    2024-04-08 13:32:04       44 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-08 13:32:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-08 13:32:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-08 13:32:04       82 阅读
  4. Python语言-面向对象

    2024-04-08 13:32:04       91 阅读

热门阅读

  1. 3.9 Python格式化字符串

    2024-04-08 13:32:04       31 阅读
  2. 蓝桥杯练习题 —— 圆的面积(python)

    2024-04-08 13:32:04       35 阅读
  3. abc348 D~F题解

    2024-04-08 13:32:04       39 阅读
  4. wpf Validation.ErrorTemplate

    2024-04-08 13:32:04       33 阅读
  5. 什么是存储服务器?

    2024-04-08 13:32:04       31 阅读
  6. 人机协同会带来基础领域的新的科技革命

    2024-04-08 13:32:04       30 阅读
  7. SpringBoot项目中常用注解总结

    2024-04-08 13:32:04       37 阅读