iview table选中项显示在上方tag标签并可以取消

news2024/11/24 3:07:33

如图表格多选功能选中项显示在table的上方并且支持跨页,table上方加tag标签

<span
      class="select_tips"
    >
      <Tag
        v-for="item in selection"
        :key="item.id"
        :name="item.id"
        closable
        @on-close="handleClose"
      >
        {{ formatTag(item) }}
      </Tag>
    </span>
    <Table/>

 table内容就不过多展示,handleClose是tag的叉号icon,点击之后会内部回调一下table的on-select-cancel方法所以需要处理一下

handleClose (event, name) {
      let index = -1
      this.selection.forEach((el, idx) => {
        if (name === el.id) {
          index = idx
        }
      })
      this.selection.splice(index, 1) // 存储被删除的元素数组
      let dataIndex = -1
      this.tableData.forEach((el, idx) => {
        if (name === el.id) {
          dataIndex = idx
        }
      })
      if (dataIndex !== -1) {
        this.tableDataFlag = true
        this.$refs.table.toggleSelect(dataIndex)
      }
    },
unselectRow (selection, row) {
      if (this.tableDataFlag) {
//这里是如果点击tag叉号icon就不执行
        this.tableDataFlag = false
        return true
      } else {
        //这里是点击table多选框控制分页实现逻辑
      }
    },

以上能实现如图功能,欢迎指正

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/747385.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python GUI编程利器:Tkinker中的消息对话框(13)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 和猫妹学Python&#xff0c;一起趣味学编程。 今日目标 学习Tkinter中的消息对话框的使用&#xff0c;实现如下效果&#xff1a; 文本消息对话框 可以通过showinfo()创建文…

AtcoderABC258场

A - When? A - When? 题目大意 给定一个整数K&#xff0c;表示从日本标准时间21:00开始经过的分钟数。要求将该时间转换为24小时制的时间&#xff08;HH:MM格式&#xff09;。 思路分析 可直接分时间打印。关于格式&#xff0c;填充0&#xff0c;打印时间&#xff0c;题解…

DP83TG720RWRHARQ1汽车以太网PHY,NTHL020N120SC1 通孔 N-CH 1200V 103A(MOSFET)

DP83TG720RWRHARQ1汽车以太网PHY是一款符合IEEE 802.3bp和Open Alliance标准的汽车以太网物理层收发器。该器件通过屏蔽/屏蔽单双绞线提供传输和接收数据所需的所有物理层功能。该器件支持RGMII与MAC连接。 应用&#xff1a; 远程信息处理控制单元&#xff08;TCU、TBOX&#x…

接口测试 [分享] 自动化测试与持续集成方案--Jmeter 测试接口及性能

目录 前言&#xff1a; 一、什么是接口测试&#xff1f; 二、接口测试的流程 三、编写接口测试脚本 四、接口持续集成 补上性能测试报告&#xff1a; 前言&#xff1a; 接口测试是软件测试中的重要环节&#xff0c;它用于验证系统的不同组件之间的通信和数据传输是否正常…

一起学SF框架系列5.7-模块Beans-BeanDefinition使用

SF如何使用BeanDefinition达成其目标IoC&#xff0c;我们通过跟踪BeanDefinition使用来了解。 使用起点 跟踪SF初始化过程&#xff0c;第一个点在&#xff1a;DefaultListableBeanFactory.preInstantiateSingletons。如下图&#xff1a; RootBeanDefinition是运行时Spring B…

前端白屏检测方案

早期因为浏览器、技术、兼容性等诸多问题&#xff0c;导致网页的显示效果非常的单一&#xff0c;基本都是静态页&#xff0c;后续随着Angular、React、Vue等前端框架的出现&#xff0c;采用SPA单页面应用的方案越来越多。 用户和企业对于页面的稳定性、性能有了更高的诉求&…

openssl为什么从1.1跳跃到3.0,为什么没有2.0版本?

OpenSSL在版本号上从1.1跳跃到3.0是因为在其发展过程中发生了一些特定的情况和变化&#xff0c;导致开发团队做出了这样的决定。以下是一些可能的原因&#xff1a; 历史背景&#xff1a;OpenSSL的版本号体系并不是连续递增的&#xff0c;而是根据项目的发展和变化进行调整。在过…

UFS 15 - UFS RPMB操作

UFS 15 - UFS RPMB操作 1 Request Type Message Delivery&#xff08;请求类型消息传递&#xff09;2 Response Type Message Delivery&#xff08;响应类型消息传递&#xff09;3 Authentication Key Programming3.1 Authentication Key Programming3.2 报文示例3.2.1 Authent…

【工具使用】使用J-link离线下载芯唐MCU固件

