el-table嵌套两层el-dropdown-menu导致样式错乱

问题:

解决方式:

<el-table-column label="操作" fixed="right" width="132" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row._index != '合计'">
                <el-dropdown trigger="click" type="primary" style="margin-top:0px;">
                    <div class="el-dropdown-link btn2-icon btn-small-round btn2-bg-blue" type="primary">在线预览<i class="btnicon-more"></i></div>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item @click.native="onlineView(scope.row,'KHXX')">客户信息表</el-dropdown-item> -->
                        <el-dropdown-item @click.native="onlineView(scope.row,'SPDC')">审批调查表</el-dropdown-item>
                        <el-dropdown-item @click.native="onlineView(scope.row,'DCBG')">调查报告</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" type="primary" style="margin-top:0px;">
                    <div class="el-dropdown-link btn2-icon btn-small-round btn2-bg-blue" type="primary">下载<i class="btnicon-more"></i></div>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item @click.native="downloadFile(scope.row,'KHXX')">客户信息表</el-dropdown-item> -->
                        <el-dropdown-item @click.native="downloadFile(scope.row,'SPDC')">审批调查表</el-dropdown-item>
                        <el-dropdown-item @click.native="downloadFile(scope.row,'DCBG')">调查报告</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
          </template>
        </el-table-column>

给菜单单独添加样式进行修改

<style scoped>
  .btn2-icon i{
      display:inline-block; 
      vertical-align:top; 
      margin:2px 2px 0 0; 
      width:20px; 
      height:20px; 
  }
  .btn2-icon i.btnicon-more{
      background:url(/static/img/feature/public/btn-icon-more.png) no-repeat center; 
      background-size:20px;
  }
  .btn2-bg-blue, .btn-bg-blue:hover {
      width: 100px;
      margin-top: 4px;
      background-color: #62a8ea;
      color: #fff;
  }
  </style>

最后效果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

超高难度的开关电源PCB设计

开关电源PCB设计 TD芯片的简单吐槽 先介绍下要设计所用的芯片是TD1837和TD1660。   首先先说下一个小的注意事项&#xff0c;一般在设计芯片引脚的布置的时候SW引脚要离FB引脚越远越好。 这里举个TD的反面例子&#xff1a; 图1 引脚示意图 这里吐槽下芯片行业一个不好的点&…

Mac下载Navicat premium提示文件损坏的解决方案

引用&#xff1a;https://blog.csdn.net/weixin_44898291/article/details/120879508 sudo xattr -r -d com.apple.quarantine

使用Cloudreve快速搭建一个私有网盘,配置存储策略和管理权限以及Webdav设置访问

Cloudreve 是什么&#xff1f; Cloudreve 可以让您快速搭建起公私兼备的网盘系统。Cloudreve 在底层支持不同的云存储平台&#xff0c;用户在实际使用时无须关心物理存储方式。你可以使用 Cloudreve 搭建个人用网盘、文件分享系统&#xff0c;亦或是针对大小团体的公有云系统。…

YOLOv8原理与源码解析

课程链接&#xff1a;https://edu.csdn.net/course/detail/39251 【为什么要学习这门课】 Linux创始人Linus Torvalds有一句名言&#xff1a;Talk is cheap. Show me the code. 冗谈不够&#xff0c;放码过来&#xff01;代码阅读是从基础到提高的必由之路。 YOLOv8 基于先前…

kafka简单介绍和代码示例

“这是一篇理论文章&#xff0c;给大家讲一讲kafka” 简介 在大数据领域开发者常常会听到MQ这个术语&#xff0c;该术语便是消息队列的意思&#xff0c; Kafka是分布式的发布—订阅消息系统。它最初由LinkedIn(领英)公司发布&#xff0c;使用Scala语言编写&#xff0c;与2010年…

设计模式-简单工厂

设计模式-简单工厂 简单工厂模式是一个集中管理对象创建&#xff0c;并根据条件生成所需类型对象的设计模式&#xff0c;有助于提高代码的复用性和维护性&#xff0c;但可能会导致工厂类过于复杂且违反开闭原则。 抽象提取理论&#xff1a; 封装对象创建过程解耦客户端与产品…

Kubernetes网络模型概述

Kubernetes网络模型设计的一个基础原则是&#xff1a;每个Pod都拥有一个独立的IP地址&#xff0c;并假定所有Pod都在一个可以直接连通的、扁平的网络空间中。所以不管这些Pod是否运行在同一个Node中&#xff0c;都要求它们可以直接通过对方的IP进行访问。由于Kubernetes的网络模…

基于Docker的Nginx的安装与配置

