element中表格组件的row-class-name和class-name属性的使用以及无效处理

1.这两个属性的使用,row-class-name用在el-table标签上,class-name用在el-table-column标签上。两个属性即可绑定类名也可绑定函数

<!-- 这里是绑定函数,也可以绑定类名 -->
<el-table :data="tableData" @selection-change="handleSelect" :row-class-name="shower" border  height="400px" scrollbar-always-on><el-table-column width="60" type="selection" /><el-table-column width="150" prop="name" label="订单号" /><el-table-column width="120" prop="estimateTotal" label="跟单员" /><el-table-column width="5" /><el-table-column label="操作" width="150"><template #default="{ row }"><el-button type="primary" text @click="confirmData(row, 1)" v-if="true">确认应收数据</el-button><el-button type="primary" text @click="Removeconfirm(row, 1)" v-else>撤销确认</el-button></template></el-table-column><!-- 这里是绑定类名,也可以绑定函数 --><el-table-column width="180" prop="name" label="客户名称" class-name="unconfirmeds"/><el-table-column width="120" prop="meetName" label="核销状态" />
</el-table>

2.绑定函数时就可以通过条件来决定哪行需要添加样式

function shower({row}){console.log(row);if(row.name==='阿尼亚'){return 'unconfirmeds'}else{return ''}
}

3.样式无效处理

样式没有效果的原因在于添加的样式不是全局样式,所以只需要将scoped去除或者自己定义一个全局样式

<style>
.unconfirmeds{background-color: rgba(255, 0, 0, 0.075) !important;color:red;font-weight: 700;
}
</style>

4.最终效果

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

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

相关文章

DB107-ASEMI插件小方桥DB107

编辑&#xff1a;ll DB107-ASEMI插件小方桥DB107 型号&#xff1a;DB107 品牌&#xff1a;ASEMI 正向电流&#xff08;Id&#xff09;&#xff1a;1A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;1000V 正向浪涌电流&#xff1a;50A 正向电压&#xff08;VF&…

Linux指令(二)

1.指令&#xff1a;cd ~ 该指令表示进入家目录。 那么你可能会问了&#xff0c;什么是家目录呢&#xff1f; 定义&#xff1a;家目录&#xff0c;又叫主目录。实际上是指用户所在的根目录&#xff0c;例如&#xff1a;在windows系统下&#xff0c;我们的用户目录就是家目录&…

java基础:求数组的最值

方法一&#xff1a;顺序查找 先假设数组第一个元素为最值&#xff0c;然后和数组里的数按顺序进行比较得出最值&#xff0c;所以叫顺序查找。 代码如下 package idea;public class arr_int {public static void main(String[] args) { // 初始化一个数组int[] arr {12…

OpenGL Assimp加载各类型模型(.obj、.fbx、.glb、.3ds)

1.简介 本博客以.glb格式为例&#xff0c;加载glb格式的3d模型&#xff0c;网上找了一圈&#xff0c;基本上都是根据OpenGL官方示例&#xff0c;加载.obj格式的3d模型。 下面以.obj和.glb格式的3D模型简单介绍一下。 常见的.obj格式的3D模型如下所示&#xff1a;纹理都已经被…

往docker中cloudbeaver的容器添加达梦数据库、impala数据库连接支持(cloudbeaver添加自定义数据连接)

cloudbeaver默认没有开放impala连接&#xff0c;更不会支持国产数据库了 docker安装运行cloudbeaver可以参考文章&#xff1a;docker安装运行CloudBeaver并设置默认语言为中文 本文跳过cloudbeaver镜像拉取&#xff0c;直接就开始实现自定义数据库连接功能 1、初始化cloudbe…

C语言——atoi函数解析

目录 前言 atoi函数的介绍 atoi函数的使用 atoi函数的模拟实现 前言 对于atoi函数大家可能会有些陌生&#xff0c;不过当你选择并阅读到这里时&#xff0c;请往下阅读&#xff0c;我相信你能对atoi函数熟悉该函数的头文件为<stdlib.h> 或 <cstdlib> atoi函数的…

基于springboot+vue的房屋租赁系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…

从 GPT1 - GPT4 拆解

从 GPT1 - GPT4 拆解 从 GPT1 - GPT4GPT1&#xff1a;更适用于文本生成领域GPT2&#xff1a;扩展数据集、模型参数&#xff0c;实现一脑多用&#xff08;多个任务&#xff09;GPT3&#xff1a;元学习 大力出奇迹InstructGPT&#xff1a;指示和提示学习 人工反馈强化学习 RLHF…

