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合并单元格后增加选中效果相关推荐
- vue中用table_Vue中table合并单元格用法
地名 结果 人名 性别 {{item.name}} 已完成 未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
- html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...
电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...
- 合并单元格后打字换行_Excel合并单元格后如何换行
在使用Excel表格编辑文字内容时,有时候出会出字数太多,无法全部显示在一个单元格内,这样就不便于快速查看完整的数据资料,那在Excel合并单元格后要如何换行呢? 接下来,小编跟大家讲解操作方法,新建 ...
- html 合并单元格后居中,excel批量合并单元居中，还在手工点合并后居中吗
很多朋友对于列中相同的内容,都会手工点击菜单栏上的合并后居中,这样手工操作的方式,对数据量不是很大的列,操作没有任何问题,但对于列中数据比较多的情况,如果还是先选中相同的内容,然后再进行合并后居中,这 ...
- element plus的table合并单元格
element的table合并单元格 就element+中的el-table中的span-method方法的使用和遇到的一些问题 如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
- js实现 table合并单元格
** table合并单元格 function uniteTdCells(tableId){var table = document.getElementById(tableId);for (let i ...
- java通过poi生成excel表格(自适应列宽、合并单元格后的边框添加)
具体java通过POI读写Excel的基本使用方法可参考: POI读写Excel的基本使用 1.项目导入依赖: <!--xls--> <dependency><group ...
- Table合并单元格，表格居中，内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
- vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
最新文章
- poj3122（二分算法）
- 罗田用好“大数据”力促扶贫更精准
- python 点的投影变换
- 爬虫学习笔记（二十四）—— pyspider框架
- 区块链基础知识系列第5课 Hyperledger fabric1.0网络中transaction产生以及流转过程
- python 自动化办公 uibot_使用 Python 扩展丰富 UiBot 的功能及在 UiBot 中引用 Python 模块...
- 苹果亚马逊同一天公布无损音质服务、 Google与Flutter、Snap 的 AR 战事等｜Decode the Week...
- 该计算机没有运行windows无线服务器,老司机示范win7系统诊断提示此计算机上没有运行的windows无线服务的恢复方法...
- 【AI视野·今日CV 计算机视觉论文速览 第198期】Fri, 14 May 2021
- 怎么用计算机弹是你,抖音带你去旅行怎么用计算器弹奏_抖音带你去旅行计算器乐谱_管理资源吧...
- AcWing 849. Dijkstra求最短路 I（稠密图Dijkstra模板）
- linux shell 遍历指定目录下的所有文件夹
- Matlab基础入门手册（第一章：入门）
- 收银系统 mysql数据库_解决哗啦啦收银系统数据库备份问题
- Windows Server 2012 R2 安装密钥
- 华为手机升级回退_华为手机版本回退 - 卡饭网
- word模板Normal.dotm文件的生成与替换
- 自己制作机器学习训练和测试使用的二进制数据集（C++）
- 苏州Uber优步司机奖励政策（8月31日至9月6日）
- mysql数据删除后无法恢复数据恢复_Mysql数据库delete删除后数据恢复报告