ag-gride-vue 数据的多选

2023-11-20

1 data

  checkAll: false,
  selectedRowIds: [],
  isIndeterminate: false,

2 methods

 

changeSelectedRow(flag, id) {
      flag
        ? this.selectedRowIds.push(id)
        : this.selectedRowIds.splice(
            this.selectedRowIds.findIndex(item => item === id),
            1
          );
      const checkedCount = this.selectedRowIds.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
    },
changeAll(val) {
  this.checkAll = val;
  this.selectedRowIds = val ? this.tableData.map(item => item.recId) : [];
  this.isIndeterminate = false;
}

1.  列头+列身

{
          prop: "checkbox",
          width: 50,
          minWidth: 50,
          maxWidth: 50,
          render: (h, { row }) => {
            return (
              <el-checkbox
                value={this.selectedRowIds.includes(row.recId)}
                onChange={val => {
                  this.changeSelectedRow(val, row.recId);
                }}
              ></el-checkbox>
            );
          },
          renderHeader: () => {
            return (
              <el-checkbox
                indeterminate={this.isIndeterminate}
                value={this.checkAll}
                onChange={val => {
                  this.changeAll(val);
                }}
              ></el-checkbox>
            );
          }
        }

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ag-gride-vue 数据的多选 的相关文章

随机推荐

  • day04-编程题

    知识点 数组 题目1 训练 请创建一个长度为6的整数数组 并为数组中的元素赋值 遍历数组 打印所有元素 元素之间用空格隔开 比如 数组为 1 2 3 4 5 打印结果 1 2 3 4 5 训练提示 1 数组中的元素有索引 开始索引和结束索引
  • 字节福利又刷屏了,难怪大家都说“字节三个月,人间抵一年”

    谈到大厂 内推问题无疑是绕不开的一个话题 就算没去大厂实习过 大多数同学印象中的大厂也应该是工资高 给钱痛快 福利待遇好吧 关于大厂我们最常见的进入方式想必就是内推了吧 不知道你馋了没有 如果没有 一起来欣赏下大厂的薪资和福利待遇吧 那么具
  • 002 数据结构_顺序表的实现过程——“C”

    引入 什么是顺序表 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构 一般情况下采用数组存储 在数组上完成数据的增删查改 顺序表一般可以分为 静态顺序表 使用定长数组存储元素 动态顺序表 使用动态开辟的数组存储 什么是mall
  • 实验四、shell编程

    一 实验目的 1 了解shell的特点和主要种类 2 掌握 shel1 脚本的建立和执行方式 3 掌握bash的基本语法 4 学会编写shell 脚本 二 实验内容 shell 脚本的建立和执行 历史命令和别名定义 shell变量和位置参数
  • python到底值不值得学,自学两年,有话说!!

    首先说说笔者自己 笔者从小就对计算机有浓厚的兴趣 无奈家里穷 买不起 考大学的时候又阴差阳错的进了文科专业 高大上的工商管理专业 第一台计算机 还是大二的时候花了600买的二手货 海尔品牌机 赛扬466cpu 那时候主流的cpu奔腾500
  • 已经设置了端口映射但是外网还是访问不了服务器

    来自于 http www tp link com cn pages article detail asp result faq d 31 已经设置了端口映射但是外网还是访问不了服务器 1 首先检查您设置的端口影射是否正确映射到您内网的服务器
  • Redis热点数据处理

    1 概念 热点数据就是访问量特别大的数据 2 热点数据引起的问题 流量集中 达到物理网卡上限 请求过多 缓存分片服务被打垮 redis作为一个单线程的结构 所有的请求到来后都会去排队 当请求量远大于自身处理能力时 后面的请求会陷入等待 超时
  • The style on this component requires your app theme to be Theme.MaterialComponents

    MD版本采用如下 implementation com google android material material 1 2 0 alpha01 再采用MD的Dialog的时候报标题错误 后经分析查找 当前版本强制APP主题为Mater
  • FreeRTOSConfig.h 配置优化及深入

    本篇目标 基于上一篇的移植freertos stm32f4 freertos 上 修改 FreeRTOSConfig h 文件的相关配置来优化辅助 FreeRtos 的使用 并且建立一些基本功能 信号量 消息地列等 的简单应用位于 stm3
  • 如何才能避免辛苦开发出来的产品惨遭市场冷遇?

    精益创新与传统创新模式的主要区别 1 传统的火箭发射式创新 认为用户需求和解决方案都是可以预知的 且可以准确把握的 直到产品成型的那一刻才面向用户 2 精益创新 认为用户痛点和解决方案在本质上都是未知的 无法完美预测的 需要通过不断地验证与
  • 双系统删除Ubuntu后出现grub界面而无法正常启动Windows系统的解决方法

    第一次安装双系统的时候由于不怎么会弄 设置了ubuntu引导windows 这种方法是非常不推荐的 因为当ubuntu出现问题或者是当你不再使用ubuntu的时候 删除ubuntu就会成为一个很麻烦的问题 本人也遇到了这样的问题 然后直接删
  • vscode网页版code-server搭建和使用

    主力编辑器是vscode 手上正好也有台闲置的服务器 如果把vscode搞到浏览器中 那么在一些没有vscode的设备上也可以愉快的敲代码了 code server它可以让有浏览器的设备访问服务器上运行的vscode 这篇文章记录下code
  • [keil5] 中有关“TOOLS.INI-Section ‘[C51]‘ : missing ‘PATH‘ enty “错误

    在安装vdmagdi后 打开keil5 uVision5出现 gt gt gt TOOLS INI Section C51 missing PATH enty lt lt lt 错误 原因如下 双击运行vdmagdi exe文件 选择了AG
  • java static关键字的作用是什么_java中的static关键字

    一 static代表着什么 在Java中并不存在全局变量的概念 但是我们可以通过static来实现一个 伪全局 的概念 在Java中static表示 全局 或者 静态 的意思 用来修饰成员变量和成员方法 当然也可以修饰代码块 Java把内存
  • Qt在线帮助文档网址以及安装包下载地址

    Qt在线帮助文档网址 https doc qt io qt 5 classes html Qt安装包下载地址 http download qt io new archive qt http download qt io archive qt
  • 解决Django运行报错:Couldn't import Django. Are you sure it's installed and available on your environment**

    今天在创建一个Django项目的时候 使用命令行 进入项目目录运行 python manage py runserver 然后报错 ImportError Couldn t import Django Are you sure it s i
  • CMake输出编译时间信息

    使用CMake进行编译的代码 有时候会希望获得当前代码编译的时间信息 使用CMake提供的函数和宏等功能可以实现这个功能 下面是实现这个功能的一段代码 原文链接 CMake输出编译时间信息
  • 软件开发-专业英语(主Qt-help)

    QIODevice Class 的一段描述 Certain subclasses of QIODevice such as QTcpSocket and QProcess are asynchronous This means that I
  • 用微信开发者工具--打开小程序组件vant Weapp示例

    浏览器搜索 https github com youzan vant weapp 1 下载Vant Weapp组件 2 打开微信开发者工具 把vant weapp example目录添加进去 3 把dist目录复制到example目录下 在
  • ag-gride-vue 数据的多选

    1 data checkAll false selectedRowIds isIndeterminate false 2 methods changeSelectedRow flag id flag this selectedRowIds