buildadmin+tp8表格操作(1)----表头上方添加按钮和自定义按钮

news2024/9/27 5:37:44

buildAdmin 的表头上添加一些按钮,并实现功能

在这里插入图片描述

添加按钮

<template>
    <!-- buttons 属性定义了 TableHeader 本身支持的顶部按钮,仅需传递按钮名即可 -->
    <!-- 这里的框架自带的 顶部按钮  分别有 刷新 , 添加, 编辑, 删除, 公共搜索 , 快速搜索 , 显示隐藏列,  -->
    <TableHeader
        :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay', 'unfold']"
        :quick-search-placeholder="t('Quick search placeholder', { fields: t('security.dataRecycleLog.Rule name') })"
    >
        <!-- 可以在此处以插槽的方式设置一些自定义按钮 -->
        
        <template #refreshPrepend>
            <!-- 刷新按钮前插槽内容 -->
        </template>

        <!-- 默认插槽 -->
        <template #default>
            <el-button v-blur :disabled="baTable.table.selection!.length > 0 ? false:true" class="table-header-operate" type="success">
                <Icon color="#ffffff" name="el-icon-RefreshRight" />
                <span class="table-header-operate-text">还原</span>
            </el-button>
        </template>

    </TableHeader>
</template>

<script>
import TableHeader from '/@/components/table/header/index.vue'
</script>

表头上的默认按钮,只需要 在 button 数组中添加相应的名称就可以了

在这里插入图片描述


自定义表头按钮

表格顶部的按钮,是通过表格组件中的插槽来添加的 代码如下图所示
在这里插入图片描述
在这里插入图片描述
从上图,我们可以看到, 自定义的按钮都添加上了

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

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

相关文章

FPGA模块——IIC协议(读写PCF8591)

FPGA模块——IIC协议&#xff08;读取PCF8591&#xff09; PCF8591/AT8591芯片对iic协议的使用 PCF8591/AT8591芯片 低功耗8位CMOS数据采集设备&#xff0c;4路模拟输入&#xff0c;1路模拟输出&#xff0c;分时多路复用&#xff0c;读取数据用串型iic总线接口&#xff0c;最大…

SFP-10G-SR光模块指南

SFP-10G-SR通常是思科&#xff08;Cisco&#xff09;使用的型号名。是一种用于非常短距离应用的最低成本、最低功耗的10G SFP模块。本文汇总了初学者在第一阶段关于10G SFP SR模块的常见问题。 SFP-10G-SR模块是否支持GE&#xff1f; 10GBASE-SR模块本身是可以支持GE速度的&am…

mysql客户端navicat的一些错误合集

关于mysql的客户端的使用的一些问题 问题描述&#xff1a; 在使用navicat prenium客户端的时候&#xff0c;连接数据库出现 Table ‘performance_schema.session_variables’ doesn’t exist 错误 解决方案&#xff1a; 首先找到mysql的bin目录 然后winR 进入到cmd界面 输入…

基于单片机音乐弹奏播放DS1302万年历显示及源程序

一、系统方案 1、本设计采用51单片机作为主控器。 2、DS1302计时显示年月日时分秒。 3、按键可以弹奏以及播放音乐&#xff0c;内置16首音乐。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /时钟显示**/ void init_1602_ds1302() { write…

JS判断是否存在某个元素(includes、indexOf、find、findeIndex、some)(every 数组内所有值是否相同)

方法一&#xff1a;array.includes(searcElement[,fromIndex]) 此方法判断数组中是否存在某个值&#xff0c;如果存在返回true&#xff0c;否则返回false。 searchElement&#xff1a;需要查找的元素&#xff0c;必选。fromIndex&#xff1a;可选&#xff0c;从该索引处开始查…

挑战视觉边界,探索图形验证码背后的黑科技

在日常生活中&#xff0c;我们登录网站或者其他平台时&#xff0c;在填写完账号密码之后&#xff0c;还会让我们填写4或6位的数字或者英文字母等&#xff0c;填写正确才能请求登录。这个其实是防止某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试&#xff0c;如下…

【LearnOpenGL基础入门——3】绘制纯色三角形

目录 一.写在前面 二.顶点输入 三.顶点着色器 四.编译着色器 五.片段着色器 六.着色器程序 七.链接顶点属性 彩蛋 一.写在前面 我们先认识一下OpenGL常用的几个名词&#xff1a; 顶点数组对象&#xff1a;Vertex Array Object&#xff0c;VAO顶点缓冲对象&#xff1a;…

Unity之NetCode多人网络游戏联机对战教程(9)--NetworkAnimator组件

