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

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

	<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.mzph.cn/news/206469.shtml

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

相关文章

idea安装包下载

idea安装教程 IDEA安装包链接&#xff1a;https://pan.baidu.com/s/15dEPF2hV3WPiFWMwGOsKWQ 提取码&#xff1a;kxl7 有激活部署的文档说明&#xff0c;下载自己看吧&#xff0c; 链接&#xff1a;https://pan.baidu.com/s/11yh8cz0R86Ngl7EJN8_5FA 提取码&#xff1a;mdg6

Redis 消息队列

本篇概要&#xff1a; 1. 消息队列作用、list类型实现最简单的队列&#xff1b;2. list消息队列&#xff1a;消费者出现异常时的补救方案&#xff1b; 1. 消息队列作用、list类型实现最简单的队列&#xff1b; 提高响应速度、解耦、稳定性&#xff08;故障处理&#xff09;、可…

苍穹外卖+git开源

搁置了很久重新开始学 为了学习方便&#xff0c;苍穹外卖的前后端代码已放至git开源。 源代码-->sky-take-out: 苍穹外卖 git学习-->Git基础使用-CSDN博客 后端接口员工管理和分类管理模块 添加员工表单分析&#xff0c;添加的表单账号、手机号、身份证都是码…

InterLM代码解析

interLM的Transformer架构&#xff0c;重要模块的实现解析 Decoder架构 class InternLMDecoderLayer(nn.Module):def __init__(self, config: InternLMXComposerConfig):super().__init__()self.hidden_size config.hidden_sizeif hasattr(config,intern_converted_llm) and c…

vuepress路径问题,导致图片不显示

图片不显示&#xff0c;报 Uncaught SyntaxError: Unexpected token <错误 很可能就是&#xff1a;路径配置原因 1.当设置为 / 时&#xff0c;VuePress 会假设你的站点将部署到服务器的根路径&#xff0c; 例如 https://yourdomain.com/。 2.生成的页面链接和资源引用将以…

MacBook 逆水寒下载安装使用教程,支持最新版本 MacOS 流畅不闪退

最近 MacBook 系统更新到了 MacOS 14.1 很多朋友的逆水寒玩不了了&#xff0c;我尝试了一番可以正常玩了&#xff0c;看图&#xff1a; 其实操作也很简单&#xff0c;我们从头开始&#xff0c;因为 MacOS 系统的更新所以我们也需要更新新版本的 playCover 来适配新的系统&#…

在前端开发中,什么是SEO(Search Engine Optimization)?如何优化网站的SEO?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

韩墨耘——当代大风堂门人代表人物

韩墨耘 中央美术学院客座教授 全国书画艺术委员会副主席 中国书画家协会理事 荣宝斋签约画家 张大千大风堂国展班主任导师 国画大师何海霞亲传弟子 韩墨耘&#xff1a;62年生于洛阳&#xff1b;著名画家、美术教育家、书法家&#xff0c;现居北京。出身书香门第&#xf…

外贸网站建站的注意事项?海洋建站的流程?

外贸网站建站需要注意什么&#xff1f;网站建设要注意哪些问题&#xff1f; 在建设外贸网站时&#xff0c;有一些关键的注意事项需要牢记&#xff0c;以确保网站的成功运营。海洋建站将介绍一些重要的外贸网站建站注意事项&#xff0c;帮助企业避免一些常见的陷阱和错误。 外…

【Java用法】Lombok中@SneakyThrows注解的使用方法和作用

Lombok中SneakyThrows注解的使用方法和作用 一、SneakyThrows的作用二、SneakyThrows注解原理 一、SneakyThrows的作用 普通Exception类,也就是我们常说的受检异常或者Checked Exception会强制要求抛出它的方法声明throws&#xff0c;调用者必须显示的去处理这个异常。设计的目…

力扣541.反转字符串 II

文章目录 力扣541.反转字符串 II示例代码实现总结收获 力扣541.反转字符串 II 示例 代码实现 class Solution {public String reverseStr(String s, int k) {char[] ans s.toCharArray();for(int i0;i<ans.length;i2*k){int begin i;int end Math.min(ans.length-1,begin…

理解chatGPT的Function calling

"Function calling" 是一个开发术语&#xff0c;指的是调用函数或方法来执行特定任务。在chatGPT中&#xff0c;"Function calling" 指的是我们可以通过发送特定的指令或命令来触发一些功能&#xff0c;让chatGPT执行一些预定义的任务。 chatGPT的工作方式…

【数据结构】链表算法总结

知识概览 链表包括单链表和双链表&#xff0c;这里讨论算法题中的链表。为了考虑算法题中对于时间效率的要求&#xff0c;链表通常是用数组模拟成静态链表的形式&#xff0c;速度快。单链表可以用来写邻接表&#xff08;包括n个链表&#xff09;&#xff0c;邻接表可以存储树和…

数据结构的基本操作

对于任何数据结构&#xff0c;基本操作就是 遍历访问&#xff08;增删改查&#xff09; 各种数据结构的遍历和访问两种形式&#xff1a;线性的和非线性的 一、线性形式 以 for/while 迭代为代表 数组遍历框架&#xff0c;是典型的线性迭代结构 void traverse(int[] arr){f…

走向未来能源之巅:可控核聚变的探索与挑战

走向未来能源之巅:可控核聚变的探索与挑战 引言 随着人类文明的进步和科技的发展,对能源的需求与日俱增。传统的化石燃料能源面临着枯竭和环境问题的双重压力,因此,寻找一种清洁、可持续、高效的能源成为了全球科学家的共同使命。在这个过程中,可控核聚变作为一种具有巨…

在Go中使用循环时使用Break和Continue语句

引言 在Go中使用for循环可以让你以一种高效的方式自动化和重复任务。 学习如何控制循环的操作和流程,可以在程序中自定义逻辑。你可以使用break和continue语句来控制循环。 break语句 在Go中,break语句终止当前循环的执行。break几乎总是与一个[条件if语句]配对。 让我们…

【无线网络技术】——无线局域网(学习笔记)

&#x1f4d6; 前言&#xff1a;本章首先介绍无线局域网的基本概念&#xff0c;然后详细介绍IEEE 802.11的基本工作原理&#xff0c;侧重于媒体访问控制和一跳范围内的通信技术。 目录 &#x1f552; 1. 概述&#x1f558; 1.1 覆盖范围&#x1f558; 1.2 特点&#x1f558; 1.…

【python爬虫】设计自己的爬虫 3. 文件数据保存封装

考虑到爬取的多媒体文件要保存到本地&#xff0c;因此封装了一个类来专门处理这样的问题&#xff0c;下面看代码&#xff1a; class FileStore:def __init__(self, file_path, read_file_moder,write_file_modewb):"""初始化 FileStore 实例Parameters:- file_…

如何将微服务注册到nacos服务上

首先可在maven的父工程的pom文件中添加maven的dependencyManagement标签&#xff0c;引入spring-cloud-alibaba-dependencies坐标 <properties><spring.cloud.alibaba.version>2.2.9.RELEASE</spring.cloud.alibaba.version></properties><!-- 管理…

关于近期互联网、大模型、Web3、大A的一点思考

写在2023-12-08 如果说硬件还存在着摩尔定律限制着&#xff0c;在14纳米以内&#xff0c;他们都不得不等着华为&#xff0c; 在软件领域&#xff0c;不管是传统的工业软件&#xff0c;还是当前的大模型&#xff0c;都不受制于摩尔定律&#xff0c; 换句话说&#xff0c;从星火…