vue使用elementui 的 table且自定义某列表头时,添加的点击事件和自带的筛选功能有类似冒泡行为

news2024/9/24 11:33:00
  • element 自带的table
    在这里插入图片描述
  • 需求:在时间这一列的筛选按钮旁边添加一个批量修改按钮
  • 问题:如果不加排序这个属性,那么表格自带的筛选和新加的批量筛选点击事件会冲突(冒泡事件)
  • 解决方法:在该列添加sortable属性,然后在给table添加class,用css隐藏(目前我只相处了这一种不太合理的掩盖方式!,如果有知道其他好方法的可以告诉我下谢谢!)
<el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%"
	class="xxx"
	>
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
 </el-table>
 
 // css 使用stylus
.xxx
   >>>.caret-wrapper
        display none

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

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

相关文章

【IDEA】 解决在idea中连接 Mysql8.0,驱动无法下载问题

本篇继【idea】解决sprintboot项目创建遇到的问题2-CSDN博客 目录 一、Failed to download https://download.jetbrains.com/idea/jdbc-drivers/MySQL/8/LICENSE.txt:Remote host terminated the handshake 二、no dirver files provided com.mysql.cj.jdbc.Driver 三、Serv…

[蓝桥杯学习] ST表

RMQ问题 ST 表 用状态 s[i][j] 记录区间长度为 2^j 的长度的区间的最大值 所以状态转移方程就是 st[i][j] max( st[i][j-1] , st[i(1 << (j-1))][j-1] ) 注意状态转移的方向&#xff0c;保证区间合法性&#xff08;i2^j 不能超过数组大小&#xff09; 写完这些后&am…

Linux之Ubuntu环境Jenkins部署前端项目

今天分享Ubuntu环境Jenkins部署前端vue项目 一、插件安装 1、前端项目依赖nodejs&#xff0c;需要安装相关插件 点击插件管理&#xff0c;输入node模糊查询 选择NodeJS安装 安装成功 2、配置nodejs 点击后进入 点击新增 NodeJS 配置脚手架类型&#xff1a;如果不填 默认npm …

软件测试|Linux下Python安装配置指南

在Linux中安装Python是一个简单而且重要的过程&#xff0c;因为Python是一种广泛使用的编程语言&#xff0c;许多系统工具和应用都依赖于它。在本文中&#xff0c;我将详细介绍如何在Linux系统中安装Python。 请注意&#xff0c;在本文中&#xff0c;我将以Centos为例&#xf…

一键了解获取网页requests方式

目录 一、爬虫原理&#xff1a; 二、安装&#xff1a; 测试&#xff1a; 三、文件的操作 方式一 方式二: 方式三 四、认识User-Agent 4.1、为什么用User-Agent&#xff1a; 步骤&#xff1a; 五、请求方式 5.1、get 5.2、post 六、爬出有中国关键字页面案例 一、爬…

【两阶段鲁棒】计及需求响应的多能互补微网两阶段鲁棒优化matlab

目录 1 主要内容 算例模型 目标函数 第一阶段 第二阶段 求解流程图 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《多能互补微网两阶段鲁棒优化调度研究》&#xff0c;在考虑风光不确定集的基础上提出采用计及DR响应的多能互补微网两阶段鲁棒备用调度模…

Android WiFi 连接

Android WiFi 连接 1、设置中WiFi显示2、WiFi 连接流程2.1 获取PrimaryClientModeManager2.2 ClientModeImpl状态机ConnectableState2.3 ISupplicantStaNetworkCallback 回调监听 3、 简要时序图4、原生低层驱动5、关键日志 1、设置中WiFi显示 Android WiFi基础概览 packages/a…

RabbitMQ(九)死信队列

目录 一、简介1.1 定义1.2 何时进入死信队列&#xff1f;1.3 死信消息的变化1.4 死信队列的应用场景1.5 死信消息的生命周期 二、代码实现2.1 死信队列的配置步骤2.2 配置类2.3 配置文件2.4 生产者2.5 业务消费者2.6 死信消费者2.7 测试结果 三、总结 RabbitMQ 是流行的开源消息…

MYSQL InnoDB引擎

