1 line
131 KiB
JavaScript
1 line
131 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{1427:function(t,s,e){"use strict";e.r(s);var a=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-tree checkable="" @expand="onExpand" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" v-model="checkedKeys" @select="onSelect" :selectedKeys="selectedKeys" :treeData="treeData"/>\n',script:"\n const treeData = [\n {\n title: '0-0',\n key: '0-0',\n children: [\n {\n title: '0-0-0',\n key: '0-0-0',\n children: [\n { title: '0-0-0-0', key: '0-0-0-0' },\n { title: '0-0-0-1', key: '0-0-0-1' },\n { title: '0-0-0-2', key: '0-0-0-2' },\n ],\n },\n {\n title: '0-0-1',\n key: '0-0-1',\n children: [\n { title: '0-0-1-0', key: '0-0-1-0' },\n { title: '0-0-1-1', key: '0-0-1-1' },\n { title: '0-0-1-2', key: '0-0-1-2' },\n ],\n },\n {\n title: '0-0-2',\n key: '0-0-2',\n },\n ],\n },\n {\n title: '0-1',\n key: '0-1',\n children: [\n { title: '0-1-0-0', key: '0-1-0-0' },\n { title: '0-1-0-1', key: '0-1-0-1' },\n { title: '0-1-0-2', key: '0-1-0-2' },\n ],\n },\n {\n title: '0-2',\n key: '0-2',\n },\n ];\n\n export default {\n data() {\n return {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\n treeData,\n };\n },\n watch: {\n checkedKeys(val) {\n console.log('onCheck', val);\n },\n },\n methods: {\n onExpand(expandedKeys) {\n console.log('onExpand', expandedKeys);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n this.expandedKeys = expandedKeys;\n this.autoExpandParent = false;\n },\n onCheck(checkedKeys) {\n console.log('onCheck', checkedKeys);\n this.checkedKeys = checkedKeys;\n },\n onSelect(selectedKeys, info) {\n console.log('onSelect', info);\n this.selectedKeys = selectedKeys;\n },\n },\n };\n",style:null,us:"\n#### basic controlled example\nbasic controlled example\n",cn:"\n#### 受控操作示例\n受控操作示例\n",sourceCode:"<template>\n <a-tree\n checkable\n @expand=\"onExpand\"\n :expandedKeys=\"expandedKeys\"\n :autoExpandParent=\"autoExpandParent\"\n v-model=\"checkedKeys\"\n @select=\"onSelect\"\n :selectedKeys=\"selectedKeys\"\n :treeData=\"treeData\"\n />\n</template>\n<script>\n const treeData = [\n {\n title: '0-0',\n key: '0-0',\n children: [\n {\n title: '0-0-0',\n key: '0-0-0',\n children: [\n { title: '0-0-0-0', key: '0-0-0-0' },\n { title: '0-0-0-1', key: '0-0-0-1' },\n { title: '0-0-0-2', key: '0-0-0-2' },\n ],\n },\n {\n title: '0-0-1',\n key: '0-0-1',\n children: [\n { title: '0-0-1-0', key: '0-0-1-0' },\n { title: '0-0-1-1', key: '0-0-1-1' },\n { title: '0-0-1-2', key: '0-0-1-2' },\n ],\n },\n {\n title: '0-0-2',\n key: '0-0-2',\n },\n ],\n },\n {\n title: '0-1',\n key: '0-1',\n children: [\n { title: '0-1-0-0', key: '0-1-0-0' },\n { title: '0-1-0-1', key: '0-1-0-1' },\n { title: '0-1-0-2', key: '0-1-0-2' },\n ],\n },\n {\n title: '0-2',\n key: '0-2',\n },\n ];\n\n export default {\n data() {\n return {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\n treeData,\n };\n },\n watch: {\n checkedKeys(val) {\n console.log('onCheck', val);\n },\n },\n methods: {\n onExpand(expandedKeys) {\n console.log('onExpand', expandedKeys);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n this.expandedKeys = expandedKeys;\n this.autoExpandParent = false;\n },\n onCheck(checkedKeys) {\n console.log('onCheck', checkedKeys);\n this.checkedKeys = checkedKeys;\n },\n onSelect(selectedKeys, info) {\n console.log('onSelect', info);\n this.selectedKeys = selectedKeys;\n },\n },\n };\n<\/script>\n"}}},[e("template",{slot:"component"},[e("a-tree",{attrs:{checkable:"",expandedKeys:t.expandedKeys,autoExpandParent:t.autoExpandParent,selectedKeys:t.selectedKeys,treeData:t.treeData},on:{expand:t.onExpand,select:t.onSelect},model:{value:t.checkedKeys,callback:function(s){t.checkedKeys=s},expression:"checkedKeys"}})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"受控操作示例"}},[t._v("受控操作示例 "),e("a",{staticClass:"anchor",attrs:{href:"#受控操作示例"}},[t._v("#")])]),t._v(" "),e("p",[t._v("受控操作示例")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"basic-controlled-example"}},[t._v("basic controlled example "),e("a",{staticClass:"anchor",attrs:{href:"#basic-controlled-example"}},[t._v("#")])]),t._v(" "),e("p",[t._v("basic controlled example")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("checkable")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@expand")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onExpand"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":expandedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"expandedKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":autoExpandParent")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"autoExpandParent"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"checkedKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onSelect"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":selectedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"selectedKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":treeData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"treeData"')]),t._v("\n />")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" treeData = [\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-0'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-1'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-1'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-2'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-2'")]),t._v(" },\n ],\n },\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-0'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-1'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-1'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-2'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-2'")]),t._v(" },\n ],\n },\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-2'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-2'")]),t._v(",\n },\n ],\n },\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1-0-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1-0-0'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1-0-1'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1-0-1'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1-0-2'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-1-0-2'")]),t._v(" },\n ],\n },\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-2'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-2'")]),t._v(",\n },\n ];\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("expandedKeys")]),t._v(": ["),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v(", "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1'")]),t._v("],\n "),e("span",{staticClass:"hljs-attr"},[t._v("autoExpandParent")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("checkedKeys")]),t._v(": ["),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v("],\n "),e("span",{staticClass:"hljs-attr"},[t._v("selectedKeys")]),t._v(": [],\n treeData,\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("watch")]),t._v(": {\n checkedKeys(val) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'onCheck'")]),t._v(", val);\n },\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onExpand(expandedKeys) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'onExpand'")]),t._v(", expandedKeys);\n "),e("span",{staticClass:"hljs-comment"},[t._v("// if not set autoExpandParent to false, if children expanded, parent can not collapse.")]),t._v("\n "),e("span",{staticClass:"hljs-comment"},[t._v("// or, you can remove all expanded children keys.")]),t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".expandedKeys = expandedKeys;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".autoExpandParent = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n },\n onCheck(checkedKeys) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'onCheck'")]),t._v(", checkedKeys);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".checkedKeys = checkedKeys;\n },\n onSelect(selectedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'onSelect'")]),t._v(", info);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedKeys = selectedKeys;\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};a._withStripped=!0;var n=[{title:"0-0",key:"0-0",children:[{title:"0-0-0",key:"0-0-0",children:[{title:"0-0-0-0",key:"0-0-0-0"},{title:"0-0-0-1",key:"0-0-0-1"},{title:"0-0-0-2",key:"0-0-0-2"}]},{title:"0-0-1",key:"0-0-1",children:[{title:"0-0-1-0",key:"0-0-1-0"},{title:"0-0-1-1",key:"0-0-1-1"},{title:"0-0-1-2",key:"0-0-1-2"}]},{title:"0-0-2",key:"0-0-2"}]},{title:"0-1",key:"0-1",children:[{title:"0-1-0-0",key:"0-1-0-0"},{title:"0-1-0-1",key:"0-1-0-1"},{title:"0-1-0-2",key:"0-1-0-2"}]},{title:"0-2",key:"0-2"}],l={data:function(){return{expandedKeys:["0-0-0","0-0-1"],autoExpandParent:!0,checkedKeys:["0-0-0"],selectedKeys:[],treeData:n}},watch:{checkedKeys:function(t){console.log("onCheck",t)}},methods:{onExpand:function(t){console.log("onExpand",t),this.expandedKeys=t,this.autoExpandParent=!1},onCheck:function(t){console.log("onCheck",t),this.checkedKeys=t},onSelect:function(t,s){console.log("onSelect",s),this.selectedKeys=t}}},v=e(31),i=Object(v.a)(l,a,[],!1,null,null,null);i.options.__file="components/tree/demo/basic-controlled.md";var _=i.exports,r=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-tree checkable="" :treeData="treeData" :defaultExpandedKeys="[\'0-0-0\', \'0-0-1\']" :defaultSelectedKeys="[\'0-0-0\', \'0-0-1\']" :defaultCheckedKeys="[\'0-0-0\', \'0-0-1\']" @select="this.onSelect" @check="this.onCheck">\n <span slot="title0010" style="color: #1890ff">sss</span>\n </a-tree>\n',script:"\n const treeData = [\n {\n title: 'parent 1',\n key: '0-0',\n children: [\n {\n title: 'parent 1-0',\n key: '0-0-0',\n disabled: true,\n children: [\n { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },\n { title: 'leaf', key: '0-0-0-1' },\n ],\n },\n {\n title: 'parent 1-1',\n key: '0-0-1',\n children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],\n },\n ],\n },\n ];\n\n export default {\n data() {\n return {\n treeData,\n };\n },\n methods: {\n onSelect(selectedKeys, info) {\n console.log('selected', selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n console.log('onCheck', checkedKeys, info);\n },\n },\n };\n",style:null,us:"\n#### Basic\nThe most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.\n",cn:"\n#### 基本用法\n最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。\n",sourceCode:"<template>\n <a-tree\n checkable\n :treeData=\"treeData\"\n :defaultExpandedKeys=\"['0-0-0', '0-0-1']\"\n :defaultSelectedKeys=\"['0-0-0', '0-0-1']\"\n :defaultCheckedKeys=\"['0-0-0', '0-0-1']\"\n @select=\"this.onSelect\"\n @check=\"this.onCheck\"\n >\n <span slot=\"title0010\" style=\"color: #1890ff\">sss</span>\n </a-tree>\n</template>\n<script>\n const treeData = [\n {\n title: 'parent 1',\n key: '0-0',\n children: [\n {\n title: 'parent 1-0',\n key: '0-0-0',\n disabled: true,\n children: [\n { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },\n { title: 'leaf', key: '0-0-0-1' },\n ],\n },\n {\n title: 'parent 1-1',\n key: '0-0-1',\n children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],\n },\n ],\n },\n ];\n\n export default {\n data() {\n return {\n treeData,\n };\n },\n methods: {\n onSelect(selectedKeys, info) {\n console.log('selected', selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n console.log('onCheck', checkedKeys, info);\n },\n },\n };\n<\/script>\n"}}},[e("template",{slot:"component"},[e("a-tree",{attrs:{checkable:"",treeData:t.treeData,defaultExpandedKeys:["0-0-0","0-0-1"],defaultSelectedKeys:["0-0-0","0-0-1"],defaultCheckedKeys:["0-0-0","0-0-1"]},on:{select:this.onSelect,check:this.onCheck}},[e("span",{staticStyle:{color:"#1890ff"},attrs:{slot:"title0010"},slot:"title0010"},[t._v("sss")])])],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"基本用法"}},[t._v("基本用法 "),e("a",{staticClass:"anchor",attrs:{href:"#基本用法"}},[t._v("#")])]),t._v(" "),e("p",[t._v("最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Basic"}},[t._v("Basic "),e("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),e("p",[t._v("The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("checkable")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":treeData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"treeData"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultExpandedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0', '0-0-1']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultSelectedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0', '0-0-1']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultCheckedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0', '0-0-1']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"this.onSelect"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@check")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"this.onCheck"')]),t._v("\n >")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title0010"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"color: #1890ff"')]),t._v(">")]),t._v("sss"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" treeData = [\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'parent 1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'parent 1-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'leaf'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("disableCheckbox")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'leaf'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-1'")]),t._v(" },\n ],\n },\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'parent 1-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [{ "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("slots")]),t._v(": { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'title0010'")]),t._v(" } }],\n },\n ],\n },\n ];\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n treeData,\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelect(selectedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'selected'")]),t._v(", selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'onCheck'")]),t._v(", checkedKeys, info);\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};r._withStripped=!0;var c=[{title:"parent 1",key:"0-0",children:[{title:"parent 1-0",key:"0-0-0",disabled:!0,children:[{title:"leaf",key:"0-0-0-0",disableCheckbox:!0},{title:"leaf",key:"0-0-0-1"}]},{title:"parent 1-1",key:"0-0-1",children:[{key:"0-0-1-0",slots:{title:"title0010"}}]}]}],o={data:function(){return{treeData:c}},methods:{onSelect:function(t,s){console.log("selected",t,s)},onCheck:function(t,s){console.log("onCheck",t,s)}}},d=Object(v.a)(o,r,[],!1,null,null,null);d.options.__file="components/tree/demo/basic.md";var p=d.exports,h=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-tree :treeData="treeData" showIcon="" defaultExpandAll="" :defaultSelectedKeys="[\'0-0-0\']">\n <a-icon type="down" slot="switcherIcon"/>\n <a-icon slot="smile" type="smile-o"/>\n <a-icon slot="meh" type="smile-o"/>\n <template slot="custom" slot-scope="{selected}">\n <a-icon :type="selected ? \'frown\':\'frown-o\'"/>\n </template>\n </a-tree>\n',script:"\n const treeData = [\n {\n title: 'parent 1',\n key: '0-0',\n slots: {\n icon: 'smile',\n },\n children: [\n { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },\n { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },\n ],\n },\n ];\n\n export default {\n data() {\n return {\n treeData,\n };\n },\n methods: {\n onSelect(selectedKeys, info) {\n console.log('selected', selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n console.log('onCheck', checkedKeys, info);\n },\n },\n };\n",style:null,us:"\n#### Customize Icon\nYou can customize icons for different nodes.\n",cn:"\n#### 自定义图标\n可以针对不同的节点定制图标。\n",sourceCode:"<template>\n <a-tree :treeData=\"treeData\" showIcon defaultExpandAll :defaultSelectedKeys=\"['0-0-0']\">\n <a-icon type=\"down\" slot=\"switcherIcon\" />\n <a-icon slot=\"smile\" type=\"smile-o\" />\n <a-icon slot=\"meh\" type=\"smile-o\" />\n <template slot=\"custom\" slot-scope=\"{selected}\">\n <a-icon :type=\"selected ? 'frown':'frown-o'\" />\n </template>\n </a-tree>\n</template>\n<script>\n const treeData = [\n {\n title: 'parent 1',\n key: '0-0',\n slots: {\n icon: 'smile',\n },\n children: [\n { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },\n { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },\n ],\n },\n ];\n\n export default {\n data() {\n return {\n treeData,\n };\n },\n methods: {\n onSelect(selectedKeys, info) {\n console.log('selected', selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n console.log('onCheck', checkedKeys, info);\n },\n },\n };\n<\/script>\n"}}},[e("template",{slot:"component"},[e("a-tree",{attrs:{treeData:t.treeData,showIcon:"",defaultExpandAll:"",defaultSelectedKeys:["0-0-0"]},scopedSlots:t._u([{key:"custom",fn:function(t){var s=t.selected;return[e("a-icon",{attrs:{type:s?"frown":"frown-o"}})]}}])},[e("a-icon",{attrs:{slot:"switcherIcon",type:"down"},slot:"switcherIcon"}),t._v(" "),e("a-icon",{attrs:{slot:"smile",type:"smile-o"},slot:"smile"}),t._v(" "),e("a-icon",{attrs:{slot:"meh",type:"smile-o"},slot:"meh"})],1)],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"自定义图标"}},[t._v("自定义图标 "),e("a",{staticClass:"anchor",attrs:{href:"#自定义图标"}},[t._v("#")])]),t._v(" "),e("p",[t._v("可以针对不同的节点定制图标。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Customize-Icon"}},[t._v("Customize Icon "),e("a",{staticClass:"anchor",attrs:{href:"#Customize-Icon"}},[t._v("#")])]),t._v(" "),e("p",[t._v("You can customize icons for different nodes.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":treeData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"treeData"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("showIcon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("defaultExpandAll")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultSelectedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0']\"")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"down"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"switcherIcon"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"smile-o"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"meh"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"smile-o"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"custom"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"{selected}"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"selected ? 'frown':'frown-o'\"")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" treeData = [\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'parent 1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("slots")]),t._v(": {\n "),e("span",{staticClass:"hljs-attr"},[t._v("icon")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'smile'")]),t._v(",\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'leaf'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("slots")]),t._v(": { "),e("span",{staticClass:"hljs-attr"},[t._v("icon")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'meh'")]),t._v(" } },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'leaf'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),e("span",{staticClass:"hljs-attr"},[t._v("icon")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'custom'")]),t._v(" } },\n ],\n },\n ];\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n treeData,\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelect(selectedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'selected'")]),t._v(", selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'onCheck'")]),t._v(", checkedKeys, info);\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};h._withStripped=!0;var C=[{title:"parent 1",key:"0-0",slots:{icon:"smile"},children:[{title:"leaf",key:"0-0-0",slots:{icon:"meh"}},{title:"leaf",key:"0-0-1",scopedSlots:{icon:"custom"}}]}],y={data:function(){return{treeData:C}},methods:{onSelect:function(t,s){console.log("selected",t,s)},onCheck:function(t,s){console.log("onCheck",t,s)}}},j=Object(v.a)(y,h,[],!1,null,null,null);j.options.__file="components/tree/demo/customized-icon.md";var u=j.exports,f=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-tree class="draggable-tree" :defaultExpandedKeys="expandedKeys" draggable="" @dragenter="onDragEnter" @drop="onDrop" :treeData="gData"/>\n',script:"\n const x = 3;\n const y = 2;\n const z = 1;\n const gData = [];\n\n const generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n };\n generateData(z);\n export default {\n data() {\n return {\n gData,\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n };\n },\n methods: {\n onDragEnter(info) {\n console.log(info);\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n console.log(info);\n const dropKey = info.node.eventKey;\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split('-');\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.gData];\n\n // Find dragObject\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (!info.dropToGap) {\n // Drop on the content\n loop(data, dropKey, item => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n } else if (\n (info.node.children || []).length > 0 && // Has children\n info.node.expanded && // Is expanded\n dropPosition === 1 // On the bottom gap\n ) {\n loop(data, dropKey, item => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.unshift(dragObj);\n });\n } else {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n }\n this.gData = data;\n },\n },\n };\n",style:null,us:"\n#### draggable\nDrag treeNode to insert after the other treeNode or insert into the other parent TreeNode.\n",cn:"\n#### 拖动示例\n将节点拖拽到其他节点内部或前后。\n",sourceCode:"<template>\n <a-tree\n class=\"draggable-tree\"\n :defaultExpandedKeys=\"expandedKeys\"\n draggable\n @dragenter=\"onDragEnter\"\n @drop=\"onDrop\"\n :treeData=\"gData\"\n />\n</template>\n\n<script>\n const x = 3;\n const y = 2;\n const z = 1;\n const gData = [];\n\n const generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n };\n generateData(z);\n export default {\n data() {\n return {\n gData,\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n };\n },\n methods: {\n onDragEnter(info) {\n console.log(info);\n // expandedKeys 需要受控时设置\n // this.expandedKeys = info.expandedKeys\n },\n onDrop(info) {\n console.log(info);\n const dropKey = info.node.eventKey;\n const dragKey = info.dragNode.eventKey;\n const dropPos = info.node.pos.split('-');\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.gData];\n\n // Find dragObject\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (!info.dropToGap) {\n // Drop on the content\n loop(data, dropKey, item => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n } else if (\n (info.node.children || []).length > 0 && // Has children\n info.node.expanded && // Is expanded\n dropPosition === 1 // On the bottom gap\n ) {\n loop(data, dropKey, item => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.unshift(dragObj);\n });\n } else {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n }\n this.gData = data;\n },\n },\n };\n<\/script>\n"}}},[e("template",{slot:"component"},[e("a-tree",{staticClass:"draggable-tree",attrs:{defaultExpandedKeys:t.expandedKeys,draggable:"",treeData:t.gData},on:{dragenter:t.onDragEnter,drop:t.onDrop}})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"拖动示例"}},[t._v("拖动示例 "),e("a",{staticClass:"anchor",attrs:{href:"#拖动示例"}},[t._v("#")])]),t._v(" "),e("p",[t._v("将节点拖拽到其他节点内部或前后。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"draggable"}},[t._v("draggable "),e("a",{staticClass:"anchor",attrs:{href:"#draggable"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"draggable-tree"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultExpandedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"expandedKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("draggable")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@dragenter")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onDragEnter"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@drop")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onDrop"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":treeData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"gData"')]),t._v("\n />")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" x = "),e("span",{staticClass:"hljs-number"},[t._v("3")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" y = "),e("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" z = "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" gData = [];\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" generateData = "),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("_level, _preKey, _tns")]),t._v(") =>")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" preKey = _preKey || "),e("span",{staticClass:"hljs-string"},[t._v("'0'")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" tns = _tns || gData;\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" children = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < x; i++) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" key = "),e("span",{staticClass:"hljs-string"},[t._v("`"),e("span",{staticClass:"hljs-subst"},[t._v("${preKey}")]),t._v("-"),e("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(";\n tns.push({ "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": key, key });\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (i < y) {\n children.push(key);\n }\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (_level < "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(") {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" tns;\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" level = _level - "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(";\n children.forEach("),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("key, index")]),t._v(") =>")]),t._v(" {\n tns[index].children = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" generateData(level, key, tns[index].children);\n });\n };\n generateData(z);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n gData,\n "),e("span",{staticClass:"hljs-attr"},[t._v("expandedKeys")]),t._v(": ["),e("span",{staticClass:"hljs-string"},[t._v("'0-0'")]),t._v(", "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v(", "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-0'")]),t._v("],\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onDragEnter(info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(info);\n "),e("span",{staticClass:"hljs-comment"},[t._v("// expandedKeys 需要受控时设置")]),t._v("\n "),e("span",{staticClass:"hljs-comment"},[t._v("// this.expandedKeys = info.expandedKeys")]),t._v("\n },\n onDrop(info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(info);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dropKey = info.node.eventKey;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dragKey = info.dragNode.eventKey;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dropPos = info.node.pos.split("),e("span",{staticClass:"hljs-string"},[t._v("'-'")]),t._v(");\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dropPosition = info.dropPosition - "),e("span",{staticClass:"hljs-built_in"},[t._v("Number")]),t._v("(dropPos[dropPos.length - "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("]);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" loop = "),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("data, key, callback")]),t._v(") =>")]),t._v(" {\n data.forEach("),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("item, index, arr")]),t._v(") =>")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (item.key === key) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" callback(item, index, arr);\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (item.children) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" loop(item.children, key, callback);\n }\n });\n };\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [...this.gData];\n\n "),e("span",{staticClass:"hljs-comment"},[t._v("// Find dragObject")]),t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(");\n dragObj = item;\n });\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (!info.dropToGap) {\n "),e("span",{staticClass:"hljs-comment"},[t._v("// Drop on the content")]),t._v("\n loop(data, dropKey, item => {\n item.children = item.children || [];\n "),e("span",{staticClass:"hljs-comment"},[t._v("// where to insert 示例添加到尾部，可以是随意位置")]),t._v("\n item.children.push(dragObj);\n });\n } "),e("span",{staticClass:"hljs-keyword"},[t._v("else")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (\n (info.node.children || []).length > "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(" && "),e("span",{staticClass:"hljs-comment"},[t._v("// Has children")]),t._v("\n info.node.expanded && "),e("span",{staticClass:"hljs-comment"},[t._v("// Is expanded")]),t._v("\n dropPosition === "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(" "),e("span",{staticClass:"hljs-comment"},[t._v("// On the bottom gap")]),t._v("\n ) {\n loop(data, dropKey, item => {\n item.children = item.children || [];\n "),e("span",{staticClass:"hljs-comment"},[t._v("// where to insert 示例添加到尾部，可以是随意位置")]),t._v("\n item.children.unshift(dragObj);\n });\n } "),e("span",{staticClass:"hljs-keyword"},[t._v("else")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" ar;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (dropPosition === "),e("span",{staticClass:"hljs-number"},[t._v("-1")]),t._v(") {\n ar.splice(i, "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(", dragObj);\n } "),e("span",{staticClass:"hljs-keyword"},[t._v("else")]),t._v(" {\n ar.splice(i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(", "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(", dragObj);\n }\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".gData = data;\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};f._withStripped=!0;var g=e(15),k=e.n(g),m=[];!function t(s,e,a){for(var n=e||"0",l=a||m,v=[],i=0;i<3;i++){var _=n+"-"+i;l.push({title:_,key:_}),i<2&&v.push(_)}if(s<0)return l;var r=s-1;v.forEach((function(s,e){return l[e].children=[],t(r,s,l[e].children)}))}(1);var x={data:function(){return{gData:m,expandedKeys:["0-0","0-0-0","0-0-0-0"]}},methods:{onDragEnter:function(t){console.log(t)},onDrop:function(t){console.log(t);var s=t.node.eventKey,e=t.dragNode.eventKey,a=t.node.pos.split("-"),n=t.dropPosition-Number(a[a.length-1]),l=function t(s,e,a){s.forEach((function(s,n,l){return s.key===e?a(s,n,l):s.children?t(s.children,e,a):void 0}))},v=[].concat(k()(this.gData)),i=void 0;if(l(v,e,(function(t,s,e){e.splice(s,1),i=t})),t.dropToGap)if((t.node.children||[]).length>0&&t.node.expanded&&1===n)l(v,s,(function(t){t.children=t.children||[],t.children.unshift(i)}));else{var _=void 0,r=void 0;l(v,s,(function(t,s,e){_=e,r=s})),-1===n?_.splice(r,0,i):_.splice(r+1,0,i)}else l(v,s,(function(t){t.children=t.children||[],t.children.push(i)}));this.gData=v}}},b=Object(v.a)(x,f,[],!1,null,null,null);b.options.__file="components/tree/demo/draggable.md";var K=b.exports,w=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-tree :loadData="onLoadData" :treeData="treeData"/>\n',script:"\n export default {\n data() {\n return {\n treeData: [\n { title: 'Expand to load', key: '0' },\n { title: 'Expand to load', key: '1' },\n { title: 'Tree Node', key: '2', isLeaf: true },\n ],\n };\n },\n methods: {\n onLoadData(treeNode) {\n return new Promise(resolve => {\n if (treeNode.dataRef.children) {\n resolve();\n return;\n }\n setTimeout(() => {\n treeNode.dataRef.children = [\n { title: 'Child Node', key: `${treeNode.eventKey}-0` },\n { title: 'Child Node', key: `${treeNode.eventKey}-1` },\n ];\n this.treeData = [...this.treeData];\n resolve();\n }, 1000);\n });\n },\n },\n };\n",style:null,us:"\n#### load data asynchronously\nTo load data asynchronously when click to expand a treeNode.\n",cn:"\n#### 异步数据加载\n点击展开节点，动态加载数据。\n",sourceCode:"<template>\n <a-tree :loadData=\"onLoadData\" :treeData=\"treeData\" />\n</template>\n\n<script>\n export default {\n data() {\n return {\n treeData: [\n { title: 'Expand to load', key: '0' },\n { title: 'Expand to load', key: '1' },\n { title: 'Tree Node', key: '2', isLeaf: true },\n ],\n };\n },\n methods: {\n onLoadData(treeNode) {\n return new Promise(resolve => {\n if (treeNode.dataRef.children) {\n resolve();\n return;\n }\n setTimeout(() => {\n treeNode.dataRef.children = [\n { title: 'Child Node', key: `${treeNode.eventKey}-0` },\n { title: 'Child Node', key: `${treeNode.eventKey}-1` },\n ];\n this.treeData = [...this.treeData];\n resolve();\n }, 1000);\n });\n },\n },\n };\n<\/script>\n"}}},[e("template",{slot:"component"},[e("a-tree",{attrs:{loadData:t.onLoadData,treeData:t.treeData}})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"异步数据加载"}},[t._v("异步数据加载 "),e("a",{staticClass:"anchor",attrs:{href:"#异步数据加载"}},[t._v("#")])]),t._v(" "),e("p",[t._v("点击展开节点，动态加载数据。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"load-data-asynchronously"}},[t._v("load data asynchronously "),e("a",{staticClass:"anchor",attrs:{href:"#load-data-asynchronously"}},[t._v("#")])]),t._v(" "),e("p",[t._v("To load data asynchronously when click to expand a treeNode.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":loadData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onLoadData"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":treeData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"treeData"')]),t._v(" />")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("treeData")]),t._v(": [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Expand to load'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Expand to load'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Tree Node'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("isLeaf")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(" },\n ],\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onLoadData(treeNode) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("new")]),t._v(" "),e("span",{staticClass:"hljs-built_in"},[t._v("Promise")]),t._v("("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("resolve")]),t._v(" =>")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (treeNode.dataRef.children) {\n resolve();\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(";\n }\n setTimeout("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n treeNode.dataRef.children = [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Child Node'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`"),e("span",{staticClass:"hljs-subst"},[t._v("${treeNode.eventKey}")]),t._v("-0`")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Child Node'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`"),e("span",{staticClass:"hljs-subst"},[t._v("${treeNode.eventKey}")]),t._v("-1`")]),t._v(" },\n ];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".treeData = [...this.treeData];\n resolve();\n }, "),e("span",{staticClass:"hljs-number"},[t._v("1000")]),t._v(");\n });\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};w._withStripped=!0;var D={data:function(){return{treeData:[{title:"Expand to load",key:"0"},{title:"Expand to load",key:"1"},{title:"Tree Node",key:"2",isLeaf:!0}]}},methods:{onLoadData:function(t){var s=this;return new Promise((function(e){t.dataRef.children?e():setTimeout((function(){t.dataRef.children=[{title:"Child Node",key:t.eventKey+"-0"},{title:"Child Node",key:t.eventKey+"-1"}],s.treeData=[].concat(k()(s.treeData)),e()}),1e3)}))}}},E=Object(v.a)(D,w,[],!1,null,null,null);E.options.__file="components/tree/demo/dynamic.md";var S=E.exports,N=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-tree showLine="" :defaultExpandedKeys="[\'0-0-0\']" @select="onSelect">\n <a-tree-node key="0-0">\n <span slot="title" style="color: #1890ff">parent 1</span>\n <a-tree-node title="parent 1-0" key="0-0-0">\n <a-tree-node title="leaf" key="0-0-0-0"/>\n <a-tree-node title="leaf" key="0-0-0-1"/>\n <a-tree-node title="leaf" key="0-0-0-2"/>\n </a-tree-node>\n <a-tree-node title="parent 1-1" key="0-0-1">\n <a-tree-node title="leaf" key="0-0-1-0"/>\n </a-tree-node>\n <a-tree-node title="parent 1-2" key="0-0-2">\n <a-tree-node title="leaf" key="0-0-2-0"/>\n <a-tree-node title="leaf" key="0-0-2-1"/>\n </a-tree-node>\n </a-tree-node>\n </a-tree>\n',script:"\n export default {\n methods: {\n onSelect(selectedKeys, info) {\n console.log('selected', selectedKeys, info);\n },\n },\n };\n",style:null,us:"\n#### Tree With Line\nTree With Line\n",cn:"\n#### 连接线\n带连接线的树。\n",sourceCode:'<template>\n <a-tree showLine :defaultExpandedKeys="[\'0-0-0\']" @select="onSelect">\n <a-tree-node key="0-0">\n <span slot="title" style="color: #1890ff">parent 1</span>\n <a-tree-node title="parent 1-0" key="0-0-0">\n <a-tree-node title="leaf" key="0-0-0-0" />\n <a-tree-node title="leaf" key="0-0-0-1" />\n <a-tree-node title="leaf" key="0-0-0-2" />\n </a-tree-node>\n <a-tree-node title="parent 1-1" key="0-0-1">\n <a-tree-node title="leaf" key="0-0-1-0" />\n </a-tree-node>\n <a-tree-node title="parent 1-2" key="0-0-2">\n <a-tree-node title="leaf" key="0-0-2-0" />\n <a-tree-node title="leaf" key="0-0-2-1" />\n </a-tree-node>\n </a-tree-node>\n </a-tree>\n</template>\n\n<script>\n export default {\n methods: {\n onSelect(selectedKeys, info) {\n console.log(\'selected\', selectedKeys, info);\n },\n },\n };\n<\/script>\n'}}},[e("template",{slot:"component"},[e("a-tree",{attrs:{showLine:"",defaultExpandedKeys:["0-0-0"]},on:{select:t.onSelect}},[e("a-tree-node",{key:"0-0"},[e("span",{staticStyle:{color:"#1890ff"},attrs:{slot:"title"},slot:"title"},[t._v("parent 1")]),t._v(" "),e("a-tree-node",{key:"0-0-0",attrs:{title:"parent 1-0"}},[e("a-tree-node",{key:"0-0-0-0",attrs:{title:"leaf"}}),t._v(" "),e("a-tree-node",{key:"0-0-0-1",attrs:{title:"leaf"}}),t._v(" "),e("a-tree-node",{key:"0-0-0-2",attrs:{title:"leaf"}})],1),t._v(" "),e("a-tree-node",{key:"0-0-1",attrs:{title:"parent 1-1"}},[e("a-tree-node",{key:"0-0-1-0",attrs:{title:"leaf"}})],1),t._v(" "),e("a-tree-node",{key:"0-0-2",attrs:{title:"parent 1-2"}},[e("a-tree-node",{key:"0-0-2-0",attrs:{title:"leaf"}}),t._v(" "),e("a-tree-node",{key:"0-0-2-1",attrs:{title:"leaf"}})],1)],1)],1)],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"连接线"}},[t._v("连接线 "),e("a",{staticClass:"anchor",attrs:{href:"#连接线"}},[t._v("#")])]),t._v(" "),e("p",[t._v("带连接线的树。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Tree-With-Line"}},[t._v("Tree With Line "),e("a",{staticClass:"anchor",attrs:{href:"#Tree-With-Line"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Tree With Line")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("showLine")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultExpandedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0']\"")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onSelect"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"color: #1890ff"')]),t._v(">")]),t._v("parent 1"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"parent 1-0"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-0"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-0-0"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-0-1"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-0-2"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"parent 1-1"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-1"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-1-0"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"parent 1-2"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-2"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-2-0"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-2-1"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelect(selectedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'selected'")]),t._v(", selectedKeys, info);\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};N._withStripped=!0;var P={methods:{onSelect:function(t,s){console.log("selected",t,s)}}},T=Object(v.a)(P,N,[],!1,null,null,null);T.options.__file="components/tree/demo/line.md";var L=T.exports,O=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange"/>\n <a-tree @expand="onExpand" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" :treeData="gData">\n <template slot="title" slot-scope="{title}">\n <span v-if="title.indexOf(searchValue) > -1">\n {{title.substr(0, title.indexOf(searchValue))}}\n <span style="color: #f50">{{searchValue}}</span>\n {{title.substr(title.indexOf(searchValue) + searchValue.length)}}\n </span>\n <span v-else="">{{title}}</span>\n </template>\n </a-tree>\n </div>\n',script:"\n const x = 3;\n const y = 2;\n const z = 1;\n const gData = [];\n\n const generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key, scopedSlots: { title: 'title' } });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n };\n generateData(z);\n\n const dataList = [];\n const generateList = data => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const key = node.key;\n dataList.push({ key, title: key });\n if (node.children) {\n generateList(node.children, node.key);\n }\n }\n };\n generateList(gData);\n\n const getParentKey = (key, tree) => {\n let parentKey;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some(item => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey;\n };\n export default {\n data() {\n return {\n expandedKeys: [],\n searchValue: '',\n autoExpandParent: true,\n gData,\n };\n },\n methods: {\n onExpand(expandedKeys) {\n this.expandedKeys = expandedKeys;\n this.autoExpandParent = false;\n },\n onChange(e) {\n const value = e.target.value;\n const expandedKeys = dataList\n .map(item => {\n if (item.key.indexOf(value) > -1) {\n return getParentKey(item.key, gData);\n }\n return null;\n })\n .filter((item, i, self) => item && self.indexOf(item) === i);\n Object.assign(this, {\n expandedKeys,\n searchValue: value,\n autoExpandParent: true,\n });\n },\n },\n };\n",style:null,us:"\n#### Searchable\nSearchable Tree.\n",cn:"\n#### 可搜索\n可搜索的树。\n",sourceCode:'<template>\n <div>\n <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />\n <a-tree\n @expand="onExpand"\n :expandedKeys="expandedKeys"\n :autoExpandParent="autoExpandParent"\n :treeData="gData"\n >\n <template slot="title" slot-scope="{title}">\n <span v-if="title.indexOf(searchValue) > -1">\n {{title.substr(0, title.indexOf(searchValue))}}\n <span style="color: #f50">{{searchValue}}</span>\n {{title.substr(title.indexOf(searchValue) + searchValue.length)}}\n </span>\n <span v-else>{{title}}</span>\n </template>\n </a-tree>\n </div>\n</template>\n\n<script>\n const x = 3;\n const y = 2;\n const z = 1;\n const gData = [];\n\n const generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || \'0\';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key, scopedSlots: { title: \'title\' } });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n };\n generateData(z);\n\n const dataList = [];\n const generateList = data => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const key = node.key;\n dataList.push({ key, title: key });\n if (node.children) {\n generateList(node.children, node.key);\n }\n }\n };\n generateList(gData);\n\n const getParentKey = (key, tree) => {\n let parentKey;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some(item => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey;\n };\n export default {\n data() {\n return {\n expandedKeys: [],\n searchValue: \'\',\n autoExpandParent: true,\n gData,\n };\n },\n methods: {\n onExpand(expandedKeys) {\n this.expandedKeys = expandedKeys;\n this.autoExpandParent = false;\n },\n onChange(e) {\n const value = e.target.value;\n const expandedKeys = dataList\n .map(item => {\n if (item.key.indexOf(value) > -1) {\n return getParentKey(item.key, gData);\n }\n return null;\n })\n .filter((item, i, self) => item && self.indexOf(item) === i);\n Object.assign(this, {\n expandedKeys,\n searchValue: value,\n autoExpandParent: true,\n });\n },\n },\n };\n<\/script>\n'}}},[e("template",{slot:"component"},[e("div",[e("a-input-search",{staticStyle:{"margin-bottom":"8px"},attrs:{placeholder:"Search"},on:{change:t.onChange}}),t._v(" "),e("a-tree",{attrs:{expandedKeys:t.expandedKeys,autoExpandParent:t.autoExpandParent,treeData:t.gData},on:{expand:t.onExpand},scopedSlots:t._u([{key:"title",fn:function(s){var a=s.title;return[a.indexOf(t.searchValue)>-1?e("span",[t._v("\n "+t._s(a.substr(0,a.indexOf(t.searchValue)))+"\n "),e("span",{staticStyle:{color:"#f50"}},[t._v(t._s(t.searchValue))]),t._v("\n "+t._s(a.substr(a.indexOf(t.searchValue)+t.searchValue.length))+"\n ")]):e("span",[t._v(t._s(a))])]}}])})],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"可搜索"}},[t._v("可搜索 "),e("a",{staticClass:"anchor",attrs:{href:"#可搜索"}},[t._v("#")])]),t._v(" "),e("p",[t._v("可搜索的树。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Searchable"}},[t._v("Searchable "),e("a",{staticClass:"anchor",attrs:{href:"#Searchable"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Searchable Tree.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-input-search")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"margin-bottom: 8px"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"Search"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@expand")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onExpand"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":expandedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"expandedKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":autoExpandParent")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"autoExpandParent"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":treeData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"gData"')]),t._v("\n >")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"{title}"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title.indexOf(searchValue) > -1"')]),t._v(">")]),t._v("\n "),e("span",[t._v("{{")]),t._v("title.substr(0, title.indexOf(searchValue))"),e("span",[t._v("}}")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"color: #f50"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("searchValue"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),e("span",[t._v("{{")]),t._v("title.substr(title.indexOf(searchValue) + searchValue.length)"),e("span",[t._v("}}")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("v-else")]),t._v(">")]),e("span",[t._v("{{")]),t._v("title"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" x = "),e("span",{staticClass:"hljs-number"},[t._v("3")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" y = "),e("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" z = "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" gData = [];\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" generateData = "),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("_level, _preKey, _tns")]),t._v(") =>")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" preKey = _preKey || "),e("span",{staticClass:"hljs-string"},[t._v("'0'")]),t._v(";\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" tns = _tns || gData;\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" children = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < x; i++) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" key = "),e("span",{staticClass:"hljs-string"},[t._v("`"),e("span",{staticClass:"hljs-subst"},[t._v("${preKey}")]),t._v("-"),e("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(";\n tns.push({ "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": key, key, "),e("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'title'")]),t._v(" } });\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (i < y) {\n children.push(key);\n }\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (_level < "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(") {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" tns;\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" level = _level - "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(";\n children.forEach("),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("key, index")]),t._v(") =>")]),t._v(" {\n tns[index].children = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" generateData(level, key, tns[index].children);\n });\n };\n generateData(z);\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dataList = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" generateList = "),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("data")]),t._v(" =>")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < data.length; i++) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" node = data[i];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" key = node.key;\n dataList.push({ key, "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": key });\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (node.children) {\n generateList(node.children, node.key);\n }\n }\n };\n generateList(gData);\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" getParentKey = "),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("key, tree")]),t._v(") =>")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" parentKey;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < tree.length; i++) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" node = tree[i];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (node.children) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (node.children.some("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" item.key === key)) {\n parentKey = node.key;\n } "),e("span",{staticClass:"hljs-keyword"},[t._v("else")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" parentKey;\n };\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("expandedKeys")]),t._v(": [],\n "),e("span",{staticClass:"hljs-attr"},[t._v("searchValue")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("''")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("autoExpandParent")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n gData,\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onExpand(expandedKeys) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".expandedKeys = expandedKeys;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".autoExpandParent = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n },\n onChange(e) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" value = e.target.value;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" expandedKeys = dataList\n .map("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (item.key.indexOf(value) > "),e("span",{staticClass:"hljs-number"},[t._v("-1")]),t._v(") {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" getParentKey(item.key, gData);\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),e("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(";\n })\n .filter("),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("item, i, self")]),t._v(") =>")]),t._v(" item && self.indexOf(item) === i);\n "),e("span",{staticClass:"hljs-built_in"},[t._v("Object")]),t._v(".assign("),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(", {\n expandedKeys,\n "),e("span",{staticClass:"hljs-attr"},[t._v("searchValue")]),t._v(": value,\n "),e("span",{staticClass:"hljs-attr"},[t._v("autoExpandParent")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n });\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};O._withStripped=!0;var I=e(2),$=e.n(I),A=[];!function t(s,e,a){for(var n=e||"0",l=a||A,v=[],i=0;i<3;i++){var _=n+"-"+i;l.push({title:_,key:_,scopedSlots:{title:"title"}}),i<2&&v.push(_)}if(s<0)return l;var r=s-1;v.forEach((function(s,e){return l[e].children=[],t(r,s,l[e].children)}))}(1);var F=[];!function t(s){for(var e=0;e<s.length;e++){var a=s[e],n=a.key;F.push({key:n,title:n}),a.children&&t(a.children,a.key)}}(A);var z={data:function(){return{expandedKeys:[],searchValue:"",autoExpandParent:!0,gData:A}},methods:{onExpand:function(t){this.expandedKeys=t,this.autoExpandParent=!1},onChange:function(t){var s=t.target.value,e=F.map((function(t){return t.key.indexOf(s)>-1?function t(s,e){for(var a=void 0,n=0;n<e.length;n++){var l=e[n];l.children&&(l.children.some((function(t){return t.key===s}))?a=l.key:t(s,l.children)&&(a=t(s,l.children)))}return a}(t.key,A):null})).filter((function(t,s,e){return t&&e.indexOf(t)===s}));$()(this,{expandedKeys:e,searchValue:s,autoExpandParent:!0})}}},V=Object(v.a)(z,O,[],!1,null,null,null);V.options.__file="components/tree/demo/search.md";var W=V.exports,R=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-directory-tree multiple="" defaultExpandAll="" @select="onSelect" @expand="onExpand">\n <a-tree-node title="parent 0" key="0-0">\n <a-tree-node title="leaf 0-0" key="0-0-0" isLeaf=""/>\n <a-tree-node title="leaf 0-1" key="0-0-1" isLeaf=""/>\n </a-tree-node>\n <a-tree-node title="parent 1" key="0-1">\n <a-tree-node title="leaf 1-0" key="0-1-0" isLeaf=""/>\n <a-tree-node title="leaf 1-1" key="0-1-1" isLeaf=""/>\n </a-tree-node>\n </a-directory-tree>\n',script:"\n export default {\n methods: {\n onSelect(keys) {\n console.log('Trigger Select', keys);\n },\n onExpand() {\n console.log('Trigger Expand');\n },\n },\n };\n",style:null,us:"\n#### Directory\nBuilt-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` selection.\n",cn:"\n#### 目录\n内置的目录树，`multiple` 模式支持 `ctrl(Windows)` / `command(Mac)` 复选。\n",sourceCode:'<template>\n <a-directory-tree multiple defaultExpandAll @select="onSelect" @expand="onExpand">\n <a-tree-node title="parent 0" key="0-0">\n <a-tree-node title="leaf 0-0" key="0-0-0" isLeaf />\n <a-tree-node title="leaf 0-1" key="0-0-1" isLeaf />\n </a-tree-node>\n <a-tree-node title="parent 1" key="0-1">\n <a-tree-node title="leaf 1-0" key="0-1-0" isLeaf />\n <a-tree-node title="leaf 1-1" key="0-1-1" isLeaf />\n </a-tree-node>\n </a-directory-tree>\n</template>\n<script>\n export default {\n methods: {\n onSelect(keys) {\n console.log(\'Trigger Select\', keys);\n },\n onExpand() {\n console.log(\'Trigger Expand\');\n },\n },\n };\n<\/script>\n'}}},[e("template",{slot:"component"},[e("a-directory-tree",{attrs:{multiple:"",defaultExpandAll:""},on:{select:t.onSelect,expand:t.onExpand}},[e("a-tree-node",{key:"0-0",attrs:{title:"parent 0"}},[e("a-tree-node",{key:"0-0-0",attrs:{title:"leaf 0-0",isLeaf:""}}),t._v(" "),e("a-tree-node",{key:"0-0-1",attrs:{title:"leaf 0-1",isLeaf:""}})],1),t._v(" "),e("a-tree-node",{key:"0-1",attrs:{title:"parent 1"}},[e("a-tree-node",{key:"0-1-0",attrs:{title:"leaf 1-0",isLeaf:""}}),t._v(" "),e("a-tree-node",{key:"0-1-1",attrs:{title:"leaf 1-1",isLeaf:""}})],1)],1)],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"目录"}},[t._v("目录 "),e("a",{staticClass:"anchor",attrs:{href:"#目录"}},[t._v("#")])]),t._v(" "),e("p",[t._v("内置的目录树，"),e("code",[t._v("multiple")]),t._v(" 模式支持 "),e("code",[t._v("ctrl(Windows)")]),t._v(" / "),e("code",[t._v("command(Mac)")]),t._v(" 复选。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Directory"}},[t._v("Directory "),e("a",{staticClass:"anchor",attrs:{href:"#Directory"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Built-in directory tree. "),e("code",[t._v("multiple")]),t._v(" support "),e("code",[t._v("ctrl(Windows)")]),t._v(" / "),e("code",[t._v("command(Mac)")]),t._v(" selection.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-directory-tree")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("multiple")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("defaultExpandAll")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onSelect"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("@expand")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onExpand"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"parent 0"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf 0-0"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-0"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("isLeaf")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf 0-1"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-0-1"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("isLeaf")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"parent 1"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-1"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf 1-0"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-1-0"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("isLeaf")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"leaf 1-1"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0-1-1"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("isLeaf")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-tree-node")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-directory-tree")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelect(keys) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'Trigger Select'")]),t._v(", keys);\n },\n onExpand() {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'Trigger Expand'")]),t._v(");\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};R._withStripped=!0;var X={methods:{onSelect:function(t){console.log("Trigger Select",t)},onExpand:function(){console.log("Trigger Expand")}}},B=Object(v.a)(X,R,[],!1,null,null,null);B.options.__file="components/tree/demo/directory.md";var H=B.exports,Q=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-tree checkable="" :treeData="treeData" :defaultExpandedKeys="[\'0-0-0\', \'0-0-1\']" :defaultSelectedKeys="[\'0-0-0\', \'0-0-1\']" :defaultCheckedKeys="[\'0-0-0\', \'0-0-1\']" @select="this.onSelect" @check="this.onCheck" :replaceFields="replaceFields"/>\n',script:"\n const treeData = [\n {\n name: 'parent 1',\n key: '0-0',\n child: [\n {\n name: '张晨成',\n key: '0-0-0',\n disabled: true,\n child: [\n { name: 'leaf', key: '0-0-0-0', disableCheckbox: true },\n { name: 'leaf', key: '0-0-0-1' },\n ],\n },\n {\n name: 'parent 1-1',\n key: '0-0-1',\n child: [{ key: '0-0-1-0', name:'zcvc' }],\n },\n ],\n },\n ];\n\n export default {\n data() {\n return {\n treeData,\n replaceFields:{\n children:'child',\n title:'name'\n }\n };\n },\n methods: {\n onSelect(selectedKeys, info) {\n console.log('selected', selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n console.log('onCheck', checkedKeys, info);\n },\n },\n };\n",style:null,us:"\n#### ReplaceFields\nReplace the title,key and children fields in treeNode with the corresponding fields in treeData.\n",cn:"\n#### 自定义TreeNode字段\n替换treeNode中 title,key,children字段为treeData中对应的字段\n",sourceCode:"<template>\n <a-tree\n checkable\n :treeData=\"treeData\"\n :defaultExpandedKeys=\"['0-0-0', '0-0-1']\"\n :defaultSelectedKeys=\"['0-0-0', '0-0-1']\"\n :defaultCheckedKeys=\"['0-0-0', '0-0-1']\"\n @select=\"this.onSelect\"\n @check=\"this.onCheck\"\n :replaceFields=\"replaceFields\"/>\n</template>\n<script>\n const treeData = [\n {\n name: 'parent 1',\n key: '0-0',\n child: [\n {\n name: '张晨成',\n key: '0-0-0',\n disabled: true,\n child: [\n { name: 'leaf', key: '0-0-0-0', disableCheckbox: true },\n { name: 'leaf', key: '0-0-0-1' },\n ],\n },\n {\n name: 'parent 1-1',\n key: '0-0-1',\n child: [{ key: '0-0-1-0', name:'zcvc' }],\n },\n ],\n },\n ];\n\n export default {\n data() {\n return {\n treeData,\n replaceFields:{\n children:'child',\n title:'name'\n }\n };\n },\n methods: {\n onSelect(selectedKeys, info) {\n console.log('selected', selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n console.log('onCheck', checkedKeys, info);\n },\n },\n };\n<\/script>\n"}}},[e("template",{slot:"component"},[e("a-tree",{attrs:{checkable:"",treeData:t.treeData,defaultExpandedKeys:["0-0-0","0-0-1"],defaultSelectedKeys:["0-0-0","0-0-1"],defaultCheckedKeys:["0-0-0","0-0-1"],replaceFields:t.replaceFields},on:{select:this.onSelect,check:this.onCheck}})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"自定义TreeNode字段"}},[t._v("自定义TreeNode字段 "),e("a",{staticClass:"anchor",attrs:{href:"#自定义TreeNode字段"}},[t._v("#")])]),t._v(" "),e("p",[t._v("替换treeNode中 title,key,children字段为treeData中对应的字段")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"ReplaceFields"}},[t._v("ReplaceFields "),e("a",{staticClass:"anchor",attrs:{href:"#ReplaceFields"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Replace the title,key and children fields in treeNode with the corresponding fields in treeData.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-tree")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("checkable")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":treeData")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"treeData"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultExpandedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0', '0-0-1']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultSelectedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0', '0-0-1']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":defaultCheckedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['0-0-0', '0-0-1']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"this.onSelect"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@check")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"this.onCheck"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":replaceFields")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"replaceFields"')]),t._v("/>")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" treeData = [\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'parent 1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("child")]),t._v(": [\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'张晨成'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("child")]),t._v(": [\n { "),e("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'leaf'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("disableCheckbox")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(" },\n { "),e("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'leaf'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-0-1'")]),t._v(" },\n ],\n },\n {\n "),e("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'parent 1-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("child")]),t._v(": [{ "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'0-0-1-0'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(":"),e("span",{staticClass:"hljs-string"},[t._v("'zcvc'")]),t._v(" }],\n },\n ],\n },\n ];\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n treeData,\n "),e("span",{staticClass:"hljs-attr"},[t._v("replaceFields")]),t._v(":{\n "),e("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(":"),e("span",{staticClass:"hljs-string"},[t._v("'child'")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(":"),e("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v("\n }\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelect(selectedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'selected'")]),t._v(", selectedKeys, info);\n },\n onCheck(checkedKeys, info) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'onCheck'")]),t._v(", checkedKeys, info);\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Q._withStripped=!0;var G=[{name:"parent 1",key:"0-0",child:[{name:"张晨成",key:"0-0-0",disabled:!0,child:[{name:"leaf",key:"0-0-0-0",disableCheckbox:!0},{name:"leaf",key:"0-0-0-1"}]},{name:"parent 1-1",key:"0-0-1",child:[{key:"0-0-1-0",name:"zcvc"}]}]}],M={data:function(){return{treeData:G,replaceFields:{children:"child",title:"name"}}},methods:{onSelect:function(t,s){console.log("selected",t,s)},onCheck:function(t,s){console.log("onCheck",t,s)}}},Y=Object(v.a)(M,Q,[],!1,null,null,null);Y.options.__file="components/tree/demo/replaceFields.md";var U=Y.exports,J=function(){var t=this.$createElement;this._self._c;return this._m(0)};J._withStripped=!0;var q=Object(v.a)({},J,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("h3",{attrs:{id:"Tree-props"}},[t._v("Tree props "),e("a",{staticClass:"anchor",attrs:{href:"#Tree-props"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("treeData")]),t._v(" "),e("td",[t._v("节点的配置描述，具体项见下表, 1.1.4 之前的版本使用"),e("code",{pre:!0},[t._v("treeNodes")])]),t._v(" "),e("td",[t._v("array")]),t._v(" "),e("td",[t._v("--")])]),t._v(" "),e("tr",[e("td",[t._v("replaceFields")]),t._v(" "),e("td",[t._v("替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("{children:'children', title:'title', key:'key' }")])]),t._v(" "),e("tr",[e("td",[t._v("autoExpandParent")]),t._v(" "),e("td",[t._v("是否自动展开父节点")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("checkable")]),t._v(" "),e("td",[t._v("节点前添加 Checkbox 复选框")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("checkedKeys(v-model)")]),t._v(" "),e("td",[t._v("（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置"),e("code",{pre:!0},[t._v("checkable")]),t._v("和"),e("code",{pre:!0},[t._v("checkStrictly")]),t._v("，它是一个有"),e("code",{pre:!0},[t._v("checked")]),t._v("和"),e("code",{pre:!0},[t._v("halfChecked")]),t._v("属性的对象，并且父子节点的选中与否不再关联")]),t._v(" "),e("td",[t._v("string[] | number[] | {checked: string[] | number[], halfChecked: string[] | number[]}")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("checkStrictly")]),t._v(" "),e("td",[t._v("checkable 状态下节点选择完全受控（父子节点选中状态不再关联）")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("defaultCheckedKeys")]),t._v(" "),e("td",[t._v("默认选中复选框的树节点")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("defaultExpandAll")]),t._v(" "),e("td",[t._v("默认展开所有树节点")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("defaultExpandedKeys")]),t._v(" "),e("td",[t._v("默认展开指定的树节点")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("defaultExpandParent")]),t._v(" "),e("td",[t._v("默认展开父节点")]),t._v(" "),e("td",[t._v("bool")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("defaultSelectedKeys")]),t._v(" "),e("td",[t._v("默认选中的树节点")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("disabled")]),t._v(" "),e("td",[t._v("将树禁用")]),t._v(" "),e("td",[t._v("bool")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("draggable")]),t._v(" "),e("td",[t._v("设置节点可拖拽")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("expandedKeys(.sync)")]),t._v(" "),e("td",[t._v("（受控）展开指定的树节点")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("filterTreeNode")]),t._v(" "),e("td",[t._v("按需筛选树节点（高亮），返回 true")]),t._v(" "),e("td",[t._v("function(node)")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("loadData")]),t._v(" "),e("td",[t._v("异步加载数据")]),t._v(" "),e("td",[t._v("function(node)")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("loadedKeys")]),t._v(" "),e("td",[t._v("（受控）已经加载的节点，需要配合 "),e("code",{pre:!0},[t._v("loadData")]),t._v(" 使用")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("multiple")]),t._v(" "),e("td",[t._v("支持点选多个节点（节点本身）")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("selectedKeys(.sync)")]),t._v(" "),e("td",[t._v("（受控）设置选中的树节点")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("showIcon")]),t._v(" "),e("td",[t._v("是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("switcherIcon")]),t._v(" "),e("td",[t._v("自定义树节点的展开/折叠图标")]),t._v(" "),e("td",[t._v("slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("showLine")]),t._v(" "),e("td",[t._v("是否展示连接线")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])])])]),t._v(" "),e("h3",{attrs:{id:"事件"}},[t._v("事件 "),e("a",{staticClass:"anchor",attrs:{href:"#事件"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("回调参数")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("check")]),t._v(" "),e("td",[t._v("点击复选框触发")]),t._v(" "),e("td",[t._v("function(checkedKeys, e:{checked: bool, checkedNodes, node, event})")])]),t._v(" "),e("tr",[e("td",[t._v("dragend")]),t._v(" "),e("td",[t._v("dragend 触发时调用")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("dragenter")]),t._v(" "),e("td",[t._v("dragenter 触发时调用")]),t._v(" "),e("td",[t._v("function({event, node, expandedKeys})")])]),t._v(" "),e("tr",[e("td",[t._v("dragleave")]),t._v(" "),e("td",[t._v("dragleave 触发时调用")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("dragover")]),t._v(" "),e("td",[t._v("dragover 触发时调用")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("dragstart")]),t._v(" "),e("td",[t._v("开始拖拽时调用")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("drop")]),t._v(" "),e("td",[t._v("drop 触发时调用")]),t._v(" "),e("td",[t._v("function({event, node, dragNode, dragNodesKeys})")])]),t._v(" "),e("tr",[e("td",[t._v("expand")]),t._v(" "),e("td",[t._v("展开/收起节点时触发")]),t._v(" "),e("td",[t._v("function(expandedKeys, {expanded: bool, node})")])]),t._v(" "),e("tr",[e("td",[t._v("load")]),t._v(" "),e("td",[t._v("节点加载完毕时触发")]),t._v(" "),e("td",[t._v("function(loadedKeys, {event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("rightClick")]),t._v(" "),e("td",[t._v("响应右键点击")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("select")]),t._v(" "),e("td",[t._v("点击树节点触发")]),t._v(" "),e("td",[t._v("function(selectedKeys, e:{selected: bool, selectedNodes, node, event})")])])])]),t._v(" "),e("h3",{attrs:{id:"TreeNode-props"}},[t._v("TreeNode props "),e("a",{staticClass:"anchor",attrs:{href:"#TreeNode-props"}},[t._v("#")])]),t._v(" "),e("p",[t._v("结点描述数据对象，是 treeNodes 中的一项，TreeNode 使用相同的 API。")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("class")]),t._v(" "),e("td",[t._v("节点的 class")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("style")]),t._v(" "),e("td",[t._v("节点的 style")]),t._v(" "),e("td",[t._v("string|object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("disableCheckbox")]),t._v(" "),e("td",[t._v("禁掉 checkbox")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("disabled")]),t._v(" "),e("td",[t._v("禁掉响应")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("icon")]),t._v(" "),e("td",[t._v("自定义图标。可接收组件，props 为当前节点 props")]),t._v(" "),e("td",[t._v("slot|slot-scope")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("isLeaf")]),t._v(" "),e("td",[t._v("设置为叶子节点(设置了"),e("code",{pre:!0},[t._v("loadData")]),t._v("时有效)")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("key")]),t._v(" "),e("td",[t._v("被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！")]),t._v(" "),e("td",[t._v("string | number")]),t._v(" "),e("td",[t._v("内部计算出的节点位置")])]),t._v(" "),e("tr",[e("td",[t._v("selectable")]),t._v(" "),e("td",[t._v("设置节点是否可被选中")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("title")]),t._v(" "),e("td",[t._v("标题")]),t._v(" "),e("td",[t._v("string|slot|slot-scope")]),t._v(" "),e("td",[t._v("'---'")])]),t._v(" "),e("tr",[e("td",[t._v("slots")]),t._v(" "),e("td",[t._v("使用 treeNodes 时，可以通过该属性配置支持 slot 的属性，如 "),e("code",{pre:!0},[t._v("slots: { title: 'XXX'}")])]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("scopedSlots")]),t._v(" "),e("td",[t._v("使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 "),e("code",{pre:!0},[t._v("scopedSlots: { title: 'XXX'}")])]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("on")]),t._v(" "),e("td",[t._v("事件对象，仅在 treeNodes 使用方式中生效，如"),e("code",{pre:!0},[t._v("{click: () => {}}")])]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("'---'")])])])]),t._v(" "),e("h3",{attrs:{id:"DirectoryTree-props"}},[t._v("DirectoryTree props "),e("a",{staticClass:"anchor",attrs:{href:"#DirectoryTree-props"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("expandAction")]),t._v(" "),e("td",[t._v("目录展开逻辑，可选 "),e("code",{pre:!0},[t._v("false")]),t._v(" "),e("code",{pre:!0},[t._v("'click'")]),t._v(" "),e("code",{pre:!0},[t._v("'dblclick'")])]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("click")])])])]),t._v(" "),e("h2",{attrs:{id:"FAQ"}},[t._v("FAQ "),e("a",{staticClass:"anchor",attrs:{href:"#FAQ"}},[t._v("#")])]),t._v(" "),e("h3",{attrs:{id:"在-showLine-时，如何隐藏子节点图标？"}},[t._v("在 showLine 时，如何隐藏子节点图标？ "),e("a",{staticClass:"anchor",attrs:{href:"#在-showLine-时，如何隐藏子节点图标？"}},[t._v("#")])]),t._v(" "),e("p",[t._v("文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式")])])}],!1,null,null,null);q.options.__file="components/tree/index.zh-CN.md";var Z=q.exports,tt=function(){var t=this.$createElement;this._self._c;return this._m(0)};tt._withStripped=!0;var st=Object(v.a)({},tt,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("h3",{attrs:{id:"Tree-props"}},[t._v("Tree props "),e("a",{staticClass:"anchor",attrs:{href:"#Tree-props"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("treeData")]),t._v(" "),e("td",[t._v("treeNode of tree, please use "),e("code",{pre:!0},[t._v("treeNodes")]),t._v(" before v1.1.4")]),t._v(" "),e("td",[t._v("array")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("replaceFields")]),t._v(" "),e("td",[t._v("Replace the title,key and children fields in treeNode with the corresponding fields in treeData")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("{ children:'children', title:'title', key:'key' }")])]),t._v(" "),e("tr",[e("td",[t._v("autoExpandParent")]),t._v(" "),e("td",[t._v("Whether to automatically expand a parent treeNode")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("checkable")]),t._v(" "),e("td",[t._v("Adds a "),e("code",{pre:!0},[t._v("Checkbox")]),t._v(" before the treeNodes")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("checkedKeys(v-model)")]),t._v(" "),e("td",[t._v("(Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When "),e("code",{pre:!0},[t._v("checkable")]),t._v(" and "),e("code",{pre:!0},[t._v("checkStrictly")]),t._v(" is true, its object has "),e("code",{pre:!0},[t._v("checked")]),t._v(" and "),e("code",{pre:!0},[t._v("halfChecked")]),t._v(" property. Regardless of whether the child or parent treeNode is checked, they won't impact each other.")]),t._v(" "),e("td",[t._v("string[] | number[] | {checked: string[] | number[], halfChecked: string[] | number[]}")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("checkStrictly")]),t._v(" "),e("td",[t._v("Check treeNode precisely; parent treeNode and children treeNodes are not associated")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("defaultCheckedKeys")]),t._v(" "),e("td",[t._v("Specifies the keys of the default checked treeNodes")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("defaultExpandAll")]),t._v(" "),e("td",[t._v("Whether to expand all treeNodes by default")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("defaultExpandedKeys")]),t._v(" "),e("td",[t._v("Specify the keys of the default expanded treeNodes")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("defaultExpandParent")]),t._v(" "),e("td",[t._v("auto expand parent treeNodes when init")]),t._v(" "),e("td",[t._v("bool")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("defaultSelectedKeys")]),t._v(" "),e("td",[t._v("Specifies the keys of the default selected treeNodes")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("disabled")]),t._v(" "),e("td",[t._v("whether disabled the tree")]),t._v(" "),e("td",[t._v("bool")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("draggable")]),t._v(" "),e("td",[t._v("Specifies whether this Tree is draggable (IE > 8)")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("expandedKeys(.sync)")]),t._v(" "),e("td",[t._v("(Controlled) Specifies the keys of the expanded treeNodes")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("filterTreeNode")]),t._v(" "),e("td",[t._v("Defines a function to filter (highlight) treeNodes. When the function returns "),e("code",{pre:!0},[t._v("true")]),t._v(", the corresponding treeNode will be highlighted")]),t._v(" "),e("td",[t._v("function(node)")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("loadData")]),t._v(" "),e("td",[t._v("Load data asynchronously")]),t._v(" "),e("td",[t._v("function(node)")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("loadedKeys")]),t._v(" "),e("td",[t._v("(Controlled) Set loaded tree nodes. Need work with "),e("code",{pre:!0},[t._v("loadData")])]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("multiple")]),t._v(" "),e("td",[t._v("Allows selecting multiple treeNodes")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("selectedKeys(.sync)")]),t._v(" "),e("td",[t._v("(Controlled) Specifies the keys of the selected treeNodes")]),t._v(" "),e("td",[t._v("string[] | number[]")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("showIcon")]),t._v(" "),e("td",[t._v("Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to "),e("code",{pre:!0},[t._v("true")])]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("switcherIcon")]),t._v(" "),e("td",[t._v("customize collapse/expand icon of tree node")]),t._v(" "),e("td",[t._v("slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("showLine")]),t._v(" "),e("td",[t._v("Shows a connecting line")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])])])]),t._v(" "),e("h3",{attrs:{id:"Events"}},[t._v("Events "),e("a",{staticClass:"anchor",attrs:{href:"#Events"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Events Name")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Arguments")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("check")]),t._v(" "),e("td",[t._v("Callback function for when the onCheck event occurs")]),t._v(" "),e("td",[t._v("function(checkedKeys, e:{checked: bool, checkedNodes, node, event})")])]),t._v(" "),e("tr",[e("td",[t._v("dragend")]),t._v(" "),e("td",[t._v("Callback function for when the onDragEnd event occurs")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("dragenter")]),t._v(" "),e("td",[t._v("Callback function for when the onDragEnter event occurs")]),t._v(" "),e("td",[t._v("function({event, node, expandedKeys})")])]),t._v(" "),e("tr",[e("td",[t._v("dragleave")]),t._v(" "),e("td",[t._v("Callback function for when the onDragLeave event occurs")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("dragover")]),t._v(" "),e("td",[t._v("Callback function for when the onDragOver event occurs")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("dragstart")]),t._v(" "),e("td",[t._v("Callback function for when the onDragStart event occurs")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("drop")]),t._v(" "),e("td",[t._v("Callback function for when the onDrop event occurs")]),t._v(" "),e("td",[t._v("function({event, node, dragNode, dragNodesKeys})")])]),t._v(" "),e("tr",[e("td",[t._v("expand")]),t._v(" "),e("td",[t._v("Callback function for when a treeNode is expanded or collapsed")]),t._v(" "),e("td",[t._v("function(expandedKeys, {expanded: bool, node})")])]),t._v(" "),e("tr",[e("td",[t._v("load")]),t._v(" "),e("td",[t._v("Callback function for when a treeNode is loaded")]),t._v(" "),e("td",[t._v("function(loadedKeys, {event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("rightClick")]),t._v(" "),e("td",[t._v("Callback function for when the user right clicks a treeNode")]),t._v(" "),e("td",[t._v("function({event, node})")])]),t._v(" "),e("tr",[e("td",[t._v("select")]),t._v(" "),e("td",[t._v("Callback function for when the user clicks a treeNode")]),t._v(" "),e("td",[t._v("function(selectedKeys, e:{selected: bool, selectedNodes, node, event})")])])])]),t._v(" "),e("h3",{attrs:{id:"TreeNode-props"}},[t._v("TreeNode props "),e("a",{staticClass:"anchor",attrs:{href:"#TreeNode-props"}},[t._v("#")])]),t._v(" "),e("p",[t._v("One of the Tree "),e("code",{pre:!0},[t._v("treeNode")]),t._v(" prop for describing the tree's node, TreeNode has the same API.")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("class")]),t._v(" "),e("td",[t._v("className")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("style")]),t._v(" "),e("td",[t._v("style")]),t._v(" "),e("td",[t._v("string|object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("disableCheckbox")]),t._v(" "),e("td",[t._v("Disables the checkbox of the treeNode")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("disabled")]),t._v(" "),e("td",[t._v("Disables the treeNode")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("icon")]),t._v(" "),e("td",[t._v("customize icon. When you pass component, whose render will receive full TreeNode props as component props")]),t._v(" "),e("td",[t._v("slot|slot-scope")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("isLeaf")]),t._v(" "),e("td",[t._v("Determines if this is a leaf node(effective when "),e("code",{pre:!0},[t._v("loadData")]),t._v(" is specified)")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("key")]),t._v(" "),e("td",[t._v("Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree!")]),t._v(" "),e("td",[t._v("string | number")]),t._v(" "),e("td",[t._v("internal calculated position of treeNode")])]),t._v(" "),e("tr",[e("td",[t._v("selectable")]),t._v(" "),e("td",[t._v("Set whether the treeNode can be selected")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("title")]),t._v(" "),e("td",[t._v("Title")]),t._v(" "),e("td",[t._v("string|slot|slot-scope")]),t._v(" "),e("td",[t._v("'---'")])]),t._v(" "),e("tr",[e("td",[t._v("slots")]),t._v(" "),e("td",[t._v("When using treeNodes, you can use this property to configure the properties that support the slot, such as "),e("code",{pre:!0},[t._v("slots: { title: 'XXX'}")])]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("scopedSlots")]),t._v(" "),e("td",[t._v("When using treeNodes, you can use this property to configure the properties that support the slot-scope, such as "),e("code",{pre:!0},[t._v("scopedSlots: { title: 'XXX'}")])]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("on")]),t._v(" "),e("td",[t._v("When using treeNodes, you can use this property to configure the events, such as "),e("code",{pre:!0},[t._v("on: { click: () => {}}")])]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"DirectoryTree-props"}},[t._v("DirectoryTree props "),e("a",{staticClass:"anchor",attrs:{href:"#DirectoryTree-props"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("expandAction")]),t._v(" "),e("td",[t._v("Directory open logic, optional "),e("code",{pre:!0},[t._v("false")]),t._v(" "),e("code",{pre:!0},[t._v("'click'")]),t._v(" "),e("code",{pre:!0},[t._v("'dblclick'")])]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("click")])])])]),t._v(" "),e("h2",{attrs:{id:"FAQ"}},[t._v("FAQ "),e("a",{staticClass:"anchor",attrs:{href:"#FAQ"}},[t._v("#")])]),t._v(" "),e("h3",{attrs:{id:"How-to-hide-file-icon-when-use-showLine?"}},[t._v("How to hide file icon when use showLine? "),e("a",{staticClass:"anchor",attrs:{href:"#How-to-hide-file-icon-when-use-showLine?"}},[t._v("#")])]),t._v(" "),e("p",[t._v("File icon realize by using switcherIcon. You can overwrite the style to hide it")])])}],!1,null,null,null);st.options.__file="components/tree/index.en-US.md";var et=st.exports,at="# 树形控件\n ## 何时使用\n\n文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。\n\n ## 代码演示",nt="# Tree\n ## When To Use\n\nAlmost anything can be represented in a tree structure.\nExamples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.\n## Examples\n ",lt={category:"Components",type:"Data Display",title:"Tree",subtitle:"树形控件",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:at,us:nt}}),t(_),t(p),t(U),t(u),t(K),t(S),t(L),t(W),t(H),t("api",[t("template",{slot:"cn"},[t(Z)]),t(et)])])}},vt=Object(v.a)(lt,void 0,void 0,!1,null,null,null);vt.options.__file="components/tree/demo/index.vue";s.default=vt.exports}}]); |