Elment UI的el-table-column表头旁边有点击按钮类似的操作

Elment UI的el-table-column表头旁边有点击按钮类似的操作

   <el-table-column fixed="right" label="操作" >
       <!-- 表头 -->
{{--            <template slot="header" header="scope">--}}
{{--                <span>{{ "信息:" + subBureau }}&nbsp;&nbsp;</span>--}}
{{--                <span @click="selectBtn">选择</span>--}}
{{--            </template>--}}
         <template slot="header" header="scope">
           <span>{{ "操作" }}&nbsp;&nbsp;</span>
           <span><el-button @click="addRowList()" type="warning" size="small">增加</el-button></span>
       </template>
       <template slot-scope="scope">
           <el-button @click="deleteRowList(scope.row,1)" type="warning" size="small">删除</el-button>
       </template>
   </el-table-column>
   deleteRowList(){
     console.log('del')
   },
   addRowList(){
     console.log('add')
   },

在这里插入图片描述


在这里插入图片描述
在这里插入图片描述

   <el-table-column label="操作" :render-header="renderHeader" width="150">
       <template scope="scope">
           <el-button type="warning" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
           <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(scope.$index, scope.row)" circle></el-button>
       </template>
   </el-table-column>
     // 表头操作栏按钮
    renderHeader(h, params) {
         let a =  [
             h('el-button-group',[
                 // 文字提示
                 h('el-tooltip',{
                     props: {
                         disabled: false,
                         content: "增加测试用例",
                         placement: "bottom",
                         effect: "light"

                     },
                 },
                 [
                     // 增加按钮
                     h('el-button', {
                         props: {
                             size: "mini",
                             type: "primary",
                             icon: "el-icon-add-location"
                         },
                         on: {
                             click: () => {
                                 this.renderAddRow();
                             }
                         }
                     })
                 ]),
                 
                 h('el-tooltip',{
                     props: {
                         disabled: false,
                         content: "全局变量",
                         placement: "bottom",
                         effect: "light"                                
                     }
                 },
                 [
                     // 全局变量按钮
                     h('el-button', {
                         props: {
                             size: "mini",
                             type: "primary",
                             icon: "el-icon-share"
                         },
                         on: {
                             click: () => {
                                 this.renderAddRow();
                             }
                         }
                     }),
                 ]),
                 h('el-tooltip',{
                     props: {
                         disabled: false,
                         content: "系统函数",
                         placement: "bottom",
                         effect: "light"                                
                     }
                 },
                 [
                     // 系统函数按钮
                     h('el-button', {
                         props: {
                             size: "mini",
                             type: "primary",
                             icon: "el-icon-share"
                         },
                         on: {
                             click: () => {
                                 this.renderAddRow();
                             }
                         }
                     }),
                 ]),
             ])
         ]
         return h('div', a);
     },

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

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

相关文章

3.jmeter接口关联及实战

1.当所传参数包含键值对和json文件时&#xff0c;键值对放在链接后&#xff0c;参数放在消息体数据中 2.当查看结果树返回乱码时&#xff0c;修改请求中内容编码为utf-8 一、jmeter接口关联 1.正则表达式提取器 接口2.3传递的参数中需要用到接口1的返回值 禁用接口2.3&#…

Kafka(二)原理详解

一 、kafka核心总控制器&#xff08;Controller&#xff09; 在Kafka集群中会有一个或者多个broker&#xff0c;其中有一个broker会被选举为控制器&#xff08;Kafka Controller&#xff09;&#xff0c;它负责管理整个集群中所有分区和副本的状态。 作用&#xff1a;leader副…

Jupyter Notebook安装使用教程

Jupyter Notebook 是一个基于网页的交互式计算环境&#xff0c;允许你创建和共享包含代码、文本说明、图表和可视化结果的文档。它支持多种编程语言&#xff0c;包括 Python、R、Julia 等。其应用场景非常广泛&#xff0c;特别适用于数据科学、机器学习和教育领域。它可以用于数…

动态SQL:MyBatis强大的特性之一

一般来说&#xff0c;一个程序的服务器可以部署多个&#xff0c;但是数据库却只能有一个。这么多服务器&#xff0c;如果每天都要给数据库海量的操作数据&#xff0c;数据库的压力就会非常大。 所以为了减轻数据库的压力&#xff0c;我们可以把一些查询数据库的语句简化&#…

Vulnhub靶机:FunBox 5

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;FunBox 5&#xff08;10.0.2.30&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/funb…

服务器的组成

服务器的重要结构组成 家用电脑组成&#xff1a; CPU、主板、内存条、显卡、硬盘、电源、风扇、网卡、显示器、机箱、键盘鼠标等等。 CPU CPU是电脑的大脑&#xff0c; CPU发展史&#xff1a; 32 位CPU&#xff1a;最大的内存寻址地址2^32&#xff0c;大约4G的大小。 CP…

TA百人计划学习笔记 3.1.2深度测试

