可下拉表格展示子项vue-tree-grid-table踩坑

我总共百度了三种方法，本来使用插件各种报错，不得已自己重写了一个表格，后面有空闲时间了，自己研究了下，这些插件都是可行的，只是要注意下使用的姿势

方法一：使用TreeGrid组件

这一种是基于iview的，所以在使用之前装好iview

git地址： https://github.com/huanglong6828/vue-tree-grid

仿照方法，将TreeGrid.vue直接复制进项目里面

代码如下：

在HelloWorld.vue中使用：

优点是可以把操作放到template中，用不同的命名来区分，还是比较方便
，公司数据不方便写出来。

方法三：重写表格

这个方法比较笨，是我自己是在没办法找到的方法

 

                

                  

                    

                    

                    
序号
                    
事项类型
                    
事项名称
                    
实施编码
                    
部门
                    
录入时间
                    
权力状态
                    
版本号
                    
操作
                  
                
                

                  

                    

                    

                      

                        
                      
                    
                    
{{index+1}}
                    
{{item.taskType}}
                    
{{item.taskName}}
                    
{{item.taskCode}}
                    
{{item.deptName}}
                    
{{item.createTime}}
                    
{{item.qlState}}
                    
{{item.taskVersion}}
                    

                      
                        
                    
                  
                  

                    

                    

                    
{{index+1}}.{{i+1}}
                    
{{el.***}}
                    
{{el.***}}
                    
{{el.***}}
                    
{{el.***}}
                    
{{el.***}}
                    
{{el.***}}
                    
{{el.***}}
                    

                        
                        
                    
                  
                
              

思路是先将头部信息写成固定thead,然后使用tbody循环主项，同时判断如果有子项再次使用tbody标签循环出子项，这种方法其实破坏了标签的作用，也是不得已的方法。

//方法
//是否展示子项
showOrNot(item,index){
        // console.log(item);
        // // item.childrenShow = !item.childrenShow;
        // console.log(item);
        // console.log(item,index);
        // console.log(this.tableData);
        this.tableData3 = [];
        this.tableData.forEach((el,i) => {
          if(i == index){
            el.childrenShow = !el.childrenShow;
          }
          // console.log(el)
          this.tableData3.push(el);
        })
      }

自己重写的话样式可以自己选择，怎么好看怎么改

有问题可联系我，谢谢