逻辑存储结构 架构 内存架构 磁盘结构 后台线程 事务原理 redolog undo log MVCC 基本概念 实现原理 隐藏字段 undo log readview

学习使用layPage, 多功能JS分页组件/插件的方法

学习使用layPage, 多功能JS分页组件/插件的方法 效果图分页代码 效果图 点击查看链接 分页代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>Layui</title><meta name"renderer" content"we…

用队列实现栈oj题——225

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;LeetCode刷题|数据结构|Linux 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 题目要求&#xff1a;实现 MyStack 类&#xff1a;注意&#xff1a;示例&#xff1a;解释&#xff1a;提示&#xff1a; 解题核心数据结构的定义…

通信触发流程

该示例方案主要介绍如何通过建立的Modbus或TCP通信来实现触发方案、协议解析、发送事件和以及响应配置等功能。 需求&#xff1a;使用Modbus通信触发指定流程运行。 搭建思路&#xff1a;在接收事件中使用协议组装&#xff0c;比较规则选择上升沿&#xff0c;当接收到的值从其…

如何成为一名高级UI设计师,UI设计与交互动效进阶教学

一、教程描述 本套教程从基础学习到案例实践教学&#xff0c;涵盖了设计师所需的全部知识和实战技术&#xff0c;比如&#xff0c;品牌形象设计&#xff0c;企业视觉识别系统VIS&#xff0c;标志logo提案设计&#xff0c;banner运营视觉设计&#xff0c;字体搭配使用&#xff…

学习笔记 | Kafka

一、概述 定义 1、Kafka传统定义&#xff1a;Kafka 是一个分布式的基于 发布/订阅模式 的消息队列&#xff08;Message Queue&#xff09; &#xff0c;主要应用与大数据实时处理领域。 2、发布/订阅&#xff1a;消息的发送者不会将消息直接发送给特定的订阅者&#xff0c;而…

企业网盘全方位解读:热门云存储工具的优势与适用场景

企业网盘无疑是当下最热门的企业协同工具。什么是企业网盘&#xff1f;企业网盘与个人网盘又有什么不同呢&#xff1f;一文全方位解读企业网盘这一热门云存储工具。 什么是企业网盘 企业网盘为企业级文件存储、管理与共享平台&#xff0c;企业团队可以在企业网盘中存储企业文…

【python】连上钉钉机器人每日推送

使用Python向钉钉机器人发送消息 导入必要的库 导入json库用于处理JSON数据&#xff0c;time库用于获取当前时间&#xff0c;requests库用于发送HTTP请求。 定义send_ding_message函数 该函数接收一个消息作为参数&#xff0c;并通过POST请求发送给钉钉机器人。请求的URL和头部…

阿里云服务器可用区是什么?

阿里云服务器地域和可用区怎么选择&#xff1f;地域是指云服务器所在物理数据中心的位置&#xff0c;地域选择就近选择&#xff0c;访客距离地域所在城市越近网络延迟越低&#xff0c;速度就越快&#xff1b;可用区是指同一个地域下&#xff0c;网络和电力相互独立的区域&#…

JS加密/解密之常见的JS代码加密

在软件开发领域&#xff0c;混淆&#xff08;JS&#xff09;是一种常见的技术&#xff0c;通过改变代码结构、命名和逻辑&#xff0c;增加代码的复杂性&#xff0c;使其对于逆向工程者变得更加困难。然而&#xff0c;有时候开发者可能需要解开混淆&#xff0c;以便理解、维护或…

jupyter如何更改默认保存路径

jupyter更改默认路径 jupyter默认路径在‘c\用户\Administrator’下&#xff0c;很不方便。 接下来看如何更改默认路径: 1、找到Anaconda Prompt,打开 2、 输入conda activate env1&#xff0c;其中env1为自己创建的环境&#xff0c;如果不知道怎么创建&#xff0c;按照下面…

技术学习周刊第 1 期

2018 年参与过 1 年的 ARTS 打卡&#xff0c;也因为打卡有幸加入了 MegaEase 能与皓哥&#xff08;左耳朵耗子&#xff09;共事。时过境迁&#xff0c;皓哥已经不在了&#xff0c;自己的学习梳理习惯也荒废了一段时间。 2024 年没给自己定具体的目标&#xff0c;只要求自己好好…