iviewtable求和_iViewtable实现单元格合并
前⾔
当前问题使⽤的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: 'Address',
key: 'address'
}
],
data8: [
{
table设置内边框name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: '',
address: '',
// 为单元格设置样式
cellClassName: {
age: 'merge1',
}
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
]
}
},
}
/* .ivu-table为ivew特定格式，cellClassName使⽤到的类名前⾯必须带着它*/ .ivu-table .merge1 {
border-right: 0;
}
效果：
合并单元列
将上述代码style中的代码修改成：
.ivu-table .merge1 {
border-bottom: 0;
}
效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。