什么?2024年AMC8正式比赛提前20多分钟强制交卷?后续如何处理?

今天&#xff08;2024年1月19日&#xff09;17:00-17:40是2024年AMC8美国数学思维活动&#xff08;竞赛&#xff09;正式比赛的时间&#xff0c;全国报名参加AMC8比赛的孩子们按要求提前架设好了设备&#xff0c;准时按要求登录考试系统&#xff0c;17点准时开考。原计划是要考…

排序链表(LeetCode 148)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路参考文献 1.问题描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff…

2023年全球软件架构师峰会(ArchSummit深圳站):核心内容与学习收获(附大会核心PPT下载)

本次峰会是一次重要的技术盛会&#xff0c;旨在为全球软件架构师提供一个交流和学习的平台。本次峰会聚焦于软件架构的最新趋势、最佳实践和技术创新&#xff0c;吸引了来自世界各地的软件架构师、技术专家和企业领袖。 在峰会中&#xff0c;与会者可以了解到数字化、AIGC、To…

C语言-字符串分割函数 strtok、strtok_r

一、函数介绍 函数名 strtok, strtok_r - extract tokens from strings //从字符串中提取标记头文件 #include <string.h>文件原型 char *strtok(char *str, const char *delim);char *strtok_r(char *str, const char *delim, char **saveptr);二、测试代码 官方代码…

外网连接配置及acl配置使用

外网连接 在路由器上进行配置 配置nat功能 NAT配置&#xff1a; [R1]acl basic 2000 创建acl规则 编号为2000 [R1-acl-ipv4-basic-2000]rule 0 permit source any 允许所有数据包 [R1-acl-ipv4-basic-2000]quit [R1]nat address-group 1 配置出接口转换地址 [R…

Unity-场景

创建场景 创建新的场景后&#xff1a; 文件 -> 生成设置 -> Build中的场景 -> 将项目中需要使用的场景拖进去 SceneTest public class SceneTest : MonoBehaviour {// Start is called before the first frame updatevoid Start(){// 两个类&#xff1a; 场景类、场…

广告灯的左移右移

1&#xff0e;  实验任务 做单一灯的左移右移&#xff0c;硬件电路如图4.4.1所示&#xff0c;八个发光二极管L1&#xff0d;L8分别接在单片机的P1.0&#xff0d;P1.7接口上&#xff0c;输出“0”时&#xff0c;发光二极管亮&#xff0c;开始时&#xff0c;P1.0→P1.1→P1.2→…

【分享】MathWorks中国汽车年会:“软件定义汽车”

从软件赋能到软件定义&#xff0c;汽车行业不仅需要解决诸如错误发现滞后带来的高昂代价、功能融合所需的跨学科知识、功能安全与实施成本之间的权衡等老问题&#xff0c;也面临着新的挑战&#xff1a;软件复杂度的不断提升、利用数据驱动创造价值、人工智能的引入和实现、数字…

transbigdata笔记:清理研究区域内的轨迹漂移

1 方法介绍 transbigdata 考虑了三种轨迹漂移&#xff0c;需要被清理 速度阈值&#xff1a;如果当前轨迹数据点与之前&#xff08;和后续&#xff09;轨迹数据点之间的速度超过阈值&#xff0c;则视为漂移。 距离阈值&#xff1a;如果当前轨迹数据点与上一个&#xff08;和后…

统计学-R语言-6.2

文章目录 前言总体均值的区间估计两个总体均值之差的估计两个总体均值之差的估计&#xff08;独立大样本的估计&#xff09;两个总体均值之差的估计&#xff08;独立小样本的估计&#xff09;两个总体均值之差的估计&#xff08;配对样本的估计&#xff09; 总体比例的区间估计…

python数字图像处理基础(九)——特征匹配

目录 蛮力匹配&#xff08;ORB匹配&#xff09;RANSAC算法全景图像拼接 蛮力匹配&#xff08;ORB匹配&#xff09; Brute-Force匹配非常简单&#xff0c;首先在第一幅图像中选取一个关键点然后依次与第二幅图像的每个关键点进行&#xff08;描述符&#xff09;距离测试&#x…

前端-基础 表格标签 总结

目录 表格的相关标签 &#xff1a; 表格的相关属性 合并单元格 &#xff1a; 表格的相关标签 &#xff1a; 表格标签 - <table> 行标签 - <tr> 单元格标签 - <td> 表头单元格标签 - <th> 表格结构标签 表头区域标签 - < thead >…