基于Docker的Nginx的安装与配置 1 为Nginx创建一个容器1.1 学习docker run1.2 通过docker run为Nginx创建并启动一个容器 2 配置Nginx2.1 学习docker的bind mount技术2.2 在Nginx容器中找到想修改的文件所在的目录2.2.1 认识nginx.conf文件2.2.2 访问Nginx服务&#xff0c;默认…

Adobe Acrobat Reader - 老牌PDF编辑器

【应用名称】&#xff1a;Adobe Acrobat Reader - 老牌PDF编辑器 【适用平台】&#xff1a;#Android 【软件标签】&#xff1a;#Adobe 【应用版本】&#xff1a;24.1.0 【应用大小】&#xff1a;482MB 【软件说明】&#xff1a;软件升级更新。用户将有权在手机、平板电脑…

cesium内部相同坐标在不同高度的2个点的属性机制坐标会gltf模型角度值异常问题mars3d的处理办法

模型一直向上运动的正常效果&#xff1a; 问题场景&#xff1a; 1.new mars3d.graphic.ModelPrimitive({使用addDynamicPosition(设置并添加动画轨迹位置&#xff0c;按“指定时间”运动到达“指定位置”时发现&#xff0c;如果是同一个点位不同高度值的y轴竖直向上方向的运动…

yolov8实战第六天——yolov8 TensorRT C++ 部署——(踩坑,平坑,保姆教程)

C 结合 TensorRT 部署深度学习模型有几个关键优势&#xff0c;这些优势在各种工业和商业应用中极其重要&#xff1a; 高效的性能&#xff1a;TensorRT 通过优化深度学习模型来提高推理速度&#xff0c;减少延迟。这对于实时处理应用&#xff08;如视频分析、机器人导航等&#…

老旧小区智慧用电改造方案

【摘要】&#xff1a; 老旧居民小区火灾事故远高于其他场所&#xff0c;而且易造成人员伤亡&#xff0c;随着居民生活水平提高&#xff0c;不断添加各种电气设备&#xff0c;火灾风险逐步加大&#xff0c;智慧用电安全监管平台能够准确全天候地监测线路中的漏电、电流、温度等变…

如何让工业机器视觉呈现更清晰的图像?

清晰度是机器视觉的关键要素&#xff0c;它直接影响后续图像处理和分析的准确性。为了获取更清晰的图像&#xff0c;可以从以下几个方面着手&#xff1a; 1.优化相机设置&#xff1a;曝光时间和增益等参数的调整对图像清晰度有显著影响。通过精确控制这些参数&#xff0c;可以…

【Python】模块

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…

STC8H8K蓝牙智能巡线小车——1. 环境搭建(基于RTX51操作系统)

1. 基本介绍 开发环境准备&#xff1a;Keil uVision5 烧录软件&#xff1a;STC-ISP&#xff08;V6.92A&#xff09; 芯片&#xff1a; STC8H8K64U-45I-LQFP64 芯片引脚&#xff1a; 2.创建项目 打开Keil&#xff0c;点击【Project】&#xff0c;选择【new uVersion proje…

React入门 - 07(说一说 JSX 中的语法细节)

本章内容 目录 1、js 表达式2、列表渲染3、条件渲染4、className5、jsx 中的样式处理6、dangeouslySetInnerHTML7、htmlFor8、使用 jsx 的注意事项 上一节内容我们完成了一个简单的TodoList案例。到现在为止我们已经知道怎么在 JSX中使用 “js 表达式”和”列表渲染“了&#…

跟随chatgpt学习如何使用GLSL进行简单的图形渲染

1. 准备一个HTML文件&#xff1a;创建一个新的HTML文件&#xff0c;将 HTML 文件命名为 index.html&#xff0c;并添加一个用于显示图形的<canvas>元素。 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>Simple We…

基于springboot的美食分享平台(程序+数据库+文档)

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目 希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一、研究背景 1.1 课题背景 二…

合适的索引顺序

一.前言 正确的顺序依赖于使用索引的查询,并且同时需要考虑如何更好地满足排序和分组的需要。因为哈希或者其他类型的索引并不会像 B-Tree索引一样顺序存储数据,所以这里只针对B-Tree展开讨论。 二.合适的索引顺序 1. 概念 对于如何选择索引顺序有一个经验法则: 将选择性最…

【驱动】TI AM437x(内核调试-06):网卡(PHY和MAC)、七层OSI

1、网络基础知识 1.1 七层OSI 第一层:物理层。 1)需求: 两个电脑之间如何进行通信? 具体就是一台发比特流,另一台能够收到。于是就有了物理层:主要是定义设备标准,如网线的额接口类型、管线的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流,就是从1/0…