vue3中表格中通过判断某个字段来设置对应按钮和消息提示的disabled展示
vue3中表格中通过判断某个字段来设置对应按钮和消息提示的disabled展示
- 一、前言
- 1.代码案例
- 2.效果展示
一、前言
当使用 Vue 3 和 Element UI 的 el-table 组件时,你可以通过判断字段的值来设置对应的 el-button 的 disabled 属性和消息提示。下面是一个简单的示例,演示了如何在 Vue 3 中实现这一功能:
1.代码案例
<template><el-table :data="tableData"><el-table-column prop="name" label="Name"></el-table-column><el-table-column prop="status" label="Status"></el-table-column><el-table-column label="Action"><template #default="scope"><el-tooltip:disabled="scope.row.status !== 'pending'"content="Item is not pending"placement="top"effect="light"><el-buttontype="primary"size="small"@click="editItem(scope.row)":disabled="scope.row.status !== 'pending'">Edit</el-button></el-tooltip></template></el-table-column></el-table>
</template><script setup>
import { ref } from 'vue';const tableData = ref([{ name: 'Item 1', status: 'pending' },{ name: 'Item 2', status: 'approved' },{ name: 'Item 3', status: 'pending' },
]);const editItem = (item) => {// Handle edit actionconsole.log('Editing item:', item);
};
</script>
在这个示例中,我们使用了 Vue 3 的 Composition API,并结合了 Element UI 的 el-table、el-table-column、el-tooltip 和 el-button 组件。根据 scope.row.status 的值来控制按钮的禁用状态和提示信息。
希望这个简单示例能够帮助你理解如何在 Vue 3 中实现 el-table 中根据字段值设置按钮的禁用状态和消息提示。如果你需要更多的学习资源或有其他问题,请随时告诉我!
2.效果展示


