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

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

相关文章

前端-基础 表格标签 总结

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

HarmonyOS NEXT鸿蒙星河版发布

1月18日,在深圳举行的“鸿蒙生态千帆启航仪式”上,华为常务董事、终端BG CEO余承东宣布HarmonyOS NEXT鸿蒙星河版面向开发者开放申请。鸿蒙星河版将实现原生精致、原生易用、原生流畅、原生安全、原生智能、原生互联6大极致原生体验。 并且,华为在 1 月 15 日开启了HarmonyO…

游戏云化好吗?游戏云化会带来什么?

随着云计算技术的飞速发展&#xff0c;游戏云化成为游戏产业中备受关注的话题。这一新兴技术给玩家和游戏行业带来了全新的可能性。本文将深入探讨游戏云化的概念、优势以及可能带来的影响。 1、什么是游戏云化&#xff1f; 游戏云化是指将游戏的各个环节&#xff0c;包括游戏…

如何使用Portainer部署web站点并实现无公网ip远程访问

文章目录 前言1. 安装Portainer1.1 访问Portainer Web界面 2. 使用Portainer创建Nginx容器3. 将Web静态站点实现公网访问4. 配置Web站点公网访问地址4.1公网访问Web站点 5. 固定Web静态站点公网地址6. 固定公网地址访问Web静态站点 前言 Portainer是一个开源的Docker轻量级可视…

用 Python 制作可视化 GUI 界面,一键实现自动分类管理文件!

经常杂乱无章的文件夹会让我们找不到所想要的文件&#xff0c;因此小编特意制作了一个可视化GUI界面&#xff0c;通过输入路径一键点击实现文件分门别类的归档。 不同的文件后缀归类为不同的类别 我们先罗列一下大致有几类文件&#xff0c;根据文件的后缀来设定&#xff0c;大…

大模型增强大模型:通过融合扩展能力(Google DeepMind2024)

1、写作动机&#xff1a; 存在如此多领域特定的模型自然引发一个问题&#xff1a;我们是否能够将一个固定模型与一个特定领域的增强模型组合&#xff0c;以实现新的能力&#xff1f;例如&#xff0c;我们是否可以将增强模型的代码理解能力与固定LLM的语言生成能力组合&#xf…

【单片机】STM32 ARM Cortex-M0 微控制器特性概述 双排 TSSOP封装好手工焊接的STM32芯片,双排

STM32F070CB STM32F070RB STM32F070C6 STM32F070F6 在嵌入式系统和物联网应用中&#xff0c;ARM Cortex-M0 微控制器以其强大的性能和丰富的功能而备受瞩目。本文将介绍该微控制器的主要特性&#xff0c;使读者更好地了解其适用范围和潜在应用。 核心特性 ARM 32位 Cortex…

Python爬虫---scrapy框架---当当网管道封装

项目结构&#xff1a; dang.py文件&#xff1a;自己创建&#xff0c;实现爬虫核心功能的文件 import scrapy from scrapy_dangdang_20240113.items import ScrapyDangdang20240113Itemclass DangSpider(scrapy.Spider):name "dang" # 名字# 如果是多页下载的话, …

C/C++ BM6判断链表中是否有环

文章目录 前言题目解决方案一1.1 思路阐述1.2 源码 解决方案二2.1 思路阐述2.2 源码 总结 前言 做了一堆单链表单指针的题目&#xff0c;这次是个双指针题&#xff0c;这里双指针的作用非常明显。 题目 判断给定的链表中是否有环。如果有环则返回true&#xff0c;否则返回fal…

kylin集群负载均衡(kylin3,hbaseRIF问题)

hbase历险记 目录 hbase历险记 寻找问题 分析原因 解决方案 方案1&#xff08;资源问题、失败&#xff09; 方案2&#xff08;成功&#xff09; 寻找问题 不知道你是不是有这样的疑惑。我kylin是个单机&#xff0c;我使用的hbase是个集群&#xff0c;但内存全在某一台机…

【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

课程地址&#xff1a;【新课uniapp零基础入门到项目打包&#xff08;微信小程序/H5/vue/安卓apk&#xff09;全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p12&share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 四、vue组件 uni-app官网 …

小蓝和小桥的挑战*

题目 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int t sc.nextInt();sc.nextLine();while(t-- > 0) {int n sc.nextInt();sc.nextLine();int[] a new int[n];for(int i0;i<n;i)a[i…