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年,互联网提供了诸多方便,无论你是宝妈、大学生、程序员、外卖小哥还是打工族,如果你正在寻找副业机会,那么这篇文章将为你提供一些适合电脑和手机操作的线上兼职副业…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
