700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...

asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...

时间:2022-08-16 07:47:20

相关推荐

asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...

需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列。

1.官方文档

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

1.2.两种返回方法

其实就是两种返回值的形式,本文章只用数组形式的返回举例:

methods: {

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

//如果当前是第一行。因为下标从0开始,所以第一行的下标能被整除。

if (rowIndex % 2 === 0) {

//如果当前列是第一行第一列,合并1行,和2列

if (columnIndex === 0) {

return [1, 2];

} else if (columnIndex === 1) {

//如果当前列是第一行第二列,把值清除。注意,不清除的话,值会在后面一列展示,影响布局。

return [0, 0];

}

}

},

}

数组第一个元素代表rowspan(要合并的行数),第二个元素代表colspan(要合并的列数)

1.3 四个传入参数

该方法接收四个传入参数,当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。这4个属性对我们定制化合并单元格很有帮助。要注意的是,行号和列号都是从0开始网上递增的。

1.4深入理解返回值的意义

想要做好合并,首先我们要理解如何合并,以及合并后的数据是如何进行处理的。以数组为例,Element接收第一个参数rowspan和第二个参数colspan,然后根据返回的值进行合并。

如图,如果想将左边的列合并单元格成右边的列,那么只需要在数组中返回return [1,2]就行了,表示合并一行两列。

代码如下:

methods: {

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

//如果是第一列

if (columnIndex === 0||columnIndex ===1) {

//如果当前单元格是第一列和第二列的第一行,进行向下合并单元格

if (rowIndex % 2 === 0) {

return [1, 2];

}else {

//如果当前单元格是第一列和第二列的第二行,值置空(不置空则重复值会存在并向后一行展示,影响布局)

return [0, 0];

}

}

},

}

1.5为什么需要置空操作以及不需要合并的单元格需要控制吗?

先回答后面一个问题,不需要合并操作的单元格不用控制,return[1,1]这种操作不需要。因为单元格就是原子的,是代码控制的最小单位。

置空操作则需要反推下:如果不置空的话有什么影响?

(图片仅作示意,并非真实情况。)

首先我们要知道,当我们合并单元格时,系统并不会把两个单元格的值拼接在一个单元格里。而是会取第一个单元格的值。

Element在操作单元格时,也是取第一个单元格的值,但是不会将第二个单元格的值置空,这就会导致如上图的情况。即,合并是成功了,多出的值没有做处理。

因此,我们需要手动处理,定位到被合并的行或者列,将其值置为空,即返回[0,0]。

2 注意事项

2.1:当我们使用置空操作时一定要注意范围问题,避免不小心,将其他的无辜的值也给置空了。举例如下

methods: {

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

//如果是第一列

if (columnIndex === 0||columnIndex ===1) {

//如果当前单元格是第一列和第二列的第一行,进行向下合并单元格

if (rowIndex % 2 === 0) {

return [1, 2];

}

}else {

//错误操作

return [0, 0];

}

},

}

可以看到,如果像上面那样进行返回,那么除了第一列和第二列,所有的单元格都会被置空。布局突然错乱,可能就是作用域有问题,要认真检查。

2.2 巧用%进行换行合并操作

使用取余函数,可以帮我们确定要操作的行和列,对合并单元格非常有用。

2.3 使用填充法进行不规则表格填充

当我们每个第二行需要自定义表头时,可以将值定位固定值,利用合并单元格的特性,删除重复的固定值。即可进行不规则填充,如下图。

当然,如果是需要小计功能,有单独的方法,我这个只针对自定义第二行的表头。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。