一&#xff0c;简介 本文主要介绍如何使用J-link工具&#xff0c;离线下载M483的程序。 二&#xff0c;操作步骤 主要分为以下三个步骤&#xff1a; 1&#xff0c;使用SWD接口连接硬件&#xff1b; 2&#xff0c;配置上位机工程&#xff1b; 3&#xff0c;下载程序到芯片&am…

LiveGBS流媒体平台GB/T28181功能-作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备

LiveGBS作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备 1、背景说明2、部署国标平台2.1、安装使用说明2.2、服务器网络环境2.3、信令服务配置 3、监控摄像头设备接入3.1、海康GB28181接入示例3.2、大华GB28181接入示例3.3、华为IPC GB28181接…

图像处理之比特平面分层和重构

一、比特平面分层 像素是由比特组成的数字。例如在256级灰度图像中&#xff0c;每个像素的灰度是由8比特&#xff08;一个字节&#xff09;组成。如下图所示&#xff0c;一幅8比特图像由8个1比特平面组成&#xff0c;其中平面1包含图像中所有像素的最低阶比特&#xff0c;而平…

Linux开发工具gdb篇

文章目录 &#x1f3bb;0.前言&#x1f3bc;debug版本&#x1f3bc;release版本 &#x1fa95;1. gcc/g的默认版本&#x1f3b8;2. gdb使用&#x1f3b5;进入 & 退出&#x1f3b5;查看代码&#x1f3b5;断点 & 跳断点&#x1f3b5;逐过程 & 逐语句&#x1f3b5;监视…

Spring Boot 核心运行原理介绍

Spring Boot 核心运行原理介绍 引言整体介绍1. 核心运行原理图2. 自动配置的整体流程3. 各核心功能和组件初步介绍 总结 引言 还记得&#xff0c;笔者在前面的博文《Spring Boot 项目介绍》中提到了&#xff0c;Spring Boot 最核心的功能就是自动配置&#xff0c;该功能的实现…

编辑距离算法(Levenshtein Distance Algorithm)的概念理解及其应用

概念&#xff1a; 编辑距离&#xff0c;由俄罗斯科学家Vladimir Levenshtein于1965年提出&#xff0c;因此又称为Levenshtein Distance&#xff0c;简称LD&#xff0c;是指两个字串之间&#xff0c;由一个转成另一个所需的最少编辑操作次数。 可用的编辑操作包括&#xff1a;…

使用docker的常见bug

BUG1&#xff1a;磁盘被占满导致docker无法使用 docker ps 【查看docker能否正常使用】 正常的话会打印下图信息: 不正常的话打印如下图信息&#xff1a; journalctl -u docker 【查看docker无法正常使用的原因】&#xff0c;本次测试中遇到下图bug&#xff0c;意思是/var/l…

短视频抖音seo矩阵源码saas--技术开发部署分享

抖音seo源码开发&#xff0c;抖音矩阵源码&#xff0c;短视频seo源码&#xff0c;短视频矩阵源码技术开发部署&#xff0c;模式采用SaaS形式&#xff0c;用户角色分为&#xff1a;总后台&#xff0c;加盟商&#xff0c;企业用户&#xff0c;角色权限划分清楚&#xff0c;多模式…

简单认识MySQL基础部分

文章目录 一、数据库概述1、简介2、数据库类型和常用数据库1.关系型数据库2.非关系型数据库 3、mysql数据库日志1、作用&#xff1a;2、 mysql与 oracle 日志有所区别3、 Mysql 存储引擎 二、数据库基础操作1、SQL 语句2、实际操作1、DDL&#xff1a;数据定义语言&#xff0c;用…

机器学习技术(五)——特征工程与模型评估

机器学习技术&#xff08;五&#xff09;——特征工程与模型评估(2️⃣) 文章目录 机器学习技术&#xff08;五&#xff09;——特征工程与模型评估(:two:)二、模型评估1、Accuracy score2、Confusion matrix混淆矩阵1、多值2、二值 3、Hamming loss4、Precision, recall and F…

石英灯和石墨加热器结构热试验装置中的低气压控制解决方案

摘要&#xff1a;为解决结构热试验和热真空试验中的低气压真空压力精密控制问题&#xff0c;本文基于动态平衡法和上下游控制模式&#xff0c;提供了相应的解决方案。解决方案中的低气压真空压力控制系统主要是采用电控针阀、电控球阀和双通道真空压力控制器组成上下游两个闭环…

从源码角度看 Golang 的调度

1.简单概念 1.1 调度器的三个抽象概念&#xff1a;G、M、P G&#xff1a;代表一个 goroutine&#xff0c;每个 goroutine 都有自己独立的栈存放当前的运行内存及状态。可以把一个 G 当做一个任务。M: 代表内核线程(Pthread)&#xff0c;它本身就与一个内核线程进行绑定&#…