首页 > 其他分享 >vue table 表格记录选中

vue table 表格记录选中

时间:2024-07-16 20:40:46浏览次数:15  
标签:vue 表格 deselectedRows item 选中 SN snArary table CaneclData

默认全部选中

<el-table :data="tableParams.data"
                            ref="multipleTable"
                            v-loading="loadingTable"
                            @select-all="handleSelectionAll"
                            @select="handleSelectionChange"

//选中记录
let snArary=selection.map(item => item.SN);
                        let deselectedRows = this.tableParams.data.filter(row => !snArary.includes(row.SN)).map(item=>item.SN);
                        this.selectedData=Array.from(new Set([...this.selectedData, ...snArary]));
                        this.selectedData = this.selectedData.filter((item) => {
                            if (deselectedRows.includes(item)) {
                            this.select_nums++; // 重新选中时,选择数量加1
                            return false; // 过滤掉重新选中的数据
                            }
                            return true; // 保留取消选择的数据
                        });

                        this.select_nums=this.selectedData.length;



 //全选判断
                    let snArary=selection.map(item => item.SN);
                    let deselectedRows = this.tableParams.data.filter(row => !snArary.includes(row.SN)).map(item=>item.SN);
                    if (deselectedRows.length>0) {
                            this.CaneclData=Array.from(new Set([...this.CaneclData, ...deselectedRows]));

                    }
                    this.CaneclData = this.CaneclData.filter((item) => {
                            if (snArary.includes(item)) {
                            this.select_nums++; // 重新选中时,选择数量加1
                            return false; // 过滤掉重新选中的数据
                            }
                            return true; // 保留取消选择的数据
                        });

                        this.select_nums = this.total - this.CaneclData.length;

标签:vue,表格,deselectedRows,item,选中,SN,snArary,table,CaneclData
From: https://www.cnblogs.com/mengluo/p/18306071

相关文章

  • springboot+vue前后端分离项目-项目搭建13-树形表
    效果一、后端1.新建表category 2.新建entity,com/example/demo/entity/Category.java3.新建Mapper,com/example/demo/mapper/CategoryMapper.java 4.新建Controller,com/example/demo/controller/CategoryController.java主要代码逻辑如下,封装成List<Category>,前端结合......
  • python+flask计算机毕业设计基于Vue.js的付费阅读小程序(程序+开题+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,数字化阅读已成为现代人获取知识、娱乐休闲的重要方式之一。然而,在海量信息面前,如何有效保护知识产权,激励内容创......
  • Vue3项目配置Vue-Router
            在使用 Vue 作为前端开发框架时,我们通常以单页面应用(SPA)的形式进行开发。而单页面应用中,我们通常通过路由跳转的方式来实现我们页面上组件之间的跳转。在本文中,博主将详细介绍在Vue3 项目中,如何进行Vue-Router的安装与配置。在开始安装和配置Vue-Ro......
  • vue-echarts/echarts结合flex布局,v-show,charts无法自动计算容器大小自适应
    vue-echarts/echarts结合flex布局,v-show,charts无法自动计算容器大小自适应<template><v-chartref="child"class="chart":autoresize="true":option="option"/></template>问题1:首先设置一个非常简单的echarts或v-charts,注意autores......
  • 几个Excel表格可以合并成一个吗?
    有的时候我们需要整理一些同类型的excel,但是发现内容太分散了就需要合并到一起,相信也有朋友说,直接复制粘贴不就好了,但是如果你需要合并很多分excel呢?你知道怎样一次性把几个excel文档进行合并吗?方法一:在线Excel合并想要合并excel文档,其实在线就可以完成,不需要下载软件,简简单单就......
  • 在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
    在现代Web开发中,使用Vue框架构建项目已经成为一种常见的选择。而JeecgBoot作为一个优秀的后台管理系统框架,也提供了丰富的功能和组件,方便开发人员快速搭建企业级应用。本文将介绍如何在JeecgBoot项目中基于Vue3配置多页面入口,实现更灵活的页面管理和定制化需求。前提......
  • Vue3新特性defineOptions和defineModel 面试总结
    在Vue3中,defineOptions和defineModel是两个重要的新特性,它们分别在组件定义和v-model双向绑定方面提供了更为便捷和高效的解决方案。defineOptions定义与用途:defineOptions是Vue3.3+版本中引入的一个宏(macro),用于在<scriptsetup>语法糖中定义组件的选项,如组件名(name)、透传属......
  • vue2 简洁的行政区划选择组件封装
     vue2简洁的行政区划选择组件封装//判断变量是否为null或undefinedexportfunctionisNullOrEmpty(value){ returnvalue===null||value===undefined||value===''}//判断变量是否为null或undefinedexportfunctionisNullOrUndefined(value){ ret......
  • vue3+element-plus+typescript
    1.vue3+ts+elementui-plushttps://blog.csdn.net/qq_41737571/article/details/1390730852.自动调整font-size大小https://blog.csdn.net/qq_41737571/article/details/1401586143.简单小众电商购物项目模板:基于Vue3和Vant4的纯前端开发方案https://web-hls.blog.csdn.......
  • 2024-07-16 记录vue内置组件(ps:内容来自GPT)
    1. Transition和TransitionGroup用途:用于为单个元素或组件提供过渡效果。TransitionGroup则用于列表中的多个元素或组件的过渡效果。特点:Transition:只影响单个元素或组件,不会额外渲染DOM元素。TransitionGroup:渲染一个真实的DOM元素(默认为<span>),可以通过tag属性改变渲染......