700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Antd vue table动态合并单元格(数据动态+列动态)全

Antd vue table动态合并单元格(数据动态+列动态)全

时间:2020-11-01 17:45:31

相关推荐

Antd vue table动态合并单元格(数据动态+列动态)全

原理:

合并指定字段,按行遍历,相同的地方rowSpan设为0,第一行设为n(n行重复);

table代码:

<a-table :columns="methodColumns" :data-source="PreData(methodData,1)" bordered></a-table>

PreData里的参数:methodData为数据源,1为要合并的列顺序,目前的方法只可以处理单列;

columns写法:

const methodColumns = [{title:"部件",dataIndex:"PartsType",customRender: (value, row) => {const obj = {children: value,attrs: {}};obj.attrs.rowSpan = row.num;return obj;}},{title:"项目",dataIndex:"ParName"},{title:"值",dataIndex:"ParValue"}];

要合并哪一列就在哪处理,这里有一个问题,因为返回来的flag是按行标记的,如果要合并两列以上,而这几列的flag不同,那么可以多标记几个字段,这里只有一个字段num;然后用的时候需要哪个字段就取哪个就行了。

PreData方法:

PreData(data,col){ //给data加上重复行flag 用来合并单元格var num = 1; //计数for(var i=0;i<data.length-1;i++) //遍历所有行和下一行做比较,这里不处理最后一行,因为最后一行没有下一行,会报错{var array = Object.keys(data[i]); //遍历每行data的所有属性var j = col;var index = data[i][array[j]];if(index == data[i+1][array[j]]){ //与下一行相同data[i+1]['num'] = 0;num++;}if(data[i]['num'] === 0){//在上一层已经被判定为0就不需要加1data[i]['num'] = 0;if(data[i+1][array[j]] != data[i][array[j]]){data[i+1-num]['num'] = num; //找到最上面一行}else if(i == data.length-2) //如果整个表的最后一行是0{data[i-num+2]['num'] = num; //找到最上面一行}}else{data[i]['num'] = num;}}data[data.length-1]['num'] = data[data.length-1]['num'] === 0 ? 0 : 1 //最后一行需要赋值0或1return data;}

如有问题,欢迎补充。

第二天我又加了多字段的写法,在外层加了一个循环;本来想写在内层的,按行循环似乎要复杂度小一点,但是在原有的代码上修改的话就不太好实现,主要问题在于计数的时候需要不止一个num,然后第二行时还要找到上一行所有的num;改了半天,最后还是决定写在外层,这就只需要一个num了;

完整代码就不贴了,就在外面加一个foreach,注意要循环需要合并的字段的值而不是索引,然后里面给每行打标记的时候区分开,比如第一个字段的标记叫num1,第二个叫num2,然后就可以在columns里面根据num1和2合并单元格;

今天会试着写一下columns封装的方法,这样就不用每列都写一遍了。

封装columns的方法写好了,如下:

PreCol(data,col){//有几列重复就循环几次col.forEach (function(i){data[i-1].customRender = function (value,row){const obj = {children: value,attrs: {},};obj.attrs.rowSpan = row['num'+i];return obj;}});return data;},

一开始想按列数量循环,后来发现需要判断,改成这样写的话就减少了循环的次数,我好像是傻。

暂时没发现bug,但有个问题,我调试的时候发现这个方法会先return data,然后再走customRender里面的方法,不是很明白为什么。难道内置函数会后执行吗,百度了一下好像又不是这样,希望有大神解答一下。

如有问题,欢迎补充。

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