el-table操作栏按钮过多 增加展开/收起功能

news2024/11/24 10:30:48

是的 如图所示有那么一条数据 列表操作栏的按钮七八个 小屏笔记本啥数据项也别看了 就剩下个固定列大刺刺的占着整个页面
在这里插入图片描述
解决方法:

	<el-table-column :width="tableToggle ? 600 : 300" label="操作栏" align="center" header-align="center" fixed="right">
      <template slot-scope="scope">
          <el-button size="mini" type="primary">编辑</el-button>
          <el-button size="mini" type="info">详情</el-button>
        <div v-show="tableToggle" class="table-toggle">
          <el-button size="mini" type="primary">下载</el-button>
          <el-button size="mini" type="warning">上传</el-button>
          <el-button size="mini" type="success">恢复</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </div>
        <el-button size="mini" type="text" @click="tableToggle = !tableToggle">{{ tableToggle ? '收起' : '展开' }}
          <i :class="tableToggle ? 'el-icon-caret-left' : 'el-icon-caret-right'"></i>
        </el-button>
      </template>
    </el-table-column>

data里:

 tableToggle: false,

css样式

<style lang="scss">  
 .table-toggle {
    display: inline-block;
    margin-left: 4px;
  }
  .toggle-btn span{
    font-size: 12px;
  }
</style>

实现效果:
在这里插入图片描述
在这里插入图片描述
这里的动态宽度600 300 需根据实际按钮数量修改
在这里插入图片描述

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

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

相关文章

类和对象,this指针

一、类的引入&#xff1a; 如下&#xff0c;在C中&#xff0c;我们可以在结构体中定义函数&#xff0c;如下&#xff0c;之前我们学习C中中一直是在结构体中定义变量。 struct student{void studentinfo(const char* name,const char* gener,int age){ strcpy(_name,name);st…

前端css面试题(四)

文章目录 对一些 CSS 默认值的考察css选择器说一下z-indexz-index的值大的dom一定能覆盖z-index值小的dom吗如果一个第三方组件的z-index与我们现有业务的页面有冲突&#xff0c;怎么处理关于浮动元素样式引入权重问题链接引入&#xff08;Link&#xff09;和 import注入的区别…

理解输出电压纹波和噪声:来源与抑制

医疗设备、测试测量仪器等很多应用对电源的纹波和噪声极其敏感。理解输出电压纹波和噪声的产生机制以及测量技术是优化改进电路性能的基础。 1&#xff1a;输出电压纹波 以Buck电路为例&#xff0c;由于寄生参数的影响&#xff0c;实际Buck电路的输出电压并非是稳定干净的直流…

【wvp】测试记录

ffmpeg 这是个莫名其妙的报错&#xff0c;通过排查&#xff0c;应该是zlm哪个进程引起的 会议室的性能 网络IO也就20M

【分布式微服务专题】从单体到分布式(二、SpringCloud整合Nacos)

目录 前言阅读对象阅读导航前置知识笔记正文一、下载安装二、项目整合2.1 服务注册与发现2.2 动态配置管理 三、其他实验四、服务之间的调用 学习总结感谢 前言 本篇笔记主要是记录我整合Nacos项目进来的过程。以实现服务注册发现&#xff0c;以及分布式配置管理。关于Nacos&a…

Leetcode刷题笔记题解(C++):LCR 121. 寻找目标值 - 二维数组

思路&#xff1a;从左小角或者右上角开始遍历&#xff0c;假设右上角开始遍历&#xff0c;如果当前值大于目标值则列-1&#xff1b;如果当前值小于目标值则行1&#xff0c;以此遍历来查找目标值&#xff1b;注意col和row的选取 class Solution { public:bool findTargetIn2DPl…

测试文档---消息驿站

文章目录 项目背景测试计划服务器模块设计测试用例进行单元测试/黑盒测试 客户端模块设计测试用例进行单元测试/黑盒测试 转发规则模块设计测试用例进行单元测试/黑盒测试 测试总结 项目背景 在高并发量的情况下&#xff0c;针对某一台服务器的访问量激增就可能导致该服务器“…

关于最长上升子序列的动态规划问题的优化算法(二分搜索)

最长递增子序列 暴力解法&#xff1a; 思路&#xff1a;使用动态规划的思想&#xff0c;判断当前元素之前的所有元素&#xff0c;如果比当前元素小&#xff0c;则修改当前元素的最长递增子序列&#xff08;需判断是否需要修改&#xff09;。 时间复杂度&#xff1a;O(n^2) im…

