element-ui当中table组件的合并⾏和列的属性:span-method的
⽤法
背景
最近基本上都是以Vue来构建项⽬,⽽UI框架也基本上都是使⽤的,所以⾥⾯组件⽤的也是越来越多,今天想记录的是⾮常⾮常⼩的⼀个属性的⽤法。
Table组件
Table组件⽤了真的太多次了,⾥⾯各种属性也基本上都⽤过了,今天就⼜⽤到了⼀个属性:span-method
官⽅介绍:
通过给table传⼊span-method⽅法可以实现合并⾏或列,⽅法的参数是⼀个对象,⾥⾯包含当前⾏row、当前列column、当前⾏号rowIndex、当前列号columnIndex四个属性。该函数可以返回⼀个包含两个元素的数组,第⼀个元素代表rowspan,第⼆个元素代表colspan。也可以返回⼀个键名为rowspan和colspan的对象。
也给了,截取其中的代码:
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
view ui框架}
}
}
这⾥以⾏合并为例:
就这么看这个例⼦,结合⽂档说明,说能看明⽩吧,还是有⼀部分⼈看不明⽩的(我就属于没看明⽩的这⼀类)。
但是,如果加上⼀⾏注释,⾮常简短的注释,那真的是再明⽩不过的了。
if (rowIndex % 2 === 0) { // ⽤于设置合并开始的⾏号
关键点在于这个if判断仅仅是需要到合并开始的⾏,⽽不需要我们到合并在⼀起的所有⾏。
只要到开始合并的⾏,在返回值当中,返回合并的⾏的数量,并且利⽤最后⼀个else,返回return {rowspan: 0, colspan: 0},就能够完成我们合并⾏的需求。
看⼀个具体的例⼦,加上注释:
if (columnIndex === 0) {
if (rowIndex === 0) { // 合并第⼀⾏到第四⾏,从第⼀⾏开始,共4⾏
return {
rowspan: 4,
colspan: 1
}
} else if (rowIndex === 4) { // 合并第五⾏到第九⾏,从第五⾏开始,共5⾏
return {
rowspan: 5,
colspan: 1
}
} else if (rowIndex === 9) { // 合并第10⾏到第14⾏,从第10⾏开始,共5⾏
return {
rowspan: 5,
colspan: 1
}
} else { // 其余被合并的⾏,诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
return {
rowspan: 0,
colspan: 0
}
}
}
是不是明⽩多了。说⽩了,这个⽅法中if所要判断的是仅仅是从哪⼀⾏开始合并,然和返回结果为合并多少⾏、多少列。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论