相关文章:
vue3中表格中通过判断某个字段来设置对应按钮和消息提示的disabled展示
vue3中表格中通过判断某个字段来设置对应按钮和消息提示的disabled展示 一、前言1.代码案例2.效果展示 一、前言 当使用 Vue 3 和 Element UI 的 el-table 组件时,你可以通过判断字段的值来设置对应的 el-button 的 disabled 属性和消息提示。下面是一个简单的示例…...
产品经理-交互说明撰写(八)
1. 交互说明 交互说明可以看做是交互设计师或者产品经理输出的最核心的”产品“交互说明面向的”用户“是下游的同事 ⇒ UI设计师、开发工程师、测试工程师 2. 基本交互形式 2.1 页面交互 2.2 元素控件交互 3. 交互说明主要包括以下3个维度 3.1 页面流程(页面之…...
Rust:struct 与字节序列的相互转换
在 Rust 中,将结构体(struct)与字节序列(Vec<u8>)相互转换的常见方法是使用序列化和反序列化库。Rust 有一个流行的序列化库叫做 serde,它支持多种数据格式。为了将结构体转换为字节序列,…...
在https的系统中挂载其他http系统的画面的解决方案
目录 1.问题及说明 2.解决方案及示例 3.总结 1.问题及说明 A系统使用了https,在A系统中挂载B系统的http的画面,会报错如下: Mixed Content: The page at https://beef.zz.com/front/#/biz/cultivationList/cultivationDetails/5dbf836751…...
mysql存储比特位
一、介绍 二、SQL CREATE TABLE bits_table (id INT PRIMARY KEY AUTO_INCREMENT,bit_value BIGINT UNSIGNED );-- 插入一个 8 位的 BIT 值 INSERT INTO bits_table (bit_value) VALUES (B10101010);-- 查询并格式化输出 SELECT id,bit_value,CONCAT(b, LPAD(BIN(bit_value),…...
Lua中table.sort()使用方式
table.sort(tab,compare) 参数如下: tab:表名 compare:比较规则函数名 简略写法: a {1,2,3} table.sort(a,function(a,b) return a>b end) compare这个参数是一个函数,它有两个参数,你可以理解为表中的两个不同元素&…...
数组与指针声明小问题
1、int *p &a; 是 C 语言中的一条语句,它涉及指针的声明和初始化。让我们逐步解释这一行代码的含义: int *p:这是一个指针声明。它声明了一个名为 p 的变量,该变量是一个指向 int 类型数据的指针。 &a:这是取…...
【Java】手把手学会数组的使用
数组的基本用法 创建数组 基本语法: // 动态初始化 数据类型 [] 数组名称 new 数据类型 [] { 初始化数据 }; // 静态初始化 数据类型 [] 数组名称 { 初始化数据 }; 代码示例: int[] array1 {1,2,3,4,5};int[] array2 new int[]…...
音视频开发9 FFmpeg 解复用框架--如何将一个影音文件(mp4文件/wav文件) 最终播放起来
一,播放器框架 二 常用音视频术语 容器/文件(Conainer/File): 即特定格式的多媒体文件, 比如mp4、flv、mkv等。 媒体流(Stream): 表示时间轴上的一段连续数据࿰…...
vue实现页面渲染时候执行某需求
1. 前言 在之前的项目中,需要实现一个监控token是否过期从而动态刷新token的功能,然而在登录成功后创建的监控器会在浏览器刷新点击或者是通过导航栏输入网址时销毁... 2. 试错 前前后后始过很多方法,在这里就记录一下也许也能为各位读者排…...
Python小游戏——俄罗斯方块
文章目录 项目介绍环境配置代码设计思路1.初始化和导入库:2.定义颜色和屏幕尺寸:3.定义游戏逻辑:4.游戏循环: 源代码效果图 项目介绍 俄罗斯方块游戏是一款经典的益智游戏,玩家通过旋转和移动各种形状的方块ÿ…...
Moto和Inter字节序
inter: 低地址按照start_bit位放低字节依次往高字节填充 MotoLsb: 低地址按照start_bit位放高字节,依次往低字节填充MotoMsb:高字节按照start_bit位放低地址,依次往高字节填充...
外汇天眼:野村证券和Laser Digital与GMO互联网集团合作发行日元和美元稳定币
野村控股和Laser Digital将与GMO互联网集团合作,在日本探索发行日元和美元稳定币。GMO互联网集团的美国子公司GMO-Z.com Trust Company, Inc. 在纽约州金融服务部的监管框架下,在以太坊、恒星币和Solana等主要区块链上发行稳定币。GMO-Z.com Trust Compa…...
Python怎么使用getattr?
getattr() 是 Python 的内置函数,用于获取对象的属性值。它接受三个参数:对象、属性名称以及一个可选的默认值。如果对象具有指定的属性,getattr() 会返回该属性的值;如果对象没有该属性,并且提供了默认值,…...
[算法] 优先算法(三):滑动窗口(上)
🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏:🍕 Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 🧀Java …...
[蓝桥杯 2020 省 A1] 超级胶水
一.题目 题目描述 小明有 n 颗石子,按顺序摆成一排。 他准备用胶水将这些石子粘在一起。 每颗石子有自己的重量,如果将两颗石子粘在一起,将合并成一颗新的石子,重量是这两颗石子的重量之和。 为了保证石子粘贴牢固࿰…...
读书笔记分享
1.苏格拉底只在需要的时候才索取,那样便能以最少的物质满足自身的要求。他认为每个人都天生体质脆弱,只有在贫乏的环境中才会锻炼地强壮起来。生活中的大多数人认为,奢华才是幸福的生活。无休止的物质积聚,让人们每天生活在一个内…...
考试宝典——软件过程与管理重点知识总结
概论 软件工程三要素 过程方法工具 软件过程的定义 软件过程是用于软件开发及维护的一系列活动、方法及实践。 常见软件过程分类(五大类) 客户-供应商过程:内部直接影响到客户、外部直接影响开发、向客户交付软件以及软件正确操作与使用的过…...
穿越时空的工厂之旅:探索可视化三维场景的奥秘
在科技日新月异的今天,我们似乎总是在不断追求着更加高效、智能的生产方式。 传统的工厂管理方式往往依赖于平面图纸、纸质文档和现场巡查,这不仅效率低下,而且容易出错。而三维可视化技术通过3D建模和虚拟现实技术,将工厂内部的各…...
2024年推荐的适合电脑和手机操作的线上兼职副业平台
总是会有人在找寻着线上兼职副业,那么在如今的2024年,互联网提供了诸多方便,无论你是宝妈、大学生、程序员、外卖小哥还是打工族,如果你正在寻找副业机会,那么这篇文章将为你提供一些适合电脑和手机操作的线上兼职副业…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...
日常一水C
多态 言简意赅:就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过,当子类和父类的函数名相同时,会隐藏父类的同名函数转而调用子类的同名函数,如果要调用父类的同名函数,那么就需要对父类进行引用&#…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 (1)输入单引号 (2)万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