文章目录 前言NetworkAnimatorAnimator的Trigger属性服务器权威模式&#xff08;Server Authoritative Mode&#xff09;客户端权威模式 (Owner Authoritative Mode)学习文档 前言 这个组件是NetCode常用的组件之一&#xff0c;NetworkAnimator跟NetworkTransform一样&#xf…

VSG-001

VulkanSceneGraph (VSG), is a modern, cross platform, high performance scene graph library built upon Vulkan VSG 是一个基于vulkan的现代的、跨平台的高性能场景管理库 VSg特性&#xff1a; 使用C17作为c规范编码&#xff0c;支持 CppCoreGuidelines支持 FOSS Best P…

Google Chrome 任意文件读取 (CVE-2023-4357)漏洞复现

Google Chrome 任意文件读取 (CVE-2023-4357)漏洞复现 1.漏洞描述 该漏洞的存在是由于 Google Chrome 中用户提供的 XML 输入验证不足。远程攻击者可以创建特制网页&#xff0c;诱骗受害者访问该网页并获取用户系统上的敏感信息。远程攻击者可利用该漏洞通过构建的 HTML 页面…

Leetcode——最长递增子序列

1. 题目链接&#xff1a;300. 最长递增子序列 2. 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&a…

基于秃鹰算法优化概率神经网络PNN的分类预测 - 附代码

基于秃鹰算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于秃鹰算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于秃鹰优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

Android Fragment 要你何用?2.0版本

作者&#xff1a;小鱼人爱编程 1. 老生常谈&#xff1a;为什么需要Fragment? 先看Activity、Fragment、View三者的关系&#xff1a; Activity 拥有生命周期&#xff0c;但是需要和AMS通信(跨进程)&#xff0c;比较臃肿。 View 不需要和AMS通信&#xff0c;但没有生命周期&…

机器学习第9天:决策树分类

文章目录 机器学习专栏 介绍 基本思想 使用代码 深度探索 优点 估计概率 训练算法 CART成本函数 实例数与不纯度 正则化 在鸢尾花数据集上训练决策树 机器学习专栏 机器学习_Nowl的博客-CSDN博客 介绍 作用&#xff1a;分类 原理&#xff1a;构建一个二叉树&#…

Aerial for Mac: 沉浸在高清鸟瞰的世界,让你的屏幕焕发新生

你是否已经厌倦了那些平淡无奇的屏保程序&#xff1f;是否希望你的Mac屏幕能更生动、更有趣&#xff1f;如果你对此抱有强烈的期待&#xff0c;那么Aerial for Mac绝对会是你期待已久的解决方案。 Aerial for Mac是一款独具特色的高清屏保程序&#xff0c;它以鸟瞰的视角带你领…

MyBatis查询数据库(全是精髓)

1. 什么是MyBatis&#xff1f; 简单说&#xff0c;MyBatis就是一个完成程序与数据库交互的工具&#xff0c;也就是更简单的操作和读取数据库的工具。 2. 怎么学习Mybatis Mybatis学习只分为两部分&#xff1a; 配置MyBatis开发环境使用MyBatis模式和语法操作数据库 3. 第一…

【广州华锐互动】VR技术助力中小学生安全教育,让学生在虚拟世界中学会自我保护!

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐走进我们的生活。在教育领域&#xff0c;VR技术的应用也日益广泛&#xff0c;为传统的教育模式带来了革命性的变革。中小学生安全教育作为学生生活中的重要组成部分&#xff0c;其重要性不言而喻…

PyTorch 实战之水果分类

当我们试图提高神经网络的准确性时&#xff0c;经常会遇到过拟合训练数据的情况。当我们运行测试数据的模型时&#xff0c;这会导致一个糟糕的预测。因此&#xff0c;我采取了一个数据集&#xff0c;并应用这些技术&#xff0c;不仅提高准确性&#xff0c;而且还处理过拟合的问…

2023-11-17 VsCode使用makefile进行多文件编译

点击 <C 语言编程核心突破> 快速C语言入门 VsCode使用makefile进行多文件编译 前言一、一个简单的多文件示例二、makefile基本语法三、VsCode使用makefile总结 前言 要解决问题: C或C可以多文件编译, 意味着需要进行代码组织, 为了方便多文件编译, gnu开发了make工具, …

【Gradle构件工具深度学习】

Gradle构件工具深度学习 1. 课程大纲1.1 Gradle入门1.2 与Idea整合1.3 Gradle进阶 2. 常见项目构建工具3. 安装gradle 1. 课程大纲 1.1 Gradle入门 基本介绍、常用指令、项目目录、项目应用 1.2 与Idea整合 Groovy语法、整合IDEA、搭建web工程、项目部署 1.3 Gradle进阶 生命周…