H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vuejs或者iview当中表格怎么合并单元格?

最近项目有个表格合并的需求,项目用的iview UI组件,查看了下,vue和iview都没有快捷一点的表格的单元格合并方法,请问哪位大神知道除了原声的合并方式,有什么好一点的合并方式吗?

回答:

微信里的前端群问了一圈,居然没一个会的,看到网上有人实现过,难道真的这么难吗?大神在哪里,求百忙之中指点一二啊,万分感谢

回答:

参见:https://github.com/iview/ivie…

回答:

怎么感觉回答过这个问题。。。
iView 的 Table 目前还没有支持合并单元格。
可以用 HTML 原生的 table ,这与 Vue 无关,你需要了解 html 相关内容。

回答:

我相信我这个办法最简单,也最符合正确答案,不敢独享。

const spanList = $('.' + this.cls + ' table span');
            let val = '';
            let cell = 0;
            let rowspan = 1;
            const cols = this.columnsList.length;
            for(var i = cols; i < spanList.length; i = i + cols){
                if(val == ''){
                    val = spanList[i].innerHTML;
                    cell = i;
                }else{
                    if(val == spanList[i].innerHTML){
                        rowspan ++;
                        $($('.' + this.cls + ' table td')[i - cols]).hide();
                        $($('.' + this.cls + ' table td')[cell - cols]).attr("rowspan",rowspan);
                    }else{
                        val = spanList[i].innerHTML;
                        rowspan = 1;
                        cell = i;
                    }
                }
            }
            

解释一下cls是类名,思路是,每间隔n列,做与上行对比的计算,如果相等,那么隐藏(不要删除,因为有可能要获取本行的值供后续使用),以此类推,此法只适用于行合并,执行的时候要异步,可加在setTImeout(()=>.. 【图省事的办法加个jquery库,如果用原生的话,类推】

本文地址:H5W3 » vuejs或者iview当中表格怎么合并单元格?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址