-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path4.163675a8c1bfc3078f99.js
1 lines (1 loc) · 5.25 KB
/
4.163675a8c1bfc3078f99.js
1
webpackJsonp([4],{184:function(t,e,n){"use strict";function i(t){A||n(243)}Object.defineProperty(e,"__esModule",{value:!0});var a=n(198),s=n(229),A=!1,r=n(1),l=i,o=r(a.a,s.a,l,"data-v-e4977e36",null);o.options.__file="src\\views\\tree\\index.vue",o.esModule&&Object.keys(o.esModule).some(function(t){return"default"!==t&&"__"!==t.substr(0,2)}),o.options.functional,e.default=o.exports},198:function(t,e,n){"use strict";e.a={data:function(){return{treeData:{parent:{name:"parent",isexpend:!0},name:"me",children:[{name:"child",isexpend:!0}]},styles:{}}}}},215:function(t,e,n){e=t.exports=n(0)(!0),e.push([t.i,"/*\n 这里定义了整个项目的公共的样式\n */\n/*每一个路由页面的标题样式*/\n.title[data-v-e4977e36] {\n font-size: 24px;\n color: #99A9BF;\n margin: 10px;\n}\n/*每一项的标题样式*/\n.title-item[data-v-e4977e36] {\n display: block;\n border-left: 8px solid #D3DCE6;\n color: #E5E9F2;\n font-size: 18px;\n padding-left: 10px;\n margin: 8px;\n}\n/*每一个段落的样式*/\n.content-item[data-v-e4977e36] {\n margin: 10px;\n line-height: 1.5;\n text-indent: 2em;\n width: 90%;\n padding-left: 20px;\n}\n/*去除li的默认样式*/\nul[data-v-e4977e36] {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n","",{version:3,sources:["E:/components/componentsDEMO/src/views/tree/index.vue"],names:[],mappings:"AAAA;;GAEG;AACH,gBAAgB;AAChB;EACE,gBAAgB;EAChB,eAAe;EACf,aAAa;CACd;AACD,YAAY;AACZ;EACE,eAAe;EACf,+BAA+B;EAC/B,eAAe;EACf,gBAAgB;EAChB,mBAAmB;EACnB,YAAY;CACb;AACD,YAAY;AACZ;EACE,aAAa;EACb,iBAAiB;EACjB,iBAAiB;EACjB,WAAW;EACX,mBAAmB;CACpB;AACD,aAAa;AACb;EACE,WAAW;EACX,UAAU;EACV,iBAAiB;CAClB",file:"index.vue",sourcesContent:["/*\n 这里定义了整个项目的公共的样式\n */\n/*每一个路由页面的标题样式*/\n.title {\n font-size: 24px;\n color: #99A9BF;\n margin: 10px;\n}\n/*每一项的标题样式*/\n.title-item {\n display: block;\n border-left: 8px solid #D3DCE6;\n color: #E5E9F2;\n font-size: 18px;\n padding-left: 10px;\n margin: 8px;\n}\n/*每一个段落的样式*/\n.content-item {\n margin: 10px;\n line-height: 1.5;\n text-indent: 2em;\n width: 90%;\n padding-left: 20px;\n}\n/*去除li的默认样式*/\nul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n"],sourceRoot:""}])},229:function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",[n("h2",{staticClass:"title"},[t._v("菜单组件 > 无限级树形组件")]),t._v(" "),n("h3",{staticClass:"title-item"},[t._v("组件说明")]),t._v(" "),n("p",{staticClass:"content-item"},[t._v("\n\t\t无限级树形组件的应用场景也比较广泛，动态菜单，动态目录，分销等级等等。它的难点在于无限级，即它是动态的，所以没有固定的HTML模板，如果是使用Rect来实现，这个不是一个很大的问题，当然对于vue来说，使用render的渲染函数也可以解决动态模板的问题，但是它的逻辑很复杂，对于事件的处理也会加重逻辑的复杂性；然而，幸运的是，vue提供了递归的组件模式可以很好地解决这个问题。所有本组件正是采用vue的递归组件的方法来实现了无限级的树形结构。\n\t\t实现无限极树形组件的另一个难点就是展开和收缩。由于vue的自动更新的追踪体系里，对于数组的直接复制，length属性以及多位数组的变化时无法追踪的，也就是不会自动更新DOM树，所以需要我们进行手动的更新。由于层级的不确定性，所以组成树形的数据必定会是一个不确定维数的多维数组，所以每次展开或者关闭其中一级的时候，对数据的操作要使用Vue的set()接口，这样对于数据的变化，才能及时反映到视图中。\n\t")]),t._v(" "),n("h3",{staticClass:"title-item"},[t._v("示例")]),t._v(" "),n("p",{staticClass:"content-item"},[t._v('\n\t\t在页面中引用该组件其实和其他的组件没什么不同，它的递归组件的实现方法是在组件的内部实现的，所以引用的时候，像正常的组件那样进行引用即可<pg-tree :treeData="treeDate" :styles="styles"></pg-tree>\n\t\t\n\t')]),t._v(" "),n("p",{staticClass:"content-item"},[t._v("\n\t\t在实际的项目中使用的时候，每一个层级的treeData可以是通过请求接口得到的数据，本组件模拟使用了一个本地的treeData的json数据。实际应用中，可以在组件的内部进行接口的请求得到treeData数据。样式也可以自行的修改，对于展开和关闭的按钮，可以使用图片或者字体图标。或者重写符合自己项目的无限级树形组件，只需要知道使用递归组件的方法来实现相关的逻辑即可，但是在使用递归组件的时候，有一点需要特别的注意，那就是递归组件的终止的条件，可以使用v-if进行设置，如果没有设置递归的终止条件，会出现调用栈已满的错误信息。\n\t")]),t._v(" "),n("h3",{staticClass:"title-item"},[t._v("效果")]),t._v(" "),n("p",{staticClass:"content-item"},[t._v("\n\t\t效果如下\n\t\t\n\t")]),t._v(" "),n("pg-tree",{attrs:{treeData:t.treeData}})],1)},a=[];i._withStripped=!0;var s={render:i,staticRenderFns:a};e.a=s},243:function(t,e,n){var i=n(215);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);n(2)("7fda0b28",i,!1)}});