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

news2024/11/16 23:34:21

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.coloradmin.cn/o/1407809.html

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

相关文章

uniapp设置隐藏原生导航栏(3)

1、单个页面隐藏 在pages.json里配置 (第一种方式) {"path": "pages/home/index","style": {"navigationBarTitleText": "首页","navigationStyle": "custom" // 使用自定义导航栏&#xff0c;系统会关…

在 EggJS 中实现 Redis 上锁

配置环境 下载 Redis Windows 访问 https://github.com/microsoftarchive/redis/releases 选择版本进行下载 - 勾选 [配置到环境变量] - 无脑下一步并安装 命令行执行&#xff1a;redis-cli -v 查看已安装的 Redis 版本&#xff0c;能成功查看就表示安装成功啦~ Mac brew i…

企业内部知识库搭建教程,赶紧收藏起来

在企业运营中&#xff0c;内部知识库搭建是一项重要的挑战&#xff0c;并需要合理的规划与管理。尤其对于中大型企业&#xff0c;内部知识库能够提高工作效率&#xff0c;减轻员工工作压力与突发事件的处理的困扰。下面给大家提供一份完整的内部知识库搭建教程&#xff0c;快看…

如何自信地部署人工智能(AI)

提升业务价值的人工智能方法 人工智能 (AI) 已经在变革业务、降低成本、最大限度地提高收入并增强客户体验。许多组织开始注意到&#xff1a;到 2025 年&#xff0c;AI 市场规模预计将增长到 3909 亿美元&#xff0c;而且该领域的行业也呈现出类似的发展趋势——例如&#xff…

常用界面设计组件 —— 容器组件

2.6 容器组件2.6.1 QGroupBox2.6.2 QScrollArea2.6.3 QToolBox2.6.4 QTabWidget2.6.5 QStackedWidget 2.6 容器组件 为了将界面上的各个组件的分布设计得更加美观&#xff0c;经常 使用一些容器类&#xff0c;如 QgoupBox、QtabWidget、 QToolBox等。 2.6.1 QGroupBox 实例效…

YOLOv7调用摄像头检测报错解决

yolov7detect.py文件调用本地摄像头&#xff0c;把source参数设为0 parser.add_argument(--source, typestr, default0, helpsource) # file/folder, 0 for webcam 报错&#xff1a;cv2.error: OpenCV(3.4.2) 一堆地址:The function is not implemented. Rebuild the library…

洛谷 P1705 爱与愁过火

测试用例 5 2 8 1 7 2 5 4#include<iostream> #include<string.h> using namespace std; int m, r, n; int a[100]; int visit[100] {0}; int sum 0; void traceback(int s,int price,int next){if(s r){if (price > n)sum;return ;}for (int i next ;i &…

Linux命令大全(超详细版)

一 ~ 四章 【点击此处查看】 五、shell 编程 5.1、shell 概述 5.1.1 shell 是什么 Shell是一个命令行解释器&#xff0c;它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序&#xff0c;用户可以用Shell来启动、挂起、停止甚至是编写一些程序。 Shell还是…

理解分布式存储的真实成本 - 10PB的硬件和软件

我们最近与一家大型银行的首席信息官进行了一次对话。他们是全球系统性重要银行之一——规模极其庞大。这位CIO决定将MinIO引入为数据分析计划的对象存储。这个部署从抵押贷款、交易和新闻平台收集数据&#xff0c;以运行Spark和其他分析工具&#xff0c;为银行提供洞察力。Min…

深入理解Java中的队列(Queue)

目录 一、什么是队列&#xff08;Queue&#xff09;&#xff1f; 二、队列中的常用方法 三、Java中的队列接口和实现类 1. LinkedList 2. ArrayDeque 3. PriorityQueue 四、队列的应用场景 1.消息队列 2.线程池任务调度 3.缓存淘汰策略 4.网络请求调度 5.广度优先搜索&#xff…

肺癌相关文献6

第十四篇 Classification of lung adenocarcinoma based on stemness scores in bulk and single cell transcriptomes IF&#xff1a;6.0 中科院分区:2区 生物学WOS分区&#xff1a;Q1被引次数&#xff1a; 4 背景&#xff1a;癌细胞具有无限期自我更新和增殖的能力[2]。在一…

# [NOI2019] 斗主地 洛谷黑题题解

[NOI2019] 斗主地 题目背景 时限 4 秒 内存 512MB 题目描述 小 S 在和小 F 玩一个叫“斗地主”的游戏。 可怜的小 S 发现自己打牌并打不过小 F&#xff0c;所以他想要在洗牌环节动动手脚。 一副牌一共有 n n n 张牌&#xff0c;从上到下依次标号为 1 ∼ n 1 \sim n 1∼…

UV紫外激光打标机的优缺点是什么

​ UV紫外激光打标机具有以下优点&#xff1a; 1. 精度高&#xff1a;紫外激光打标机的光束质量好&#xff0c;聚焦光斑小&#xff0c;可以实现在各种材料上进行超精细打标。 2. 速度快&#xff1a;由于紫外激光的独特特性&#xff0c;打标速度非常快&#xff0c;提高了生产效…

23111 C++ day1

思维导图 提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 要求使用C风格字符串完成 #include <iostream> #include<array>using namespace std;int main() {int a0,A0,num0,space0,other0;array<char…

中国大模型迎来“95后” 百度奖学金发掘百位“未来AI技术领袖”

在人工智能掀起的科技革命和产业变革浪潮下&#xff0c;大模型成为最受关注的研究领域。1月22日&#xff0c;第十一届百度奖学金颁奖典礼在北京举行&#xff0c;来自全球顶尖高校及科研机构的10位“未来AI技术领袖”脱颖而出&#xff0c;他们平均年龄仅27岁&#xff0c;其中8人…

Oracle触发器简单应用示例

目录 一、应用描述 【1】、应用场景&#xff1a; 【2】、具体场景&#xff1a; 二、表结构介绍 【1】表名介绍&#xff1a; 【2】表结构&#xff1a; 三、设置触发器 一、应用描述 【1】、应用场景&#xff1a; 现有一张库存明细以及销售明细表&#xff0c;销售明细表发生…

python合并多个dict---合并多个字典值---字典值相加

文章目录 序多个dict同key值相加collection.Counter传参重载号 多个dict合并练习 序 主要是借助Counter、函数传参和运算符重载&#xff01;各有优劣&#xff01; 多个dict同key值相加 collection.Counter 借助collections.Counter&#xff0c;但是它只适用于值为整数或者小…

扭蛋机小程序开发,让扭蛋迷体验到扭蛋的趣味性

扭蛋机作为盲盒的前身&#xff0c;也是深受大众的欢迎&#xff0c;十几到几十不等的价格就可以让消费者体验到幸福感。扭蛋机具有价格低、性价比高的特点&#xff0c;扭蛋中的主题商品也都是经典热门动漫&#xff0c;具有较高的收藏价值&#xff0c;吸引了不少的扭蛋迷。 随着…

企业新闻稿怎么写?纯干货!

企业新闻稿是企业宣传的重要营销方式&#xff0c;新闻稿件的质量直接决定你的宣传效果&#xff0c;企业新闻稿怎么写&#xff0c;接下来伯乐网络传媒就来给大家分享一些企业新闻稿写作心得&#xff0c;纯干货&#xff0c;建议收藏起来慢慢看&#xff01; 一、企业新闻稿的组成要…

深入理解stressapptest

文章目录 一、概述二、安装2.1、源码编译安装2.2、命令行安装2.3、安装确认三、重要参数详解3.1、查询支持的参数3.2、参数说明 四、实例4.1、随机测试&#xff08;默认模式&#xff09;4.2、循环测试4.2、全内存测试 团队博客: 汽车电子社区 一、概述 stressapptest是一款免费…