vxe-table 将表格指定行设置背景颜色后，选中行、悬浮行样式失效解决。
2024-05-05 05:19:47
目录
- 一、 表格悬浮行、选中行高亮
- 1.效果
- 2.代码
- 二、 初始化表格 指定行设置背景颜色
- 1. 效果
- 2.代码
- 3. 问题
- 三、 解决选中行、悬浮行样式失效
- 1. 效果
- 2.代码
一、 表格悬浮行、选中行高亮
1.效果
2.代码
说明：给表格添加
:row-config="{isHover: true,isCurrent:true}"即可
<template><div><vxe-tableref="xTable"height="400":row-config="{isHover: true,isCurrent:true}":data="tableData"><vxe-column type="seq" width="60"></vxe-column><vxe-column field="name" title="Name"></vxe-column><vxe-column field="age" title="Age" sortable></vxe-column><vxe-column field="address" title="Address" show-overflow></vxe-column></vxe-table></div>
</template><script>
export default {data() {return {tableData: [{ id: 10001, name: 'Test1', role: 'Develop', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', age: 23, address: 'test abc' },{ id: 10005, name: 'Test5', role: 'Develop', age: 30, address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Designer', age: 21, address: 'test abc' },{ id: 10007, name: 'Test7', role: 'Test', age: 29, address: 'test abc' },{ id: 10008, name: 'Test8', role: 'Develop', age: 35, address: 'test abc' }],}}
}
</script>
二、 初始化表格 指定行设置背景颜色
1. 效果
2.代码
- 给表格添加配置
:row-class-name="rowClassName"- 在 methods 里编写过滤行方法
rowClassName，返回值是样式类名- 在样式中设置背景颜色，样式名
::v-deep .my-table .vxe-body--row.row-yellow。其中.my-table是表格类名，防止样式覆盖影响其他表格。
<template><div class="box"><vxe-tableclass="my-table"ref="xTable"height="400":row-config="{isHover: true,isCurrent:true}":data="tableData":row-class-name="rowClassName"><vxe-column type="seq" width="60"></vxe-column><vxe-column field="name" title="Name"></vxe-column><vxe-column field="age" title="Age" sortable></vxe-column><vxe-column field="address" title="Address" show-overflow></vxe-column></vxe-table></div>
</template><script>
export default {data() {return {tableData: [{ id: 10001, name: 'Test1', role: 'Develop', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', age: 23, address: 'test abc' },{ id: 10005, name: 'Test5', role: 'Develop', age: 30, address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Designer', age: 21, address: 'test abc' },{ id: 10007, name: 'Test7', role: 'Test', age: 29, address: 'test abc' },{ id: 10008, name: 'Test8', role: 'Develop', age: 35, address: 'test abc' }],}},methods: {rowClassName({ row }) {if (row.age >= 30) {return 'row-yellow'}}}
}</script><style scoped>
.box {width: 700px;margin: 100px;
}::v-deep .my-table .vxe-body--row.row-yellow {background-color: #e1ed8952;z-index: 99;
}
</style>
3. 问题
- 官方给出的说明如下：
三、 解决选中行、悬浮行样式失效
1. 效果
- 条件成立时，显示初始化样式。悬浮行显示灰色，选中行显示蓝色。
2.代码
通过设置
z-index来调节，具体实现见 style 部分。
<template><div class="box"><vxe-tableclass="my-table"ref="xTable"height="400":row-config="{isHover: true,isCurrent:true}":data="tableData":row-class-name="rowClassName"><vxe-column type="seq" width="60"></vxe-column><vxe-column field="name" title="Name"></vxe-column><vxe-column field="age" title="Age" sortable></vxe-column><vxe-column field="address" title="Address" show-overflow></vxe-column></vxe-table></div>
</template><script>
export default {data() {return {tableData: [{ id: 10001, name: 'Test1', role: 'Develop', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', age: 23, address: 'test abc' },{ id: 10005, name: 'Test5', role: 'Develop', age: 30, address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Designer', age: 21, address: 'test abc' },{ id: 10007, name: 'Test7', role: 'Test', age: 29, address: 'test abc' },{ id: 10008, name: 'Test8', role: 'Develop', age: 35, address: 'test abc' }],}},methods: {rowClassName({ row }) {if (row.age >= 30) {return 'row-yellow'}}}
}</script><style scoped>
.box {width: 700px;margin: 100px;
}::v-deep .my-table .vxe-body--row.row-yellow {background-color: #e1ed8952;z-index: 99;
}::v-deep .my-table .vxe-body--row.row--hover {background-color: #f5f7fa;z-index: 959;
}::v-deep .my-table .vxe-body--row.row--current {background-color: #e6f7ff;z-index: 999;
}
</style>
vxe-table 将表格指定行设置背景颜色后，选中行、悬浮行样式失效解决。相关推荐
- html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决？...
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性 与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
- Hutool如何给Excel按行设置背景颜色
在利用hutool根据某列给Excel设置 背景色时,你可能会遇见,设置背景色不生效或者后面填充的背景色会覆盖前面填充的背景色.下面给出一个已经实现了根据某列条件设置某行背景颜色的案例代码. 目录 1 ...
- html表格单元格设置背景颜色
转载于:https://www.cnblogs.com/wangjian8888/p/6082212.html
- html td无边框颜色,table的td设置背景颜色后边框框消失
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性 与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
- Java 给PDF文档设置背景颜色和背景图片
如题,这篇文章主要介绍如何在Java应用程序中给PDF文档设置背景颜色和背景图片. 使用组件: Spire.PDF for Java 下载Spire.PDF for JAVA包并解压缩,然后从lib文 ...
- Html table 页 实现点击选中tr行 改变背景颜色
Html table 页 实现点击选中tr行 改变背景颜色 table 表格展示数据时没有选中的效果,如果对展示数据 做了一些操作 会导致 不太容易分辨,所以选中效果就很重要,而这个事件需要作用于整个 ...
- VB 设置ListView中指定一行的背景颜色
代码如下: 'SetListViewBGColor(ListView控件名称,要设置的背景颜色行号,颜色值-默认:&HB6B4FF) Public Sub SetListViewBGColor ...
- AndroidStudio设置背景颜色，字体大小，默认显示行号
一.设置字体大小 1.打开 File–>Settings(快捷键 Ctrl+Alt+S) 打开设置面板,默认为白色的主题,如下图所示: 2.选择"Save as",自定义输入 ...
- speedoffice（Excel）表格如何设置背景颜色？
在使用Excel时,我们会输入一些数据或者文字内容,有时候会需要对某些表格进行背景颜色设置,那么Excel表格背景颜色怎么设置呢?大家来一起看看吧. 选中需要设置背景颜色的单元格. 在"主页 ...
最新文章
- linux shell中 if else以及大于、小于、等于逻辑表达式介绍
- iOS开发人员不容错过的10大工具
- 简易 Vue 构建--篇四
- AIX5.3安装oracle10g
- VS2013 调用的目标发生了异常
- java主要用来开发什么_java主要用来开发什么软件
- 【NOI OpenJudge】【1.1】编程基础之输入输出
- python语言程序设计实践教程陈东_《Python程序设计》(陈春晖)【摘要 书评 试读】- 京东图书...
- 【笔记】统计pdf文件中的字数
- 【产品功能】弹性网卡支持私网多IP
- Cesium原理篇：5最长的一帧之影像
- 时代落在英伟达身上的是粒什么沙，国产GPU的机会又在哪？
- linux运行openfoam,OpenFOAM应用的准备工作
- antv图形二次渲染刷新问题
- 网络常见攻击（知识点总结）
- 做好项目成本核算需要注意哪些事项
- Python 学生管理系统+mysql+Flask
- autoit3 自动安装腾讯QQ【版本QQ2011Beta3】
- discuz手机论坛模板 discuz!超简约手机论坛模板
- 弘辽科技：淘宝代购是正品吗？购物要注意什么？