资料 源视频 【技术美术百人计划】图形 3.1 深度与模板测试 传送门效果示例_哔哩哔哩_bilibili ppt 3100-模板测试与深度测试(1) 参考 Unity Shader: 理解Stencil buffer并将它用于一些实战案例&#xff08;描边&#xff0c;多边形填充&#xff0c;反射区域限定&#xff0c;阴影…

[ACM学习] 树形dp之换根

算法概述 总的来说&#xff1a; 题目描述&#xff1a;一棵树求哪一个节点为根时&#xff0c;XXX最大或最小 分为两步&#xff1a;1. 树形dp 2. 第二次dfs 问题引入 如果暴力就是 O(n^2) &#xff0c; 当从1到2的时候&#xff0c;2及其子树所有的深度都减一&#xff0c;其它…

UI自动化Selenium BeautifulReport报告中展示用例描述

BeautifulReport安装并运行后&#xff0c;发现用例描述为空NULL&#xff1b;怎么定义每个Testcase的用例描述并展示在报告中呢&#xff1f; 其实很简单&#xff1a; 只需要在每个测试方法第一行加上注释内容 即可&#xff1b; 当然也可以通过ddt 方式 在Excel中定义好用例描述…

sprignboot电商书城源码

运行环境: jdk1.8,maven,mysql 项目技术: 后台主要是springbootmybatisshirojsp&#xff0c;前端界面主要使用bootstrap框架搭建&#xff0c;并使用了ueditor富文本编辑器、highcharts图表库。 有需要的可以联系我。 功能介绍&#xff1a; 该系统分为前台展示和后台管理两…

【数据结构】 链队列的基本操作 (C语言版)

目录 一、链队列 1、链栈的定义&#xff1a; 2、链栈的优缺点&#xff1a; 二、链队列的基本操作算法&#xff08;C语言&#xff09; 1、宏定义 2、创建结构体 3、链栈的初始化 4、链队列的入队 5、链队列的出队 6、取链队列的对头元素 7、链队列的销毁 8、链…

Minio 判断对象是否存在

引 Minio数据模型 中描述了 MinIO 中什么是桶&#xff0c;什么是对象&#xff0c;也给出了操作桶和操作对象的API。 在 MinIO 中&#xff0c; 对象 中间前缀 对象名称 。如何判定对象是否存在呢&#xff1f; 分析 在 MinIO 中并没有提供判断对象是否存在的操作&#xff…

leetcode:排序链表(递归)

题目&#xff1a; 给定链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5]示例…

【原创】linux为什么不是实时操作系统

文章目录 一、什么是实时操作系统&#xff08;RTOS&#xff09;&#xff1f;二、linux为什么不是实时操作系统&#xff1f;中断响应时间中断处理时间任务调度时间1、No Forced Preemption(Server)2、Voluntary Kernel Preemption(Desktop)3、Preemptible Kernel(Low-Latency De…

yarn集群HDFS datanode无法启动问题排查

一、问题场景 hdfs无法访问&#xff0c;通过jps命令查看进程&#xff0c;发现namenode启动成功&#xff0c;但是所有datanode都没有启动&#xff0c;重启集群&#xff08;start-dfs.sh&#xff09;后仍然一样 二、原因分析 先看下启动的日志有无报错。打开Hadoop的日志目录 …

Java实现考研专业课程管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

系统登录的时候的密码如何做到以加密的形式进行登录【java.security包下的api】工具类。

/** description: 将普通的publicKey转化得到一个RSAPublicKey* author: zkw* date: 2024/1/24 16:17* param: publicKey 普通的publicKey* return: RSAPublicKey 得到一个新的RSAPublicKey**/public static RSAPublicKey getPublicKey(String publicKey) throws NoSuchAlgorit…

【进阶之路】如何提升 Java 编程内力?

如何提升 Java 编程内力&#xff1f; 可能很多初学者在学完 SpringBoot 之后&#xff0c;做了 1-2 个项目之后&#xff0c;不知道该去学习什么了&#xff0c;其实这时候需要去学习的东西还有很多&#xff0c;接下来我会列举一下主要需要从哪些方面来对 Java 编程深入学习&#…

C++补充篇- C++11 及其它特性

目录 explicit 关键字 左值和右值的概念 函数返回值当引用 C11 新增容器 - array C的类型转换 static_cast reinterpret_cast dynamic_cast const_cast C智能指针 auto_ptr 使用详解 (C98) unique_ptr 使用详解 (C11) auto_ptr的弊端 unique_ptr严谨auto_ptr的弊端 unique_…

网安培训第二期——sql注入+中间件+工具

文章目录 宽字节注入插入注入二次注入PDO模式(动态靶机&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;)sql注入读取文件sql注入导出文件linux命令 10.12笔记sqlmapsqlmap参数 10.13笔记sqlmap 文件读写前后缀常用tamper及适用场景 10.…
最新文章