首页 > 其他分享 >antd for vue3 table 使用rowClassName设置样式固定列不生效

antd for vue3 table 使用rowClassName设置样式固定列不生效

时间:2023-10-17 18:11:59浏览次数:35  
标签:rowClassName 样式 vue3 background antd table red

依赖库版本 :

Vue 3 + antd for vue v3. X

样式问题 :固定列背景色不生效,鼠标移入对应行背景色变为初始的白色

columns: [  
  {  
    title: '装置',  
    width: 100,  
    dataIndex: 'areaName',  
    fixed: 'left'  
  },
  ...
  {  
    title: '装置',  
    width: 100,  
    dataIndex: 'areaName',  
    fixed: 'left'  
  },
]
	rowClassName: (record, index) => {
      return record.rushRepair === 1 ? 'table-background-red' : ''
    }
	.table-background-red {
    background: #d33b26;
  }

修改样式后解决

	.table-background-red td {
    background: #d33b26 !important;
  }

标签:rowClassName,样式,vue3,background,antd,table,red
From: https://www.cnblogs.com/windzz/p/17770347.html

相关文章

  • Vue3.2中setup语法糖的使用教程分享
    这篇文章主要为大家详细介绍了Vue3.2中setup语法糖的具体使用方法,文中的示例代码讲解详细,对我们深入了解Vue有一定的帮助,需要的可以参考一下目录2、data数据的使用3、method方法的使用4、watchEffect的使用5、watch的使用6、computed计算属性的使用7、props父子传值的使用8、emit......
  • vue3中引入elementplus以及图标(vue3+vuecli)
    开发背景nodev18.17.0(node-v)npmv8.4.1(npm-v)@vue/cli5.0.8(vue-V)0.用命令行安装elementPlusnpminstallelement-plus--save1.elementplus按需手动导入ElementPlus组件很多,如果导入组件太多,为了更好的管理ElementPlus组件,可将组件作为独立的文件,将不同功能逻辑......
  • 开源项目 | 一款基于NodeJs+Vue3的强大的在线设计图片工具
     一、项目概述一款漂亮且功能强大的在线海报图片设计器,仿稿定设计。适用于海报图片生成、电商分享图、文章长图、视频/公众号封面等多种场景。二、技术特性丝滑的操作体验,丰富的交互细节,基础功能完善采用服务端生成图片,确保多端出图统一性,支持各种CSS特性简易AI......
  • vue3中setup
    和vue2不同的是vue3中的script中带有setup标签里面的setup相当于vue2中的data和methds空间可以放置函数,也可以执行函数在写时需要有return返回值<scriptsetup></script>setup执行发生在页面之前所以不能使用this函数,一般通过ref绑定组件上的值进行修改 使用函数例子......
  • Vue3 + Quasar系列-代码配置以及报错汇总记录(不断更新中)
    1.Vue3+Quasar系列-代码配置打包去掉hash后缀去掉hashhttps://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa2.Vue3+Quasar改变主题背景quasar的样式和其他的框架修改不太一样,需要我们使用动态的方式来进行变更,一般来说有两种方案进行主题修改方案一:......
  • Vue3| Pinia 持久化插件
    对vuex或Pinia里面的内容做本地持久化1.安装插件:npmipinia-plugin-persistedstate2.将插件添加到pinia实例上①main.js里导入持久化插件:importpiniaPluginPersistedstatefrom'pinia-plugin-persistedstate'② app.use(pinia.use(piniaPluginPersistedstate))......
  • Vue3| Pinia 的 action 异步写法
    import{defineStore}from'pinia'import{ref}from'vue'importaxiosfrom'axios'exportconstuseChannelStore=defineStore('channel',()=>{  constchannelList=ref([])  constgetList=()=>......
  • Vue3| Pinia 的语法
    Pinia是Vue的最新状态管理工具,是Vuex的替代品Pinia的优势:1.提供更简单的API(去掉了mutation)2.提供符合组合式风格的API(和Vue3新语法统一)3.去掉了modules的概念,每一个store都是一个独立的模块4.配合TypeScript更加友好,提供可靠的类型推断 Pinia基本......
  • Vue3| 组合式 API——provide 和 inject
    作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信 跨层传递普通数据步骤:1.顶层组件通过provide函数提供数据provide('key', 顶层组件中的数据) 2.底层组件通过inject函数获取数据const message=inject('key')   //'k......
  • Vue3| 模板引用、defineExpose宏函数
    模板引用的概念:通过ref标识获取真实的dom对象或者组件实例对象 使用:1.调用ref函数生成一个ref对象<script setup>import {ref} from 'vue'const h1Ref=ref(null)</script>2.通过ref标识绑定ref对象到标签<script setup>import {ref......