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.最终效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C++】string的基本使用

从这篇博客开始&#xff0c;我们的C部分就进入到了STL&#xff0c;STL的出现可以说是C发展历史上非常关键的一步&#xff0c;自此C和C语言有了较为明显的差别。那么什么是STL呢&#xff1f; 后来不断的演化&#xff0c;发展成了知名的两个版本&#xff0c;一个叫做P.J.版本&am…

Liunx:线程控制

目录 创建线程&#xff1a;pthread_create(); 线程等待&#xff1a;pthread_join(); 线程退出&#xff1a;pthread_exit(); 线程取消&#xff1a;pthread_cancel() 说线程的时候说过&#xff0c;liunx没有选择单独定义线程的数据结构和适配算法&#xff0c;而是用轻量级进程…

关于java的继承

关于java的继承 我们在上一篇文章中&#xff0c;了解到了封装&#xff0c;我们本篇文章来介绍一下面向对象的第二大特点&#xff0c;继承&#xff0c;还是遵循结合现实生活中的实际情况&#xff0c;理解着去学习&#xff0c;能更好的加深印象&#x1f600;。 一、继承 继承的…

【从零开始学习Java重要知识 | 第三篇】暴打ReentrantLock底层源码

目录 前言&#xff1a; 前置知识&#xff1a; 什么是公平锁与非公平锁&#xff1f; 尝试自己构造一把锁&#xff1a; ReentrantLock源码&#xff1a; 加锁&#xff1a; 解锁&#xff1a; 总结&#xff1a; 前言&#xff1a; 在并发编程中&#xff0c;线程安全是一个重…

力扣 | 49. 字母异位词分组

这里使用HashMap Java package _49;import java.util.*;public class Problem_49_GroupAnagrams {public List<List<String>> groupAngrams(String [] strs){Map<String,List<String>> map new HashMap<>(); // int [] arr new int[]{}…

建筑能源管理系统

建筑能源管理系统是一种集成了先进的监测、控制、分析和优化技术的智能化系统&#xff0c;旨在提高建筑能源效率&#xff0c;降低能源消耗&#xff0c;减少环境污染&#xff0c;并为用户提供舒适、安全的建筑环境。通过监测建筑内的各种能源消耗情况&#xff0c;如电力、热水、…

Halcon基于形变的模板匹配

Halcon基于形变的模板匹配 形变分为两种&#xff0c;一种是基于目标局部的形变&#xff0c;另一种是由于透视关系而产生的形变。基于形变的模板匹配也是一种基于形状的匹配方法&#xff0c;但不同的是&#xff0c;其返回结果中不仅包括轻微形变的形状.形变的位置和参数&#x…

Python基础第二篇(Python基础语法)

文章目录 一、字面量二、注释三、变量四、数据类型五、数据类型转换六、标识符七、运算符八、字符串扩展内容&#xff08;1&#xff09;字符串定义&#xff08;2&#xff09;字符串拼接、&#xff08;3&#xff09;字符串格式化&#xff08;4&#xff09;字符串格式化的精度控制…

java spring cloud 企业工程管理系统源码+二次开发+定制化服务

随着企业规模的不断扩大和业务的快速发展&#xff0c;传统的工程项目管理方式已经无法满足现代企业的需求。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;企业需要借助先进的数字化技术进行转型。本文将介绍一款采用Spring CloudSpring BootMybat…

【AI绘画+本地部署】基于krita的AI绘画(含windows一键整合包)

comfyuikrita所有相关资源整合包(无需下载后面链接)百度网盘&#xff1a;https://pan.baidu.com/s/1iwNRpdTaD26YbzSDm6WLDA?pwdbur8 –来自百度网盘超级会员V4的分享 krita绘画软件官网地址 https://krita.org/en/download/krita-desktop/ krita-ai-diffusion 插件&#xff…

python 自动化模块 - pyautogui初探

python 自动化模块 - pyautogui 引言一、安装测试二、简单使用三、常用函数总结 引言 在画图软件中使用pyautogui拖动鼠标&#xff0c;画一个螺旋式的正方形 - (源码在下面) PyAutoGUI允许Python脚本控制鼠标和键盘&#xff0c;以自动化与其他应用程序的交互。API的设计非常简…

【答案】2023年国赛信息安全管理与评估正式赛答案-模块1任务一

1.根据网络拓扑图所示&#xff0c;按照IP 地址规划表&#xff0c;对防火墙的名称、各接口IP 地址进行配置。共8 分&#xff0c;每错1 处&#xff08;行&#xff09;扣1 分&#xff0c;扣完为止。地址、安全域、接口&#xff08;状态为UP&#xff09;、名称都正确。 2.根据网络…

QT设置QTableWidget左上角文字(CornerButton)

关于这个左上角 在QTableWidget中&#xff0c;左上角有一个可以点击的空白区域&#xff0c;如图&#xff1a; 默认情况下&#xff0c;点击它会全选所有的单元格。 它即不属于列表头&#xff0c;也不属于行表头&#xff0c;它的名称叫Corner Button 在QTableWidget中&#xf…

java数据结构与算法刷题-----LeetCode209. 长度最小的子数组

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路 代码:时间复杂度O(n).空间复杂度O(1) class Solution {public in…

红队打靶练习:BOB: 1.0.1

目录 信息收集 1、netdiscover 2、nmap 3、nikto 4、whatweb 目录探测 1、dirb 2、gobuster 3、dirsearch WEB 主页&#xff1a; robots.txt 其他页面 反弹shell 提权 系统信息收集 jc账户 本地提权 信息收集 1、netdiscover ┌──(root㉿ru)-[~/kali] └…

rviz可视化机械臂(python)

一、准备的东西 一个机械臂的urdf 规划的路径点 二、launch文件的撰写 1.初始化 <?xml version"1.0" encoding"utf-8"?> <launch><param name"robot_description" textfile"机械臂.urdf" /><node name&qu…

2024--Django平台开发-订单项目管理(十四)

day14 订单管理系统 1.关于登录 1.1 UI美化 页面美化&#xff0c;用BootStrap 自定义BooStrapForm类实现。 class BootStrapForm:exclude_filed_list []def __init__(self, *args, **kwargs):super().__init__(*args, **kwargs)# {title:对象,"percent":对象}fo…

【微信小程序独立开发 4】基本信息编辑

这一节完成基本信息的编辑和保存 首先完成用户头像的获取 头像选择 需要将 button 组件 open-type 的值设置为 chooseAvatar&#xff0c;当用户选择需要使用的头像之后&#xff0c;可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。 从基础库2.24.4版本起&…

自然语言处理中的查准率与查全率的关键技术,以及自然语言处理中的查准率与查全率具体实例与策略

自然语言处理中的查准率与查全率的关键技术,以及自然语言处理中的查准率与查全率具体实例与策略。 1.背景介绍 自然语言处理(NLP,Natural Language Processing)是人工智能领域的一个重要分支,其主要目标是让计算机能够理解、生成和处理人类语言。自然语言处理涉及到许多子…