iview的Table设置选中行的背景色

2024-01-20 22:50

本文主要是介绍iview的Table设置选中行的背景色,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过iview官网进行行背景色设置:
Table props:

  • row-class-name
    在这里插入图片描述
<Table row-key="id" :columns="columns" :data="dataList" :row-class-name="rowClassName" @on-row-click="onRowClick">
rowClassName (row, index) {if (row.id=== this.selectId) {return 'table-select-row'} else if (row.children) {return 'table-parent-row'}return ''
}onRowClick(row, index) {this.selectId = row.id
}
.ivu-table /deep/ .table-select-row td {background-color: #8ce2cd !important;
}
.ivu-table /deep/ .table-parent-row td {background-color: #d1e2f5 !important;
}

结果如图:
在这里插入图片描述
在这里插入图片描述

Table 标签的row-class-name 设置的样式和index序号有关!这是iview上Table 的一个对于树形数据bug。
如图中,第三行应有背景色,结果所有子节点index为3的数据也都是这个背景色。

解决方案:
选中行背景色:不同row-class-name属性去设置,通过高亮选中行属性(highlight-row)去设置。

.ivu-table /deep/ .ivu-table-row-highlight td {background-color: #8ce2cd !important;

node行背景色:放弃树形结构,放弃“+”收起展开的功能,通过名称前面加空格来展示结构层次。

这篇关于iview的Table设置选中行的背景色的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/627598

相关文章

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给

Tomcat性能参数设置

转自:http://blog.csdn.net/chinadeng/article/details/6591542 Tomcat性能参数设置 2010 - 12 - 27 Tomcat性能参数设置 博客分类: Java Linux Tomcat 网络应用 多线程 Socket 默认参数不适合生产环境使用,因此需要修改一些参数   1、修改启动时内存参数、并指定J

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

linux下非标准波特率的设置和使用

通常,在linux下面,设置串口使用终端IO的相关函数设置,如tcsetattr等函数,linux内部有一个对常用波特率列表的索引,根据设置的波特率用底层驱动来设置异步通信芯片的寄存器 对于非标准的任意波特率需要用ioctl(fd, TIOCGSERIAL, p)和ioctl(fd, TIOCSSERIAL, p)的配合,ioctl的最后一个参数是struct serial_struct *

win7如何设置SATA硬盘

Win7在安装时设置的是IDE,安装完后需要在注册表中设置为SATA,否则直接设BIOS会不认硬盘,具体如下 注册表子项:HKEY_LOCAL_MACHINE/System/CurrentControlSet/Services/Msahci 找到Start键,将值0改为3

centOS7.0设置默认进入字符界面

刚装的,带有x window桌面,每次都是进的桌面,想改成自动进命令行的。记得以前是修改 /etc/inittab 但是这个版本inittab里的内容不一样了没有id:x:initdefault这一行而且我手动加上也不管用,这个centos 7下 /etc/inittab 的内容 Targets systemd uses targets which serve a simil

设置zookeeper开机自启动/服务化

设置启动zk的用户为zookeeper 设置启动zk的用户为zookeeper用户,而非root用户,这样比较安全。 可以使用root用户进行zookeeper的管理(启动、停止…),但对于追求卓越和安全的的人来说,采用新非root用户管理zookeeper更好。 步骤: 1. 创建用户和用户组 2. 相关目录设置用户和用户组属性 3. 采用zookeeper用户启动进程 设置z

如何设置好看的电脑屏保?电脑屏保设置教程

如何设置好看的电脑屏保?电脑屏保设置教程。大家好,今天小编给大家带来了好看的电脑屏保,教大家如何设置一个好看的电脑屏保。屏保软件很多,今天我们介绍一款比较有特殊的屁屏保软件:芝麻时钟(芝麻时钟 桌面时钟软件 桌面日历 时钟屏保 世界时钟软件下载芝麻时钟是很有个性的时钟软件,支持桌面时钟,任务栏时钟美化,世界时钟,桌面日历,桌面天气,记事便签,时钟屏保。把时钟放到桌面,选择自己喜欢的主题修改任务栏时

jqgrid设置单元格可编辑

1 在单元格的属性列设置为editable。 2 点击编辑按钮的时候,触发某一行设置为edit的状态。 jQuery("#rowed4").jqGrid({url:'server.php?q=2',datatype: "json",colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],colModel