(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}}]);