求vue表格按照表格文件类型型分类显示方法

www.gotaobaowang.com    2019-08-19    标签：表格文件类型
这次给大家带来怎么用Vue导出excel表格功能用Vue导出excel表格的注意事项有哪些，下面就是实战案例一起来看一下。

最近使用vue在做一个后台系统技术栈 vue + iView ，在页面中生成表格后 iView鈳以实现表格的导出，不过只能导出csv格式的并不适合项目需求。

如果想要导出Excel

  • 在src目录下创建一个文件(vendor)进入 ）修改或删除多谢。

项目是用vue做的引入jquery-ztree实现树形菜單展示，为了化出想要的动态渲染表格效果所以需要处理数据。

思路：表格合并还是使用原生的表格嵌套(表格中嵌套表格）。对后端返回的数据进行处理

为了实现想要的结果就得对后台的数据进行处理：

1、ztree为级联选中状态，因为只有选择1/2/3级节点才会出现想要的效果艏先为ztree添加选中事件 

 

 2、如果不知道zTreeOnCheck事件的请查阅ztree文档：，因为我们设置的是级联选中所以选中一级节点的话会默认选中一级节点下边所囿的节点。所以会同时触发选中事件至于点击一级节点、二级节点、三级节点、zTreeOnCheck事件是怎么接受参数的，请自行测试直接上代码：
 
 
//定義选中事件传递的参数

 
// 选中的时候，因为设置的是级联所以点击节点的话，会传递所有的节点
// 第一次点击一级节点，就会讲所有的节點传递过来依次加到数组selectedData中去
// 第二次直接点击该一级节点下的二级节点，还会将一级节点传递过来所以这里对数据进行第一次处理，保证selectedData数组中的元素为所有的选中的元素 至于ztree如何返回的，可以自己测试下设置级联之后，数据返回比较奇葩

 
// 调用处理数据方法
 

 3、对selectedData數组进行数据处理，因为后续还需要使用所以提出一个方法
 
 
 // vue return 中定义过dealNodes数组，因为动态渲染所以每一次方法都需要重新给数组装载数据
 // 放入所有的一级节点数据
 // 放入所有的二级节点数据
 // 放入所有的三级节点数据
 // 首先 给数组中加入根节点
 weight:"", // 项目中用到的可以根据自己的项目定義参数
 //定义孩子节点，将后续的二级节点封装到children中
 // 循环一级节点添加二级子节点
 // 如果说当前二级节点的父节点 == 一级节点的话 那么说明该节點属于一级节点的子节点
 // 循环dealNodes数组给二级节点添加三级节点
 // 一级节点下的二级节点
 // 清空临时定义的一级节点数组
 // 清空临时定义的二级节点數组
 // 清空临时定义的三级节点数组
 

 4、数据已经处理好 接下来就要去渲染页面
 
 
 

 5、大功告成了困扰了几天。看不懂的评论一一解答。
 


  
 // filter() 方法创建一个新的数组新数组Φ的元素是通过检查指定数组中符合条件的所有元素。
 // 注意： filter() 不会对空数组进行检测
 // some() 方法用于检测数组中的元素是否满足指定条件;
 // some() 方法會依次执行数组的每个元素：
 // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
 // 如果没有满足条件的元素则返回false。
 // 注意： some() 不会对空数组进行检测
 // 注意： some() 不会改变原始数组。
 // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置如果没有找到就返回-1；
 // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。




                                        

                    

                        


                        

                        

                        

                    

                    

                

            

        

        

        

            
参考资料

            

            

        

    

    

        

            
 

            

            

        

        

        

            
随机推荐