使用vxe-table合并单元格后增加选中效果
更新时间:2022年09月13日 16:36:12 作者:zqian1994
这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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}
}
}
}
},
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)
在使用reactive定义的变量时,直接赋值会失去响应式,为了清空 filters并确保响应式,可以使用Object.assign({}, filters)或者遍历对象逐个清除属性,本文介绍vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了),感兴趣的朋友一起看看吧2025-02-02
vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route
this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法,本文给大家介绍Vue中this.$router与this.$route的区别 及push()方法,感兴趣的朋友跟随小编一起看看吧2023-10-10


最新评论