leetcode做题笔记1466. 重新规划路线

n 座城市&#xff0c;从 0 到 n-1 编号&#xff0c;其间共有 n-1 条路线。因此&#xff0c;要想在两座不同城市之间旅行只有唯一一条路线可供选择&#xff08;路线网形成一颗树&#xff09;。去年&#xff0c;交通运输部决定重新规划路线&#xff0c;以改变交通拥堵的状况。 路…

C#winform根据选择的Excel文件在数据库中创建数据表

C#winform根据选择的Excel文件在数据库中创建数据表 需求&#xff1a;根据选择的Excel文件在数据库中创建数据表&#xff1b;可以实现特殊字段&#xff08;比如字段中含有数字、下划线、特殊字符等&#xff09;以及表名创建 C#实现 using System; using System.Data; using S…

运维05:自动化

人工运维时代 运维人员早期需要维护众多的机器&#xff0c;因此需要执行很多重复的劳动&#xff0c;很多机器需要同时部署相同的服务或者是执行相同的命令&#xff0c;还得反复地登录不同的机器&#xff0c;执行重复的动作 自动化运维时代 早期运维人员会结合ssh免密登录&…

Shell数组函数:数组——数组和循环(二)

for脚本快速定义数组 [rootlocalhost ~]# vim for12.sh #脚本编辑 #!/bin/bash for a in cat /etc/hosts do hosts[o]$a donefor i in ${!hosts[]} do echo "$i : ${hosts[$a]}" done[rootlocalhost ~]# vim for12.sh #执行脚本区别 &#xff1a;for的空格分割…

漏洞复现-某教育视频云平台前台某接口文件上传漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

【每日一题】—— D. Divide and Equalize(Codeforces Round 903 (Div. 3))(数学、数论)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…

代码随想录二刷 | 栈与队列 | 前 k 个高频元素

代码随想录二刷 &#xff5c; 栈与队列 &#xff5c; 前 k 个高频元素 题目描述解题思路 & 代码实现 题目描述 347.前k个高频元素 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nu…

[node] Node.js的Web 模块

[node] Node.js的Web 模块 什么是 Web 服务器&#xff1f;Web的应用架构http使用方式使用 Node 创建 Web 服务器使用 Node 创建 Web 客户端 什么是 Web 服务器&#xff1f; Web服务器一般指网站服务器&#xff0c;是指驻留于因特网上某种类型计算机的程序&#xff0c;Web服务器…

http与apache

目录 1.http相关概念 2.http请求的完整过程 3.访问浏览器背后的原理过程 4.动态页面与静态页面区别 静态页面&#xff1a; 动态页面&#xff1a; 5.http协议版本 6.http请求方法 7.HTTP协议报文格式 8.http响应状态码 1xx&#xff1a;提示信息 2xx&#xff1a;成功…

『TypeScript』深入理解变量声明、函数定义、类与接口及泛型

&#x1f4e3;读完这篇文章里你能收获到 了解TypeScript变量声明与类型注解掌握TypeScript函数与方法的使用掌握TypeScript类与接口的使用掌握TypeScript泛型的应用 文章目录 一、变量声明与类型注解1. 变量声明2. 类型注解3. 类型推断 二、函数与方法定义1. 函数定义2. 方法定…

学习Opencv(蝴蝶书/C++)相关1——4.图形和大型数组类型

文章目录 1. 多维度数组和多通道数组区别2. NAryMatIterator详解2.1 介绍2.2 dispatch和SIMD(OpenCV和numpy)2.2.1 OpenCV的2.2.2 numpy的2.2.3 OpenCV文档搜索2.3 调用指令集对代码进行优化2.4 NAryMatIterator理解2.4.1 plane和连续2.4.2 构造函数和迭代2.5 NAryMatIterato…

Cisco Packet Tracer配置命令——交换机篇

交换机VLAN配置 在简单的网络环境中&#xff0c;当交换机配置完端口后&#xff0c;即可直接应用&#xff0c;但若在复杂或规模较大的网络环境中&#xff0c;一般还要进行VLAN的规划&#xff0c;因此在交换机上还需进行 VLAN 的配置。交换机的VLAN配置工作主要有VLAN的建立与删…