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

news2024/9/27 15:31:06

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.coloradmin.cn/o/1396830.html

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

相关文章

Ubuntu安装zsh

安装zsh sudo apt install zsh安装git&#xff08;如果有跳过&#xff09; sudo apt install git(1条消息) 关于Git这一篇就够了_17岁boy想当攻城狮的博客-CSDN博客 安装oh my zsh git clone https://github.com/robbyrussell/oh-my-zsh切换目录到oh-my-zsh文件夹下的tools…

VUE--插槽slot(将父级的模块片段插入到子级中)

组件可以接收任意类型的JS值作为props&#xff0c;但我们想要为子组件传递一些模板片段&#xff0c;并在子组件中进行渲染时&#xff0c;此时可以采用插槽slot来实现 简单来说&#xff0c;插槽时组件内留一个或多个插槽的位置&#xff0c;供组件传递对应的模板代码&#xff08;…

ASCII码常用

ASCII码的意义 对程序员来说真的是意义重大啊&#xff01; 作为一名程序员一定要牢记&#xff01; 常用A&#xff1a;65 a&#xff1a;97

设计模式⑦ :简单化

文章目录 一、前言二、Facade 模式1. 介绍2. 应用3. 总结 三、Mediator 模式1. 介绍2. 应用3. 总结 一、前言 有时候不想动脑子&#xff0c;就懒得看源码又不像浪费时间所以会看看书&#xff0c;但是又记不住&#xff0c;所以决定开始写"抄书"系列。本系列大部分内容…

c# 自定义 滑块TrackBar

辛苦半天做出来的&#xff0c;如果觉得好用&#xff0c;记得点赞 效果图如下&#xff1a; 具体操作&#xff1a; 1 、添加代码&#xff08;代码在下面&#xff09;&#xff0c;重新生成下整个工程&#xff0c;在工具栏中就出现控件&#xff0c;将控件拖到窗体中 2、只需要调整…

1434. 数池塘(四方向)-深度优先搜索-DFS

代码&#xff1a; #include<iostream> using namespace std; char a[200][200]; int fx[4]{0,1,0,-1}; int fy[4]{1,0,-1,0}; int k0; int n,m; void dfs(int x,int y){a[x][y].;int tx,ty;for(int i0;i<4;i){txxfx[i];tyyfy[i];if(tx>1&&tx<n&&am…

python24.1.19引入模块

引入方法 可引入第三方模块 安装模块&#xff1a;在终端输入pip install模块名字 eg&#xff1a;

kali下-MSF-ftp_login模块破解FTP账号及密码

一、环境准备 两台设备在同一个网络内 一台kali系统&#xff1a;192.168.10.128 一台winserver2016&#xff1a;192.168.10.132 二、MSF介绍 metasploit 全称是The Metasploit Framework&#xff0c;又称MSF&#xff0c;是Kali 内置的一款渗透测试框架&#xff0c;也是全球…

Docker(二)安装指南:主要介绍在 Linux 、Windows 10 和 macOS 上的安装

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; 安装 Docker Docker 分为 stable test 和 nightly 三个更新频道。 官方网站上有各种环境下的 安装指南&#xff0c;这里主要介绍 Docker 在…

【网络技术】【traceroute】【Linux虚拟机(Ubuntu)】无法traceroute至谷歌【及解决方法】

一、问题描述 问题描述如下&#xff1a; Ubuntu虚拟机可以ping通谷歌&#xff08;www.google.com&#xff09;&#xff0c;但是却无法通过traceroute命令找到路由路线&#xff0c;如下图所示&#xff1a; 二、解决方法 从traceroute命令的返回内容可以看出&#xff0c;路由寻…

使用IEEE754标准转换过程

IEEE 754标准是一种用于浮点数表示和计算的标准。对于给定的浮点数&#xff0c;IEEE 754标准定义了如何表示它以及如何执行基本的算术运算。 例如&#xff0c;现在要将十进制浮点数3.25f转换为IEEE 754标准的二进制表示&#xff0c;可以按照以下步骤进行&#xff1a; 将3.25f…

网卡:初始化,frame组装,网卡处理电信号过程

ip模块中存储的是一堆数字信号&#xff0c;网卡内部会把数字信号转换成电信号或者光信号在网线中传输。 网卡只是一个硬件&#xff0c;需要驱动程序去操作他&#xff0c;计算机中已经把主流网卡的驱动程序&#xff08;不只是网卡的&#xff0c;还有鼠标&#xff0c;键盘这些硬件…

性能测试知多少---性能测试流程

看到好多新手&#xff0c;在性能需求模糊的情况下&#xff0c;随便找一个性能测试工具&#xff0c;然后就开始进行性能测试了&#xff0c;在这种情况下得到的性能测试结果很难体现系统真实的能力&#xff0c;或者可能与系统真实的性能相距甚远。 与功能测试相比&#xff0c;性能…

R.swift SwiftGen 资源使用指南

R.swift 和 SwiftGen 资源转换使用指南 R.swift &#xff08;原始代码会打包到项目&#xff1f;&#xff09; Pod platform :ios, 12.0 target LBtest do# Comment the next line if you dont want to use dynamic frameworksuse_frameworks!pod R.swift # pod SwiftGen, ~&g…

虚幻UE 特效-Niagara特效实战-雨天

回顾Niagara特效基础知识&#xff1a;虚幻UE 特效-Niagara特效初识 其他两篇实战&#xff1a;虚幻UE 特效-Niagara特效实战-火焰、烛火、虚幻UE 特效-Niagara特效实战-烟雾、喷泉 本篇笔记我们再来实战雨天&#xff0c;雨天主要用到了特效中的事件。 文章目录 一、雨天1、创建雨…

智汇云舟创始人兼总裁周舟:视频孪生赋能智慧城市多元场景建设

1月18日&#xff0c;由知名科技媒体和产业智库泰伯网主办的WIF2023创新先行者论坛暨企业家会员年会于北京成功举办。共有百余位科技公司创始人、管理者、投资人齐聚&#xff0c;研判产业经济趋势&#xff0c;寻找新形势下企业未来发展的新方向、新机会。智汇云舟创始人兼总裁周…

毅速ESU:金属3D打印技术助力模具开发降本增效

模具是工业之母&#xff0c;在高效批产方面极具优势&#xff0c;但随着企业对模具精度、结构复杂性、生产周期和成本的要求日益严格&#xff0c;传统模具制造已经不能完全满足市场需求。在众多的模具加工工艺新技术中&#xff0c;3D打印技术把增材制造理念引入模具行业&#xf…

精品量化公式——“筹码动态”,筹码动态改进版,增加了三个买点信号标识

不多说&#xff0c;直接上效果如图&#xff1a; ► 日线表现 代码评估 技术指标代码评估&#xff1a; 散筹估算: 使用EMA&#xff08;指数移动平均&#xff09;方法计算(WINNER(C*1.1)-WINNER(C*0.9))*70的3日均线&#xff0c;用黄色粗线表示。这是用于估算市场中散户投资者的…

在Linux中安装和配置Node.js与Express.js创建HTTP服务器

在Linux环境中&#xff0c;安装和配置Node.js与Express.js来创建一个HTTP服务器需要一系列的步骤。下面是一个详细的指南&#xff0c;帮助你在Linux上设置这个环境。 步骤1&#xff1a;安装Node.js 首先&#xff0c;你需要确保你的Linux系统已经安装了Node.js。你可以通过以下…