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.hqwc.cn/news/433747.html

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

相关文章

【机组】单元模块的软件简介和安装

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 【软件简介和安装】 1 性能特…

Spring Boot 中 Service 层依赖注入问题

目录 问题描述 产生错误 问题原因 解决方法 手动注入方法 1、使用工具集 hutool&#xff0c;引入 Maven 依赖 2、编写 SpringUtil 工具类 问题描述 Controller 层方法为 static 静态&#xff0c;引入 Service 层时使用 Autowired 注解自动装配&#xff0c;Controller层方…

通过LiveNVR实现海康大华华为宇视等监控摄像头在服务器上录像存储,并web无插件直播和回放

支持云端录像服务器上面集中录像存储在部署LiveNVR的服务器上面 1、流媒体服务软件2、配置开启录像(云端录像)3、录像回看(云端录像)3.1、查看录像3.1.1、时间轴视图3.1.2、列表视图 4、云端录像相关接口5、如何分享时间轴录像回看&#xff1f;6、iframe集成示例7、RTSP/HLS/FL…

CPU,内存和硬盘之间的关系

计算机三大件&#xff1a;CPU&#xff0c;内存&#xff0c;硬盘。从运算速度来看&#xff0c;CPU>内存>固态硬盘>机械硬盘。 电脑卡顿怎么解决&#xff1f; 1、清理垃圾&#xff1b; 2、释放C盘空间&#xff0c;因为系统需要C盘空间当作虚拟内存&#xff1b; 3、增…

AF700 NHS 酯,AF 700 Succinimidyl Ester,一种明亮且具有光稳定性的近红外染料

AF700 NHS 酯&#xff0c;AF 700 Succinimidyl Ester&#xff0c;一种明亮且具有光稳定性的近红外染料&#xff0c;AF700-NHS-酯&#xff0c;具有水溶性和 pH 值不敏感性 您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;AF700 NHS 酯&#xff0c;AF 700 Succinimid…

Genome-wide association studies in R

全基因组关联&#xff08;GWA&#xff09;研究扫描整个物种基因组&#xff0c;寻找多达数百万个SNPs与特定感兴趣特征之间的关联。值得注意的是&#xff0c;感兴趣的性状实际上可以是归因于群体的任何类型的表型&#xff0c;无论是定性的&#xff08;例如疾病状态&#xff09;还…

深入浅出 diffusion(4):pytorch 实现简单 diffusion

1. 训练和采样流程 2. 无条件实现 import torch, time, os import numpy as np import torch.nn as nn import torch.optim as optim from torchvision.datasets import MNIST from torchvision import transforms from torch.utils.data import DataLoader from torchvision.…

Mac中java jdk、android sdk、flutter sdk目录

1、Java JDK 目录 &#xff08;1&#xff09;官网下载的 Java JDK Java JDK下载官网 /Library/Java/JavaVirtualMachines&#xff08;2&#xff09;Android Studio下载的 Java JDK /Users/用户名/Library/Java/JavaVirtualMachines2、Android SDK 目录 /Users/用户名/Libr…

旷视low-level系列(一):Bayer Pattern Unification and Bayer Preserving Au

文章目录 1. Motivation2. Contribution3. Methods3.1 BayerUnify3.2 BayerAug 4. CommentsReference 1. Motivation 对于RAW域去噪&#xff0c;通常会将单通道bayer格式的RAW图打包成4通道&#xff0c;然后送入神经网络。不同厂家生产的sensor出的RAW图可能具有不同的bayer模…

vue3项目中使用Arco Design-Table组件结合h()函数生成表格嵌套表格效果

vue3项目中使用Arco Design-Table组件【点击跳转】结合vue3-h()函数【点击跳转】生成表格嵌套表格效果。 示例效果如下&#xff1a; 【方式一】 给Table组件设置表格的“展开行配置”参数&#xff1a;expandable <a-table :expandable"expandable"></a-t…

归并排序和计数排序讲解

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;数据结构|Linux|C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 前言归并排序&#xff08;递归&#xff09;动图&#xff1a;代码实现以下是代码详细讲解&#xff1a; 归并排序非递归代码实现以下是代码详细讲解&…

[java基础揉碎]do..while循环控制

基本语法: 说明: 1.先执行, 在判断, 也就是一定会执行一次 2.结尾有分号