使用vxe-table合并单元格后增加选中效果
更新时间:2022年9月16日 00:21 点击:1119 作者:zqian1994
vxe-table合并单元格后增加选中效果
<vxe-table :data="retrievalList" :row-class-name="setRowClass" @cell-click="selectRow"> <vxe-column field="name" title="姓名"></vxe-column> </vxe-table>
后端返回的JSON格式 (合并单元格需要对数据处理后,通过setMergeCells合并)
注:
相关单元格全部选中
效果图:
data() { return { sourceList: [], // 后端返回的JSON数据 retrievalList: [], // 格式化后的数据 [{},{},{}] } }, methods: { // 设置已选中的单元格类名 setRowClass({row}) { // patId为JSON外层唯一主键,选中后根据主键动态设置类 if (row.patId === this.currentRow.patId) { return 'current-pat'; } }, // 单击选中 selectRow({row}) { // 获取当前合并的单元格整体信息,此处为多条数据的集合 this.currentRow = this.sourceList.find(item => item.patId === row.patId); } }
// scss .vxe-table { .current-pat, .current-pat > td { background-color: #CBECFC !important; } }
所选单元格整体增加背景色,但仅选中单元格特殊标识
注 :
(1)第一列被合并单元格选中样式默认跟随合并后的第一行。
(2)可自行变形,使首列单元格底色与单项选中的单元格一致。
(3)此处存在个BUG,首次点击单元格时未出现选中效果;由于已选择第一种方案,此处未深究,仅做记录。
data() { return { sourceList: [], // 后端返回的JSON数据 retrievalList: [], // 格式化后的数据 [{},{},{}] } }, methods: { // 设置行类名 setRowClass({row}) { if (row.itemId === this.firstItemId) { // itemId为JSON内层nurseOptPatVoList内唯一主键,用于设置被合并列单元格底色 return 'current-first' } else if (row.patId === this.currentRow.patId) { // patId为JSON外层唯一主键,选中后根据主键动态设置类 return 'current-pat' } }, // 单击选中 selectRow({row}) { // 获取当前合并的单元格整体信息,此处为多条数据的集合 this.currentRow = this.sourceList.find(item => item.patId === row.patId); // 获取当前合并的单元格首条信息 let firstItem = this.retrievalList.find(item => item.patId === row.patId); this.firstItemId = firstItem.itemId; }
.vxe-table { .current-pat { background-color: #f00; } .current-first { // 此处不使用important是为了避免背景与选中效果冲突 background-color: #f00; & > .vxe-body--column:first-child { background-color: #f00 !important; } } }
vxe-table自动合并单元格
<vxe-table @cell-click="handleClickCell" :span-method="spanMethods" //自动合并单元格 :data="tableData2"> </vxe-table> spanMethods({row, $rowIndex, column, data}){ let fields = ["pcsname", "fjname"] let cellValue = row[column.property] if (cellValue && fields.includes(column.property)) { let prevRow = data[$rowIndex - 1] let nextRow = data[$rowIndex + 1] if (prevRow && prevRow[column.property] === cellValue) { return {rowspan: 0, colspan: 0} } else { let countRowspan = 1 while (nextRow && nextRow[column.property] === cellValue) { nextRow = data[++countRowspan + $rowIndex] } if (countRowspan > 1) { return {rowspan: countRowspan, colspan: 1} } } } },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/zqian1994/article/details/123438135
相关文章
- 这篇文章主要介绍了intelliJ IDEA 多行选中相同内容的快捷键分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-06
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25Vue初始化中的选项合并之initInternalComponent详解
这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-11- 这篇文章主要为大家详细介绍了C#合并及拆分PDF文件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了JavaScript数组合并案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-08-16
vue 中使用 vxe-table 制作可编辑表格的使用过程
这篇文章主要介绍了vue 中使用 vxe-table 制作可编辑表格的使用过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-13vue+elementui实现点击table中的单元格触发事件--弹框
这篇文章主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了ES2020系列之空值合并运算符 '??',文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-22
- 这篇文章主要为大家详细介绍了C#合并多种格式文件为PDF的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C#实现简单合并word文档的方法,涉及C#针对word文档的读取、插入、保存等技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
C# listview添加combobox到单元格的实现代码
从别处转来的,自己进行了一些小的修改,还不错,你自己先拖一个ListView1和一个ComboBox1,需要的朋友可以参考下...2020-06-25- 今天小编就为大家分享一篇Python-numpy实现灰度图像的分块和合并方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27
- 这篇文章主要介绍了C#实现将选中复选框的信息返回给用户的方法,涉及C#针对复选框操作的相关技巧,需要的朋友可以参考下...2020-06-25
- 今天小编就为大家分享一篇TensorFlow2.0:张量的合并与分割实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-22
- 这篇文章主要介绍了pandas 实现某一列分组,其他列合并成list的案例。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-26
- C# 合并GriewView相同列的小例子,需要的朋友可以参考一下...2020-06-25
Queryable.Union 方法实现json格式的字符串合并的具体实例
这篇文章介绍了Queryable.Union 方法实现json格式的字符串合并的具体实例,有需要的朋友可以参考一下...2021-09-22- 这篇文章主要介绍了使用itextpdf解决PDF合并的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-07-07
- 这篇文章主要介绍了postgresql数据合并,多条数据合并成1条的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
- 网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站,所以这篇文章主要给大家介绍了关于Vue项目打包、合并及压缩优化网页响应速度的相关资料,需要的朋友可以参考下...2021-07-07