前言
当前问题使用的ivew 版本:3.4.2
后续版本可能会实现相关功能,请留意官方文档。
背景
最近做的项目使用的是iView框架,有个需求是要对iView的table进行单元格合并,但是iView官方并没有提供单元格合并的API,查阅相关资料后发现网上现有的实现方法都特别复杂,有的方法甚至需要对iView的源码进行修改,这些方法对于我当前的项目都是不可行的,经过思考,我通过修改iView table单元格css样式的方法实现了单元格合并。
思路
合并单元行:
去掉需要合并的单元格的右边框即可,这样在视觉效果上就能实现单元格合并。
合并单元列:
去掉需要合并的单元格的下边框即可。
示例代码
要修改iView table单元格的样式,需要用到官方提供的 cellClassName,具体使用方法可见官方文档:iView table 特定样式。通过为某些单元格设置cellClassName样式来实现去掉右边框或下边框。
合并单元行
export default {
data () {
return {
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'A