vxe-table/docs/v1/static/js/tree.cce9cdbe.js

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["tree"],{"07c0":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("树表格与展开行同时使用，非常简单就能实现很复杂的树形展开行")]),n("vxe-table",{attrs:{border:"",resizable:"","tree-config":{children:"children"},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{type:"expand",title:"Details",width:"80"},scopedSlots:e._u([{key:"content",fn:function(t){var a=t.row;return[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("Date")]),n("span",[e._v(e._s(a.date))])])])]}}])}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          :tree-config="{children: \'children\'}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>\n          <vxe-table-column type="expand" width="60">\n            <template v-slot:content="{ row, rowIndex }">\n              <ul>\n                <li>\n                  <span>ID：</span>\n                  <span>{{ row.id }}</span>\n                </li>\n                <li>\n                  <span>Name：</span>\n                  <span>{{ row.name }}</span>\n                </li>\n                <li>\n                  <span>Date</span>\n                  <span>{{ row.date }}</span>\n                </li>\n              </ul>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},"15b1":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("多选树表格")]),n("vxe-table",{attrs:{resizable:"","tree-config":{children:"children"},data:e.tableData,"checkbox-config":{labelField:"id",highlight:!0}},on:{"checkbox-change":e.selectChangeEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"ID",width:"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("默认选中，通过指定 "),n("table-api-link",{attrs:{prop:"checkRowKeys"}}),e._v(" 设置默认选中的行")],1),n("vxe-table",{attrs:{resizable:"","row-id":"id",data:e.tableData,"tree-config":{children:"children"},"checkbox-config":{labelField:"name",checkRowKeys:["122000","20000"]}},on:{"checkbox-change":e.selectChangeEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"Sex",width:"400","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("通过 "),n("table-api-link",{attrs:{prop:"checkStrictly"}}),e._v(" 设置父子节点不互相关联，默认不显示头部复选框，可以通过 checkbox-config={"),n("table-api-link",{attrs:{prop:"showHeader"}}),e._v("} 设置")],1),n("vxe-table",{attrs:{resizable:"",data:e.tableData,"tree-config":{children:"children"},"checkbox-config":{labelField:"name",checkStrictly:!0}}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"Name",width:"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("caad"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r=n("c695"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          resizable\n          :tree-config="{children: \'children\'}"\n          :data="tableData"\n          :checkbox-config="{labelField: \'id\', highlight: true}"\n          @checkbox-change="selectChangeEvent">\n          <vxe-table-column type="checkbox" title="ID" width="280" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            selectChangeEvent ({ selection }) {\n              console.info(`勾选${selection.length}个树形节点`, selection)\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          row-id="id"\n          :data="tableData"\n          :tree-config="{children: \'children\'}"\n          :checkbox-config="{labelField: \'name\', checkRowKeys: [\'122000\', \'20000\']}"\n          @checkbox-change="selectChangeEvent">\n          <vxe-table-column type="checkbox" title="Sex" width="400" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            selectChangeEvent ({ selection }) {\n              console.info(`勾选${selection.length}个树形节点`, selection)\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          :data="tableData"\n          :tree-config="{children: \'children\'}"\n          :checkbox-config="{labelField: \'name\', checkStrictly: true}">\n          <vxe-table-column type="checkbox" title="Name" width="280" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.tableData=s.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{checkMethod:function(e){var t=e.row;return!["js","mp4"].includes(t.type)},selectChangeEvent:function(e){var t=e.selection;console.info("勾选".concat(t.length,"个树形节点"),t)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},"165f":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 树表格，通过配置 "),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v(" 和指定列 "),n("table-column-api-link",{attrs:{prop:"tree-node"}}),e._v(" 属性来开启树表格，通过 "),n("table-api-link",{attrs:{prop:"row-id"}}),e._v(" 指定主键，还可以通过 "),n("table-api-link",{attrs:{prop:"trigger"}}),e._v(" 指定触发方式"),n("br"),n("span",{staticClass:"red"},[e._v("(注：树结构不支持大量数据)")])],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getTreeExpansionEvent}},[e._v("获取已展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","tree-config":"",border:"none",data:e.tableData},on:{"toggle-tree-expand":e.toggleExpandChangeEvent}},[n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("默认展开树节点，通过 "),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"expandRowKeys"}}),e._v(": []} 设置默认展开树节点的主键")],1),n("vxe-table",{attrs:{resizable:"","row-id":"id","tree-config":{children:"children",expandRowKeys:e.defaultExpandKeys},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("默认展开所有树节点，通过 "),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"expandAll"}}),e._v(": true} 设置默认展开所有树节点")],1),n("vxe-table",{attrs:{border:"","row-id":"id",data:e.tableData,"tree-config":{children:"children",expandAll:!0}}},[n("vxe-table-column",{attrs:{type:"seq",width:"180",title:"序号","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name"}}),n("vxe-table-column",{attrs:{title:"基本信息"}},[n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}})],1),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],defaultExpandKeys:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          tree-config\n          border="none"\n          ref="xTree"\n          :data="tableData"\n          @toggle-tree-expand="toggleExpandChangeEvent">\n          <vxe-table-column field="name" title="app.body.label.name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            toggleExpandChangeEvent ({ row, expanded }) {\n              console.log('节点展开事件' + expanded)\n            },\n            getTreeExpansionEvent () {\n              let treeExpandRecords = this.$refs.xTree.getTreeExpandRecords()\n              this.$XModal.alert(treeExpandRecords.length)\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          row-id="id"\n          :tree-config="{children: \'children\', expandRowKeys: defaultExpandKeys}"\n          :data="tableData">\n          <vxe-table-column field="name" title="app.body.label.name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              defaultExpandKeys: [],\n            }\n          },\n          created () {\n            this.defaultExpandKeys = ['30000']\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          row-id="id"\n          :data="tableData"\n          :tree-config="{children: \'children\', expandAll: true}">\n          <vxe-table-column type="seq" width="180" title="序号" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="app.body.label.name"></vxe-table-column>\n          <vxe-table-column title="基本信息">\n            <vxe-table-column field="size" title="Size"></vxe-table-column>\n            <vxe-table-column field="type" title="Type"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.defaultExpandKeys=["30000"],this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{toggleExpandChangeEvent:function(e){var t=e.expanded;console.log("节点展开事件"+t)},getTreeExpansionEvent:function(){var e=this.$refs.xTree.getTreeExpandRecords();this.$XModal.alert(e.length)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},"28c0":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("基于树表格实现分组汇总")]),n("vxe-table",{attrs:{resizable:"",loading:e.loading,"tree-config":e.tableTreeConfig,data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"名称","tree-node":"",formatter:e.formatName}}),n("vxe-table-column",{attrs:{field:"level",title:"级别"}}),n("vxe-table-column",{attrs:{field:"age",title:"年龄"}}),n("vxe-table-column",{attrs:{field:"rate",title:"分数"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("99af"),n("4160"),n("a630"),n("b0c0"),n("d3b7"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData:[],tableTreeConfig:{children:"children",accordion:!0,expandAll:!1},demoCodes:['\n        <vxe-table\n          resizable\n          :loading="loading"\n          :tree-config="tableTreeConfig"\n          :data="tableData">\n          <vxe-table-column field="name" title="名称" tree-node :formatter="formatName"></vxe-table-column>\n          <vxe-table-column field="level" title="级别"></vxe-table-column>\n          <vxe-table-column field="age" title="年龄"></vxe-table-column>\n          <vxe-table-column field="rate" title="分数"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableTreeConfig: {\n                children: 'children',\n                accordion: true, // 一层只允许展开一个节点\n                expandAll: false // 默认是否全部展开\n              }\n            }\n          },\n          created () {\n            this.loading = true\n            this.findList().then(data => {\n              this.tableData = this.getGroupSummary(data)\n              this.loading = false\n            })\n          },\n          methods: {\n            findList () {\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  let list = [\n                    {\n                      name: '一班',\n                      level: '',\n                      age: '',\n                      rate: '',\n                      children: [\n                        { name: 'test7', rate: 9, age: 24, level: 1 },\n                        { name: 'test6', rate: 14, age: 20, level: 3 },\n                        {\n                          name: '第一组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test85', rate: 13, age: 32, level: 1 },\n                            { name: 'test37', rate: 9, age: 29, level: 4 },\n                            { name: 'test93', rate: 22, age: 28, level: 5 },\n                            { name: 'test90', rate: 55, age: 26, level: 2 }\n                          ]\n                        },\n                        { name: 'test32', rate: 11, age: 21, level: 1 }\n                      ]\n                    },\n                    {\n                      name: '二班',\n                      level: '',\n                      age: '',\n                      rate: '',\n                      children: [\n                        { name: 'test15', rate: 13, age: 32, level: 1 },\n                        { name: 'test44', rate: 9, age: 29, level: 4 },\n                        {\n                          name: '第一组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test37', rate: 9, age: 29, level: 4 },\n                            { name: 'test93', rate: 22, age: 28, level: 5 }\n                          ]\n                        },\n                        {\n                          name: '第二组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test74', rate: 11, age: 32, level: 5 },\n                            { name: 'test99', rate: 23, age: 18, level: 4 },\n                            {\n                              name: '第一排',\n                              level: '',\n                              age: '',\n                              rate: '',\n                              children: [\n                                { name: 'test48', rate: 77, age: 29, level: 4 },\n                                { name: 'test38', rate: 34, age: 21, level: 2 }\n                              ]\n                            },\n                            { name: 'test16', rate: 22, age: 26, level: 5 }\n                          ]\n                        },\n                        { name: 'test91', rate: 16, age: 27, level: 5 },\n                        {\n                          name: '第三组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test77', rate: 11, age: 35, level: 1 },\n                            { name: 'test89', rate: 40, age: 18, level: 4 },\n                            { name: 'test10', rate: 22, age: 20, level: 2 }\n                          ]\n                        }\n                      ]\n                    },\n                    {\n                      name: '三班',\n                      level: '',\n                      age: '',\n                      rate: '',\n                      children: [\n                        { name: 'test6', rate: 3, age: 22, level: 2 },\n                        { name: 'test2', rate: 5, age: 25, level: 3 },\n                        { name: 'test42', rate: 17, age: 35, level: 4 }\n                      ]\n                    }\n                  ]\n                  resolve(list)\n                }, 300)\n              })\n            },\n            formatName ({ row }) {\n              return row.children && row.children.length ? `${row.name} (${row.num}人)` : row.name\n            },\n            // 计算逻辑\n            handleSummary  (children) {\n              return {\n                num: XEUtils.sum(children, 'num'),\n                level: Math.floor(XEUtils.sum(children, 'level')),\n                age: parseInt(XEUtils.mean(children, 'age')),\n                rate: XEUtils.sum(children, 'rate')\n              }\n            },\n            getGroupSummary (data) {\n              XEUtils.eachTree(data, (row, index, items, path, parent, nodes) => {\n                let children = row.children\n                if (children && children.length) {\n                  // 合计子节点\n                  Object.assign(row, this.handleSummary(children))\n                } else {\n                  row.num = 1\n                  if (index === items.length - 1) {\n                    // 全量汇总\n                    for (let len = nodes.length - 2; len >= 0; len--) {\n                      Object.assign(nodes[len], this.handleSummary(nodes[len].children))\n                    }\n                  }\n                }\n              }, this.tableTreeConfig)\n              return data\n            }\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,this.findList().then((function(t){e.tableData=e.getGroupSummary(t),e.loading=!1}))},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){return new Promise((function(e){setTimeout((function(){var t=[{name:"一班",level:"",age:"",rate:"",children:[{name:"test7",rate:9,age:24,level:1},{name:"test6",rate:14,age:20,level:3},{name:"第一组",level:"",age:"",rate:"",children:[{name:"test85",rate:13,age:32,level:1},{name:"test37",rate:9,age:29,level:4},{name:"test93",rate:22,age:28,level:5},{name:"test90",rate:55,age:26,level:2}]},{name:"test32",rate:11,age:21,level:1}]},{name:"二班",level:"",age:"",rate:"",children:[{name:"test15",rate:13,age:32,level:1},{name:"test44",rate:9,age:29,level:4},{name:"第一组",level:"",age:"",rate:"",children:[{name:"test37",rate:9,age:29,level:4},{name:"test93",rate:22,age:28,level:5}]},{name:"第二组",level:"",age:"",rate:"",children:[{name:"test74",rate:11,age:32,level:5},{name:"test99",rate:23,age:18,level:4},{name:"第一排",level:"",age:"",rate:"",children:[{name:"test48",rate:77,age:29,level:4},{name:"test38",rate:34,age:21,level:2}]},{name:"test16",rate:22,age:26,level:5}]},{name:"test91",rate:16,age:27,level:5},{name:"第三组",level:"",age:"",rate:"",children:[{name:"test77",rate:11,age:35,level:1},{name:"test89",rate:40,age:18,level:4},{name:"test10",rate:22,age:20,level:2}]}]},{name:"三班",level:"",age:"",rate:"",children:[{name:"test6",rate:3,age:22,level:2},{name:"test2",rate:5,age:25,level:3},{name:"test42",rate:17,age:35,level:4}]}];e(t)}),300)}))},formatName:function(e){var t=e.row;return t.children&&t.children.length?"".concat(t.name," (").concat(t.num,"人)"):t.name},handleSummary:function(e){return{num:i.a.sum(e,"num"),level:Math.floor(i.a.sum(e,"level")),age:parseInt(i.a.mean(e,"age")),rate:i.a.sum(e,"rate")}},getGroupSummary:function(e){var t=this;return i.a.eachTree(e,(function(e,n,a,l,o,i){var r=e.children;if(r&&r.length)Object.assign(e,t.handleSummary(r));else if(e.num=1,n===a.length-1)for(var s=i.length-2;s>=0;s--)Object.assign(i[s],t.handleSummary(i[s].children))}),this.tableTreeConfig),e}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},"28cc":function(e,t,n){"use strict";var a=n("4e96"),l=n.n(a);l.a},"2a4d":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("键盘移动高亮行，设置 "),n("table-api-link",{attrs:{prop:"keyboard-config"}}),e._v("={isArrow: true, isEnter: true} 启用方向键功能")],1),n("vxe-table",{attrs:{"highlight-current-row":"",data:e.tableData,"tree-config":{children:"children"},"keyboard-config":{isArrow:!0,isEnter:!0}}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),e._m(0),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v("    "),n("code",[e._v("\n      | Arrow Up ↑ | 移动到高亮行的上一行 |\n      | Arrow Down ↓ | 移动到高亮行的下一行 |\n      | Enter | 展开节点，进入子节点 |\n      | Backspace | 关闭节点，返回到父节点 |\n    ")]),e._v("\n  ")])}],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r=n("c695"),s=n.n(r),c={data:function(){return{tableData:[],selectRow:null,demoCodes:['\n        <vxe-table\n          highlight-current-row\n          :data="tableData"\n          :tree-config="{children: \'children\'}"\n          :keyboard-config="{isArrow: true, isEnter: true}">\n          <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.tableData=s.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},"2d82":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("实现子孙表格懒加载")]),n("vxe-table",{attrs:{border:"",resizable:"","tree-config":{children:"children"},"expand-config":{lazy:!0,loadMethod:e.loadContentMethod},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{type:"expand",width:"80"},scopedSlots:e._u([{key:"content",fn:function(e){var t=e.row;return[n("vxe-grid",{attrs:{columns:t.childCols,data:t.childData}})]}}])}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("d3b7"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          :tree-config="{children: \'children\'}"\n          :expand-config="{lazy: true, loadMethod: loadContentMethod}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>\n          <vxe-table-column type="expand" width="80">\n            <template v-slot:content="{ row }">\n              <vxe-grid :columns="row.childCols" :data="row.childData"></vxe-grid>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            loadContentMethod  ({ row }) {\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  let childCols = XEUtils.sample([\n                    { type: 'seq', title: 'Sequence' },\n                    { field: 'name', title: 'Name' },\n                    { field: 'role', title: 'Role' },\n                    { field: 'age', title: 'Age' },\n                    { field: 'sex', title: 'Sex' }\n                  ], XEUtils.random(3, 5))\n                  let childData = XEUtils.sample([\n                    { name: 'TEST1', role: 'Develop', age: 20, sex: '女' },\n                    { name: 'TEST2', role: 'Develop', age: 22, sex: '女' },\n                    { name: 'TEST3', role: 'Develop', age: 24, sex: '男' },\n                    { name: 'TEST4', role: 'Develop', age: 26, sex: '女' },\n                    { name: 'TEST5', role: 'Develop', age: 28, sex: '男' },\n                    { name: 'TEST6', role: 'Develop', age: 30, sex: '男' }\n                  ], XEUtils.random(1, 5))\n                  row.childCols = childCols\n                  row.childData = childData\n                  resolve()\n                }, 500)\n              })\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{loadContentMethod:function(e){var t=e.row;return new Promise((function(e){setTimeout((function(){var n=i.a.sample([{type:"seq",title:"Sequence"},{field:"name",title:"Name"},{field:"role",title:"Role"},{field:"age",title:"Age"},{field:"sex",title:"Sex"}],i.a.random(3,5)),a=i.a.sample([{name:"TEST1",role:"Develop",age:20,sex:"女"},{name:"TEST2",role:"Develop",age:22,sex:"女"},{name:"TEST3",role:"Develop",age:24,sex:"男"},{name:"TEST4",role:"Develop",age:26,sex:"女"},{name:"TEST5",role:"Develop",age:28,sex:"男"},{name:"TEST6",role:"Develop",age:30,sex:"男"}],i.a.random(1,5));t.childCols=n,t.childData=a,e()}),500)}))}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},3333:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},l=[],o=n("2877"),i={},r=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=r.exports},"3de1":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("树表格的懒加载和快捷菜单，通过调用 "),n("table-api-link",{attrs:{prop:"clearTreeExpandLoaded"}}),e._v(" 方法清除加载完成状态，通过调用 "),n("table-api-link",{attrs:{prop:"reloadTreeChilds"}}),e._v(" 方法重新加载子节点")],1),n("vxe-table",{ref:"xTree",attrs:{border:"",resizable:"","row-id":"id",loading:e.loading,"context-menu":{body:{options:e.bodyMenus},visibleMethod:e.visibleMethod},"tree-config":{lazy:!0,children:"children",hasChild:"hasChild",loadMethod:e.loadChildrenMethod},data:e.tableData},on:{"context-menu-click":e.contextMenuClickEvent}},[n("vxe-table-column",{attrs:{field:"name",title:"Name",width:"400","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("caad"),n("3ca3"),n("159b"),n("628a")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData:[],bodyMenus:[[{code:"clearLoaded",name:"清除加载状态",disabled:!1},{code:"reloadNodes",name:"重新加载子节点",disabled:!1},{code:"expand",name:"展开节点",disabled:!1},{code:"contract",name:"收起节点",disabled:!1}]],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          ref="xTree"\n          row-id="id"\n          :loading="loading"\n          :context-menu="{body: {options: bodyMenus}, visibleMethod}"\n          :tree-config="{lazy: true, children: \'children\', hasChild: \'hasChild\', loadMethod: loadChildrenMethod}"\n          :data="tableData"\n          @context-menu-click="contextMenuClickEvent">\n          <vxe-table-column field="name" title="Name" width="400" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              bodyMenus: [\n                [\n                  {\n                    code: 'clearLoaded',\n                    name: '清除加载状态',\n                    disabled: false\n                  },\n                  {\n                    code: 'reloadNodes',\n                    name: '重新加载子节点',\n                    disabled: false\n                  },\n                  {\n                    code: 'expand',\n                    name: '展开节点',\n                    disabled: false\n                  },\n                  {\n                    code: 'contract',\n                    name: '收起节点',\n                    disabled: false\n                  }\n                ]\n              ]\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              XEAjax.get('/api/file/node/list', { parentId: null }).then(data => {\n                this.tableData = data\n                this.loading = false\n              })\n            },\n            loadChildrenMethod ({ row }) {\n              // 异步加载子节点\n              return XEAjax.get('/api/file/node/list', { parentId: row.id })\n            },\n            visibleMethod  ({ row, type }) {\n              let xTree = this.$refs.xTree\n              if (type === 'body') {\n                this.bodyMenus.forEach(list => {\n                  list.forEach(item => {\n                    if (['clearLoaded', 'reloadNodes'].includes(item.code)) {\n                      item.disabled = !row.hasChild || !xTree.isTreeExpandLoaded(row)\n                    } else if (['expand', 'contract'].includes(item.code)) {\n                      if (row.hasChild) {\n                        let isExpand = xTree.isTreeExpandByRow(row)\n                        item.disabled = ['expand'].includes(item.code) ? isExpand : !isExpand\n                      } else {\n                        item.disabled = true\n                      }\n                    }\n                  })\n                })\n              }\n              return true\n            },\n            contextMenuClickEvent ({ menu, row, column }) {\n              let xTree = this.$refs.xTree\n              switch (menu.code) {\n                case 'clearLoaded':\n                  xTree.clearTreeExpandLoaded(row)\n                  break\n                case 'reloadNodes':\n                  xTree.reloadTreeChilds(row)\n                  break\n                case 'expand':\n                  xTree.setTreeExpansion(row, true)\n                  break\n                case 'contract':\n                  xTree.setTreeExpansion(row, false)\n                  break\n              }\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,i.a.get("/api/file/node/list",{parentId:null}).then((function(t){e.tableData=t,e.loading=!1}))},loadChildrenMethod:function(e){var t=e.row;return i.a.get("/api/file/node/list",{parentId:t.id})},visibleMethod:function(e){var t=e.row,n=e.type,a=this.$refs.xTree;return"body"===n&&this.bodyMenus.forEach((function(e){e.forEach((function(e){if(["clearLoaded","reloadNodes"].includes(e.code))e.disabled=!t.hasChild||!a.isTreeExpandLoaded(t);else if(["expand","contract"].includes(e.code))if(t.hasChild){var n=a.isTreeExpandByRow(t);e.disabled=["expand"].includes(e.code)?n:!n}else e.disabled=!0}))})),!0},contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=this.$refs.xTree;switch(t.code){case"clearLoaded":a.clearTreeExpandLoaded(n);break;case"reloadNodes":a.reloadTreeChilds(n);break;case"expand":a.setTreeExpansion(n,!0);break;case"contract":a.setTreeExpansion(n,!1);break}}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},4149:function(e,t,n){"use strict";var a=n("7599"),l=n.n(a);l.a},"42f0":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("树表格，固定列")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTree.toggleTreeExpansion(e.tableData[0],!0)}}},[e._v("切换第一个")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setTreeExpansion(e.tableData[2],!0)}}},[e._v("展开第三个")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{border:"",resizable:"","show-overflow":"","show-header-overflow":"","tree-config":{children:"children"},"checkbox-config":{labelField:"id"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"ID",fixed:"left",width:"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",width:"300"}}),n("vxe-table-column",{attrs:{field:"size",title:"Size",width:"300"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type",width:"300"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date",width:"300"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTree.toggleTreeExpansion(tableData[0], true)">切换第一个</vxe-button>\n            <vxe-button @click="$refs.xTree.setTreeExpansion(tableData[2], true)">展开第三个</vxe-button>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          show-overflow\n          show-header-overflow\n          ref="xTree"\n          :tree-config="{children: \'children\'}"\n          :checkbox-config="{labelField: \'id\'}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" title="ID" fixed="left" width="280" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" width="300"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" width="300"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" width="300"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},"4e96":function(e,t,n){},5304:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 树表格的懒加载，通过配置 "),n("table-api-link",{attrs:{prop:"row-id"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"lazy"}}),e._v(", "),n("table-api-link",{attrs:{prop:"loadMethod"}}),e._v("} 加载方法来开启树形懒加载"),n("br"),e._v(" 当启用懒加载后，必须通过 "),n("table-api-link",{attrs:{prop:"hasChild"}}),e._v(" 属性来标识是否存在子节点，从而控制该节点是否允许被点击"),n("br"),n("span",{staticClass:"red"},[e._v("（注：懒加载启用后一次只允许异步加载一层根节点）")])],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTree.toggleTreeExpansion(e.tableData[1])}}},[e._v("切换第二行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setTreeExpansion([e.tableData[1],e.tableData[3]],!0)}}},[e._v("设置第二、四行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{border:"",resizable:"","row-id":"id","tree-config":{lazy:!0,children:"children",hasChild:"hasChild",loadMethod:e.loadChildrenMethod},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name",width:"400","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("通过设置 "),n("table-api-link",{attrs:{prop:"expandRowKeys"}}),e._v(" 属性默认展开指定节点")],1),n("vxe-table",{attrs:{border:"",resizable:"","row-id":"id","checkbox-config":{labelField:"name"},"tree-config":{lazy:!0,children:"children",hasChild:"hasChild",expandRowKeys:e.defaultExpandRowKeys,loadMethod:e.loadChildrenMethod,iconOpen:"fa fa-minus-square-o",iconClose:"fa fa-plus-square-o"},data:e.tableData2}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"Name",width:"400","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],tableData2:[],defaultExpandRowKeys:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTree.toggleTreeExpansion(tableData[1])">切换第二行展开</vxe-button>\n            <vxe-button @click="$refs.xTree.setTreeExpansion([tableData[1], tableData[3]], true)">设置第二、四行展开</vxe-button>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          ref="xTree"\n          row-id="id"\n          :tree-config="{lazy: true, children: \'children\', hasChild: \'hasChild\', loadMethod: loadChildrenMethod}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" width="400" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              XEAjax.get('/api/file/node/list', { parentId: null }).then(data => {\n                this.tableData = data\n              })\n            },\n            loadChildrenMethod ({ row }) {\n              // 异步加载子节点\n              return XEAjax.get('/api/file/node/list', { parentId: row.id })\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          row-id="id"\n          :checkbox-config="{labelField: \'name\'}"\n          :tree-config="{lazy: true, children: \'children\', hasChild: \'hasChild\', expandRowKeys: defaultExpandRowKeys, loadMethod: loadChildrenMethod, iconOpen: \'fa fa-minus-square-o\', iconClose: \'fa fa-plus-square-o\'}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" title="Name" width="400" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              defaultExpandRowKeys: []\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              XEAjax.get('/api/file/node/list', { parentId: null }).then(data => {\n                // 默认展开的节点必须在数据初始化之前赋值且只会执行一次\n                this.defaultExpandRowKeys = ['10000', '40000']\n                this.tableData = data\n              })\n            },\n            loadChildrenMethod ({ row }) {\n              // 异步加载子节点\n              return XEAjax.get('/api/file/node/list', { parentId: row.id })\n            }\n          }\n        }\n        "]}},created:function(){this.findList(),this.findList2()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;i.a.get("/api/file/node/list",{parentId:null}).then((function(t){e.tableData=t}))},findList2:function(){var e=this;i.a.get("/api/file/node/list",{parentId:null}).then((function(t){e.defaultExpandRowKeys=["10000","40000"],e.tableData2=t}))},loadChildrenMethod:function(e){var t=e.row;return i.a.get("/api/file/node/list",{parentId:t.id})}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},5638:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{attrs:{data:e.tableData,custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent()}}},[e._v("插入第一行")]),n("vxe-button",{on:{click:function(t){return e.insertAtEvent()}}},[e._v("插入指定行")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getSelectEvent}},[e._v("获取选中")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","keep-source":"","tree-config":e.treeConfig,"edit-config":{trigger:"click",mode:"row",showStatus:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"120","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"size",title:"Size","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"type",title:"Type","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("插入数据，简单的实现示例"),n("br"),n("span",{staticClass:"red"},[e._v("注：树形结构默认不支持 insert 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")])])}],o=(n("4160"),n("a630"),n("a434"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],treeConfig:{children:"children"},demoCodes:['\n        <vxe-toolbar :data="tableData" custom>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent()">插入第一行</vxe-button>\n            <vxe-button @click="insertAtEvent()">插入指定行</vxe-button>\n            <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n            <vxe-button @click="getSelectEvent">获取选中</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          keep-source\n          ref="xTree"\n          :tree-config="treeConfig"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" width="120" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              treeConfig: {\n                children: 'children'\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            insertEvent () {\n              let xTree = this.$refs.xTree\n              xTree.createRow({\n                name: '新数据',\n                date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),\n                isNew: true\n              }).then(newRow => {\n                // 插入到第一行\n                this.tableData.unshift(newRow)\n                xTree.refreshData().then(() => xTree.setActiveRow(newRow))\n              })\n            },\n            insertAtEvent () {\n              let xTree = this.$refs.xTree\n              xTree.createRow({\n                name: '新数据',\n                date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),\n                isNew: true\n              }).then(newRow => {\n                // 插入到 id 为 11000 的节点位置中\n                let rowNode = XEUtils.findTree(this.tableData, item => item.id === '11000', this.treeConfig)\n                if (rowNode) {\n                  rowNode.items.splice(rowNode.index, 0, newRow)\n                  xTree.refreshData().then(() => xTree.setActiveRow(newRow))\n                }\n              })\n            },\n            getInsertEvent () {\n              let insertRecords = XEUtils.filterTree(this.tableData, item => item.isNew, this.treeConfig)\n              this.$XModal.alert(insertRecords.length)\n            },\n            getSelectEvent () {\n              let selectRecords = this.$refs.xTree.getCheckboxRecords()\n              this.$XModal.alert(selectRecords.length)\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{insertEvent:function(){var e=this,t=this.$refs.xTree;t.createRow({name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd"),isNew:!0}).then((function(n){e.tableData.unshift(n),t.refreshData().then((function(){return t.setActiveRow(n)}))}))},insertAtEvent:function(){var e=this,t=this.$refs.xTree;t.createRow({name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd"),isNew:!0}).then((function(n){var a=i.a.findTree(e.tableData,(function(e){return"11000"===e.id}),e.treeConfig);a&&(a.items.splice(a.index,0,n),t.refreshData().then((function(){return t.setActiveRow(n)})))}))},getInsertEvent:function(){var e=i.a.filterTree(this.tableData,(function(e){return e.isNew}),this.treeConfig);this.$XModal.alert(e.length)},getSelectEvent:function(){var e=this.$refs.xTree.getCheckboxRecords();this.$XModal.alert(e.length)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},5853:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("通过调用 "),n("table-api-link",{attrs:{prop:"validate"}}),e._v(" 函数校验数据，"),n("table-api-link",{attrs:{prop:"edit-rules"}}),e._v(" 校验规则配置")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.validEvent}},[e._v("校验")]),n("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),n("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")]),n("vxe-button",{on:{click:e.getSelectEvent}},[e._v("获取选中")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","keep-source":"","edit-rules":e.validRules,"tree-config":e.treeConfig,"edit-config":{trigger:"click",mode:"cell",showStatus:!0},"checkbox-config":{labelField:"id"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"ID","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"size",title:"Size","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"type",title:"Type","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("99af"),n("4de4"),n("4160"),n("a630"),n("a15b"),n("d81d"),n("a9e3"),n("07ac"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],treeConfig:{children:"children"},validRules:{name:[{required:!0,message:"app.body.valid.rName"},{min:3,max:50,message:"文件名长度在 3 到 50 个字符"}]},demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="validEvent">校验</vxe-button>\n            <vxe-button @click="fullValidEvent">完整校验</vxe-button>\n            <vxe-button @click="selectValidEvent">选中校验</vxe-button>\n            <vxe-button @click="getSelectEvent">获取选中</vxe-button>\n            <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          keep-source\n          ref="xTree"\n          :edit-rules="validRules"\n          :tree-config="treeConfig"\n          :edit-config="{trigger: \'click\', mode: \'cell\', showStatus: true}"\n          :checkbox-config="{labelField: \'id\'}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" title="ID" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              treeConfig: {\n                children: 'children'\n              },\n              validRules: {\n                name: [\n                  { required: true, message: 'app.body.valid.rName' },\n                  { min: 3, max: 50, message: '文件名长度在 3 到 50 个字符' }\n                ]\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            validEvent () {\n              this.$refs.xTree.validate(valid => {\n                if (valid) {\n                  this.$XModal.message({ status: 'success', message: '校验成功！' })\n                } else {\n                  this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                }\n              })\n            },\n            fullValidEvent () {\n              this.$refs.xTree.fullValidate((valid, errMap) => {\n                if (valid) {\n                  this.$XModal.message({ status: 'success', message: '校验成功！' })\n                } else {\n                  let msgList = []\n                  Object.values(errMap).forEach(errList => {\n                    errList.forEach(params => {\n                      let { row, column, rules } = params\n                      let matchObj = XEUtils.findTree(this.tableData, item => item === row, this.treeConfig)\n                      let seq = matchObj.path.filter(item => item !== this.treeConfig.children).map(item => Number(item) + 1).join('.')\n                      rules.forEach(rule => {\n                        msgList.push(`第 ${seq} 行 ${column.title} 校验错误：${rule.message}`)\n                      })\n                    })\n                  })\n                  this.$XModal.message({\n                    status: 'error',\n                    message: () => {\n                      return [\n                        <div class=\"red\" style=\"max-height: 400px;overflow: auto;\">\n                          {\n                            msgList.map(msg => {\n                              return <div>{ msg }</div>\n                            })\n                          }\n                        </div>\n                      ]\n                    }\n                  })\n                }\n              })\n            },\n            selectValidEvent () {\n              let selectRecords = this.$refs.xTree.getCheckboxRecords()\n              if (selectRecords.length > 0) {\n                this.$refs.xTree.validate(selectRecords, valid => {\n                  if (valid) {\n                    this.$XModal.message({ status: 'success', message: '校验成功！' })\n                  } else {\n                    this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                  }\n                })\n              } else {\n                this.$XModal.message({ status: 'warning', message: '未选中数据！' })\n              }\n            },\n            getSelectEvent () {\n              let selectRecords = this.$refs.xTree.getCheckboxRecords()\n              this.$XModal.alert(selectRecords.length)\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xTree.getUpdateRecords()\n              this.$XModal.alert(updateRecords.length)\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{validEvent:function(){var e=this;this.$refs.xTree.validate((function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTree.fullValidate((function(n,a){if(n)e.$XModal.message({status:"success",message:"校验成功！"});else{var l=[];Object.values(a).forEach((function(t){t.forEach((function(t){var n=t.row,a=t.column,o=t.rules,r=i.a.findTree(e.tableData,(function(e){return e===n}),e.treeConfig),s=r.path.filter((function(t){return t!==e.treeConfig.children})).map((function(e){return Number(e)+1})).join(".");o.forEach((function(e){l.push("第 ".concat(s," 行 ").concat(a.title," 校验错误：").concat(e.message))}))}))})),e.$XModal.message({status:"error",message:function(){return[t("div",{class:"red",style:"max-height: 400px;overflow: auto;"},[l.map((function(e){return t("div",[e])}))])]}})}}))},selectValidEvent:function(){var e=this,t=this.$refs.xTree.getCheckboxRecords();t.length>0?this.$refs.xTree.validate(t,(function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})})):this.$XModal.message({status:"warning",message:"未选中数据！"})},getSelectEvent:function(){var e=this.$refs.xTree.getCheckboxRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTree.getUpdateRecords();this.$XModal.alert(e.length)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},6544:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("可编辑树表格的懒加载")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{border:"",resizable:"","keep-source":"","row-id":"id",loading:e.loading,"edit-config":{trigger:"click",mode:"row",showStatus:!0},"tree-config":{lazy:!0,children:"children",hasChild:"hasChild",loadMethod:e.loadChildrenMethod,accordion:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name",width:"260","tree-node":"","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"size",title:"Size","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"type",title:"Type","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData:[],defaultExpandRowKeys:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          keep-source\n          ref="xTree"\n          row-id="id"\n          :loading="loading"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          :tree-config="{lazy: true, children: \'children\', hasChild: \'hasChild\', loadMethod: loadChildrenMethod, accordion: true}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" width="260" tree-node :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: []\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              XEAjax.get('/api/file/node/list', { parentId: null }).then(data => {\n                this.tableData = data\n                this.loading = false\n              })\n            },\n            loadChildrenMethod ({ row }) {\n              // 异步加载子节点\n              return XEAjax.get('/api/file/node/list', { parentId: row.id })\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,i.a.get("/api/file/node/list",{parentId:null}).then((function(t){e.tableData=t,e.loading=!1}))},loadChildrenMethod:function(e){var t=e.row;return i.a.get("/api/file/node/list",{parentId:t.id})},getUpdateEvent:function(){var e=this.$refs.xTree.getUpdateRecords();this.$XModal.alert(e.length)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},7075:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("当一个表格高度需要自适应的时候可以通过 "),n("table-api-link",{attrs:{prop:"max-height"}}),e._v(" 设置为最大高度")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{border:"",resizable:"","max-height":"400","tree-config":{children:"children"},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          ref="xTree"\n          max-height="400"\n          :tree-config="{children: \'children\'}"\n          :data="tableData">\n          <vxe-table-column field="name" title="app.body.label.name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},"728f":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTree.toggleTreeExpansion(e.tableData[0],!0)}}},[e._v("切换第一个")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setTreeExpansion(e.tableData[2],!0)}}},[e._v("展开第三个")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","tree-config":{children:"children"},"edit-config":{trigger:"click",mode:"row"},"checkbox-config":{labelField:"id"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"ID","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"size",title:"Size","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"type",title:"Type","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("可编辑树表格，还可以通过手动调用展开收起"),n("br"),n("span",{staticClass:"red"},[e._v("（注：树形结构默认不支持 insert 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可）")])])}],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTree.toggleTreeExpansion(tableData[0], true)">切换第一个</vxe-button>\n            <vxe-button @click="$refs.xTree.setTreeExpansion(tableData[2], true)">展开第三个</vxe-button>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          ref="xTree"\n          :tree-config="{children: \'children\'}"\n          :edit-config="{trigger: \'click\', mode: \'row\'}"\n          :checkbox-config="{labelField: \'id\'}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" title="ID" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},7599:function(e,t,n){},"862b":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{attrs:{custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","keep-source":"","tree-config":e.treeConfig,"context-menu":{header:{options:e.headerMenus},body:{options:e.bodyMenus},visibleMethod:e.visibleMethod},"edit-config":{trigger:"click",mode:"row",showStatus:!0},data:e.tableData},on:{"context-menu-click":e.contextMenuClickEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"120","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"size",title:"Size","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"type",title:"Type","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),e._m(1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("快捷菜单操作"),n("br"),n("span",{staticClass:"red"},[e._v("注：树形结构默认不支持 insert 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v("    "),n("code",[e._v("\n      | Arrow Up ↑ | 移动到上一个菜单选项 |\n      | Arrow Down ↓ | 移动到下一个菜单选项 |\n      | Arrow Left ← | 关闭二级菜单 |\n      | Arrow Right → | 打开二级菜单 |\n      | Esc | 关闭菜单选项 |\n      | Enter | 选中当前菜单选项 |\n      | Spacebar | 选中当前菜单选项 |\n    ")]),e._v("\n  ")])}],o=(n("4160"),n("a630"),n("caad"),n("a434"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],treeConfig:{children:"children"},headerMenus:[[{code:"hideColumn",name:"隐藏列",disabled:!1},{code:"showAllColumn",name:"取消所有隐藏列",disabled:!1}]],bodyMenus:[[{code:"insertAt",name:"插入一行",disabled:!1},{code:"expand",name:"展开节点",disabled:!1},{code:"contract",name:"收缩节点",disabled:!1}]],demoCodes:['\n        <vxe-toolbar custom>\n          <template v-slot:buttons>\n            <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          keep-source\n          ref="xTree"\n          :tree-config="treeConfig"\n          :context-menu="{header: {options: headerMenus}, body: {options: bodyMenus}, visibleMethod}"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          :data="tableData"\n          @context-menu-click="contextMenuClickEvent">\n          <vxe-table-column type="checkbox" width="120" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              treeConfig: {\n                children: 'children'\n              },\n              headerMenus: [\n                [\n                  {\n                    code: 'hideColumn',\n                    name: '隐藏列',\n                    disabled: false\n                  },\n                  {\n                    code: 'showAllColumn',\n                    name: '取消所有隐藏列',\n                    disabled: false\n                  }\n                ]\n              ],\n              bodyMenus: [\n                [\n                  {\n                    code: 'insertAt',\n                    name: '插入一行',\n                    disabled: false\n                  },\n                  {\n                    code: 'expand',\n                    name: '展开节点',\n                    disabled: false\n                  },\n                  {\n                    code: 'contract',\n                    name: '收缩节点',\n                    disabled: false\n                  }\n                ]\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            insertAtEvent (row, column) {\n              let xTree = this.$refs.xTree\n              xTree.createRow({\n                name: '新数据',\n                date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),\n                isNew: true\n              }).then(newRow => {\n                // 插入到指定节点位置中\n                let rowNode = XEUtils.findTree(this.tableData, item => item === row, this.treeConfig)\n                if (rowNode) {\n                  rowNode.items.splice(rowNode.index, 0, newRow)\n                  xTree.refreshData().then(() => xTree.setActiveCell(newRow, column.property))\n                }\n              })\n            },\n            getInsertEvent () {\n              let insertRecords = XEUtils.filterTree(this.tableData, item => item.isNew, this.treeConfig)\n              this.$XModal.alert(insertRecords.length)\n            },\n            visibleMethod  ({ row, type }) {\n              let xTree = this.$refs.xTree\n              let treeConfig = this.treeConfig\n              if (type === 'body') {\n                this.bodyMenus.forEach(list => {\n                  list.forEach(item => {\n                    if (['expand', 'contract'].includes(item.code)) {\n                      if (row[treeConfig.children] && row[treeConfig.children].length) {\n                        let isExpand = xTree.isTreeExpandByRow(row)\n                        item.disabled = ['expand'].includes(item.code) ? isExpand : !isExpand\n                      } else {\n                        item.disabled = true\n                      }\n                    }\n                  })\n                })\n              }\n              return true\n            },\n            contextMenuClickEvent ({ menu, row, column }) {\n              let xTree = this.$refs.xTree\n              switch (menu.code) {\n                case 'hideColumn':\n                  xTree.hideColumn(column)\n                  break\n                case 'showAllColumn':\n                  xTree.resetColumn()\n                  break\n                case 'insertAt':\n                  this.insertAtEvent(row, column)\n                  break\n                case 'expandOrFold':\n                  xTree.toggleTreeExpansion(row)\n                  break\n              }\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{insertAtEvent:function(e,t){var n=this,a=this.$refs.xTree;a.createRow({name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd"),isNew:!0}).then((function(l){var o=i.a.findTree(n.tableData,(function(t){return t===e}),n.treeConfig);o&&(o.items.splice(o.index,0,l),a.refreshData().then((function(){return a.setActiveCell(l,t.property)})))}))},getInsertEvent:function(){var e=i.a.filterTree(this.tableData,(function(e){return e.isNew}),this.treeConfig);this.$XModal.alert(e.length)},visibleMethod:function(e){var t=e.row,n=e.type,a=this.$refs.xTree,l=this.treeConfig;return"body"===n&&this.bodyMenus.forEach((function(e){e.forEach((function(e){if(["expand","contract"].includes(e.code))if(t[l.children]&&t[l.children].length){var n=a.isTreeExpandByRow(t);e.disabled=["expand"].includes(e.code)?n:!n}else e.disabled=!0}))})),!0},contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=e.column,l=this.$refs.xTree;switch(t.code){case"hideColumn":l.hideColumn(a);break;case"showAllColumn":l.resetColumn();break;case"insertAt":this.insertAtEvent(n,a);break;case"expand":l.setTreeExpansion(n,!0);break;case"contract":l.setTreeExpansion(n,!1);break}}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},8746:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},l=[],o=n("2877"),i={},r=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=r.exports},"8a33":function(e,t,n){},"8cd6":function(e,t,n){"use strict";var a=n("8a33"),l=n.n(a);l.a},"8f7c":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 树表格，通过配置 "),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"line"}}),e._v(": true} 属性来开启树节点连接线"),n("br"),n("span",{staticClass:"red"},[e._v("（注：开启渲染节点线将会下降渲染性能，具体取决于数据量）")])],1),n("vxe-table",{attrs:{resizable:"","show-overflow":"","highlight-hover-row":"","row-key":"","tree-config":{children:"children",line:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("复选框")]),n("vxe-table",{attrs:{resizable:"","show-overflow":"","highlight-hover-row":"","highlight-current-row":"","row-key":"",size:"medium","tree-config":{children:"children",accordion:!0,line:!0,iconOpen:"vxe-icon--caret-right rotate45",iconClose:"vxe-icon--caret-right"},"checkbox-config":{labelField:"name"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"Name",width:"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("自定义图标，通过设置 "),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"iconOpen"}}),e._v(", "),n("table-api-link",{attrs:{prop:"iconClose"}}),e._v("} 局部替换默认的图标")],1),n("vxe-table",{attrs:{resizable:"","show-overflow":"","highlight-hover-row":"","row-key":"",size:"small","radio-config":{labelField:"name"},"tree-config":{children:"children",accordion:!0,line:!0,iconOpen:"fa fa-minus-square-o",iconClose:"fa fa-plus-square-o"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("更多自定义")]),n("vxe-table",{ref:"xTree",attrs:{resizable:"","show-overflow":"","highlight-hover-row":"","row-key":"",size:"mini","checkbox-config":{labelField:"name"},"tree-config":{children:"children",accordion:!0,line:!0,iconOpen:"fa fa-caret-down",iconClose:"fa fa-caret-right"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"Name","tree-node":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[a.children&&a.children.length?[n("i",{staticClass:"tree-node-icon fa",class:e.$refs.xTree.isTreeExpandByRow(a)?"fa-folder-open-o":"fa-folder-o"})]:[n("i",{staticClass:"tree-node-icon fa fa-file-o"})],n("span",[e._v(e._s(a.name))])],2)]}}])}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[8]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          resizable\n          show-overflow\n          highlight-hover-row\n          row-key\n          :tree-config="{children: \'children\', line: true}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          show-overflow\n          highlight-hover-row\n          highlight-current-row\n          row-key\n          size="medium"\n          :tree-config="{children: \'children\', accordion: true, line: true, iconOpen: \'vxe-icon--caret-right rotate45\', iconClose: \'vxe-icon--caret-right\'}"\n          :checkbox-config="{labelField: \'name\'}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" title="Name" width="280" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          show-overflow\n          highlight-hover-row\n          row-key\n          size="small"\n          :radio-config="{labelField: \'name\'}"\n          :tree-config="{children: \'children\', accordion: true, line: true, iconOpen: \'fa fa-minus-square-o\', iconClose: \'fa fa-plus-square-o\'}"\n          :data="tableData">\n          <vxe-table-column type="radio" title="Name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          show-overflow\n          highlight-hover-row\n          row-key\n          ref="xTree"\n          size="mini"\n          :tree-config="{children: \'children\', accordion: true, line: true, iconOpen: \'fa fa-caret-down\', iconClose: \'fa fa-caret-right\'}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" tree-node>\n            <template v-slot="{ row }">\n              <span>\n                <template v-if="row.children && row.children.length">\n                  <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? \'fa-folder-open-o\' : \'fa-folder-o\'"></i>\n                </template>\n                <template v-else>\n                  <i class="tree-node-icon fa fa-file-o"></i>\n                </template>\n                <span>{{ row.name }}</span>\n              </span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ","\n        .tree-node-icon {\n          width: 16px;\n          text-align: center;\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},d=c,u=(n("28cc"),n("2877")),v=Object(u["a"])(d,a,l,!1,null,"62a99f3f",null);t["default"]=v.exports},"950c":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("自定义图标，通过设置 "),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"iconOpen"}}),e._v(", "),n("table-api-link",{attrs:{prop:"iconClose"}}),e._v("} 局部替换默认的图标")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getTreeExpansionEvent}},[e._v("获取已展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree1",attrs:{border:"",resizable:"","tree-config":{children:"children",iconOpen:"fa fa-minus-square-o",iconClose:"fa fa-plus-square-o"},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("更多自定义")]),n("vxe-table",{ref:"xTree2",attrs:{resizable:"","show-overflow":"","tree-config":{children:"children",iconOpen:"fa fa-minus-circle",iconClose:"fa fa-plus-circle"},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[a.children&&a.children.length?[n("i",{staticClass:"tree-node-icon fa",class:e.$refs.xTree2.isTreeExpandByRow(a)?"fa-folder-open-o":"fa-folder-o"})]:[n("i",{staticClass:"tree-node-icon fa fa-file-o"})],n("span",[e._v(e._s(a.name))])],2)]}}])}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          ref="xTree"\n          :tree-config="{children: \'children\', iconOpen: \'fa fa-minus-square-o\', iconClose: \'fa fa-plus-square-o\'}"\n          :data="tableData">\n          <vxe-table-column field="name" title="app.body.label.name"  tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            getTreeExpansionEvent () {\n              let treeExpandRecords = this.$refs.xTree.getTreeExpandRecords()\n              this.$XModal.alert(treeExpandRecords.length)\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          show-overflow\n          ref="xTree"\n          :tree-config="{children: \'children\', iconOpen: \'fa fa-minus-circle\', iconClose: \'fa fa-plus-circle\'}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" tree-node>\n            <template v-slot="{ row }">\n              <span>\n                <template v-if="row.children && row.children.length">\n                  <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? \'fa-folder-open-o\' : \'fa-folder-o\'"></i>\n                </template>\n                <template v-else>\n                  <i class="tree-node-icon fa fa-file-o"></i>\n                </template>\n                <span>{{ row.name }}</span>\n              </span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ","\n        .tree-node-icon {\n          width: 20px;\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{getTreeExpansionEvent:function(){var e=this.$refs.xTree1.getTreeExpandRecords();this.$XModal.alert(e.length)}}},d=c,u=(n("8cd6"),n("2877")),v=Object(u["a"])(d,a,l,!1,null,"397fcf1f",null);t["default"]=v.exports},9623:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},l=[],o=n("2877"),i={},r=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=r.exports},af9c:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-input",{attrs:{size:"small",placeholder:"搜索"}})]},proxy:!0},{key:"tools",fn:function(){return[n("vxe-button",{attrs:{status:"primary"}},[e._v("操作1")]),n("vxe-button",{attrs:{status:"primary"}},[e._v("操作2")]),n("vxe-button",{attrs:{status:"primary"}},[e._v("操作3")])]},proxy:!0}])}),n("vxe-table",{attrs:{border:"",resizable:"","tree-config":{children:"children"},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name"}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s("类型："+(a.type||"无")))])]}}])}),n("vxe-table-column",{attrs:{field:"type",title:"Image","tree-node":""}},[[n("img",{attrs:{src:"static/other/img1.gif",height:"50"}})]],2),n("vxe-table-column",{attrs:{field:"date",title:"Date"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s(e.formatDate(a.date)))])]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("使用自定义模板渲染"),n("br"),n("span",{staticClass:"red"},[e._v("(注：树结构不支持大量数据)")])])}],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-input size="small" placeholder="搜索"></vxe-input>\n          </template>\n          <template v-slot:tools>\n            <vxe-button status="primary">操作1</vxe-button>\n            <vxe-button status="primary">操作2</vxe-button>\n            <vxe-button status="primary">操作3</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          :tree-config="{children: \'children\'}"\n          :data="tableData">\n          <vxe-table-column field="name" title="app.body.label.name"></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type">\n            <template v-slot="{ row }">\n              <span>{{ `类型：${row.type || \'无\'}` }}</span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="type" title="Image" tree-node>\n            <template>\n              <img src="static/other/img1.gif" height="50">\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="date" title="Date">\n            <template v-slot="{ row }">\n              <span>{{ formatDate(row.date) }}</span>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            formatDate (value) {\n              return XEUtils.toDateString(value, 'yyyy-MM-dd HH:mm:ss.S')\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{formatDate:function(e){return i.a.toDateString(e,"yyyy-MM-dd HH:mm:ss.S")}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},b0da:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("基于树表格实现分组汇总合计")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","show-footer":"","max-height":"400",loading:e.loading,"tree-config":e.tableTreeConfig,"span-method":e.colspanMethod,"footer-method":e.footerMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"名称","tree-node":"",formatter:e.formatName}}),n("vxe-table-column",{attrs:{field:"level",title:"级别"}}),n("vxe-table-column",{attrs:{field:"age",title:"年龄"}}),n("vxe-table-column",{attrs:{field:"rate",title:"分数"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("99af"),n("4160"),n("a630"),n("d81d"),n("b0c0"),n("d3b7"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData:[],tableTreeConfig:{children:"children",accordion:!0,expandAll:!1},demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          show-footer\n          ref="xTree"\n          max-height="400"\n          :loading="loading"\n          :tree-config="tableTreeConfig"\n          :span-method="colspanMethod"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column field="name" title="名称" tree-node :formatter="formatName"></vxe-table-column>\n          <vxe-table-column field="level" title="级别"></vxe-table-column>\n          <vxe-table-column field="age" title="年龄"></vxe-table-column>\n          <vxe-table-column field="rate" title="分数"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableTreeConfig: {\n                children: 'children',\n                accordion: true, // 一层只允许展开一个节点\n                expandAll: false // 默认是否全部展开\n              }\n            }\n          },\n          created () {\n            this.loading = true\n            this.findList().then(data => {\n              this.tableData = this.getGroupSummary(data)\n              this.loading = false\n            })\n          },\n          methods: {\n            findList () {\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  let list = [\n                    {\n                      name: '一班',\n                      level: '',\n                      age: '',\n                      rate: '',\n                      children: [\n                        { name: 'test7', rate: 9, age: 24, level: 1 },\n                        { name: 'test6', rate: 14, age: 20, level: 3 },\n                        {\n                          name: '第一组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test85', rate: 13, age: 32, level: 1 },\n                            { name: 'test37', rate: 9, age: 29, level: 4 },\n                            { name: 'test93', rate: 22, age: 28, level: 5 },\n                            { name: 'test90', rate: 55, age: 26, level: 2 }\n                          ]\n                        },\n                        { name: 'test32', rate: 11, age: 21, level: 1 }\n                      ]\n                    },\n                    {\n                      name: '二班',\n                      level: '',\n                      age: '',\n                      rate: '',\n                      children: [\n                        { name: 'test15', rate: 13, age: 32, level: 1 },\n                        { name: 'test44', rate: 9, age: 29, level: 4 },\n                        {\n                          name: '第一组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test37', rate: 9, age: 29, level: 4 },\n                            { name: 'test93', rate: 22, age: 28, level: 5 }\n                          ]\n                        },\n                        {\n                          name: '第二组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test74', rate: 11, age: 32, level: 5 },\n                            { name: 'test99', rate: 23, age: 18, level: 4 },\n                            {\n                              name: '第一排',\n                              level: '',\n                              age: '',\n                              rate: '',\n                              children: [\n                                { name: 'test48', rate: 77, age: 29, level: 4 },\n                                { name: 'test38', rate: 34, age: 21, level: 2 }\n                              ]\n                            },\n                            { name: 'test16', rate: 22, age: 26, level: 5 }\n                          ]\n                        },\n                        { name: 'test91', rate: 16, age: 27, level: 5 },\n                        {\n                          name: '第三组',\n                          level: '',\n                          age: '',\n                          rate: '',\n                          children: [\n                            { name: 'test77', rate: 11, age: 35, level: 1 },\n                            { name: 'test89', rate: 40, age: 18, level: 4 },\n                            { name: 'test10', rate: 22, age: 20, level: 2 }\n                          ]\n                        }\n                      ]\n                    },\n                    {\n                      name: '三班',\n                      level: '',\n                      age: '',\n                      rate: '',\n                      children: [\n                        { name: 'test6', rate: 3, age: 22, level: 2 },\n                        { name: 'test2', rate: 5, age: 25, level: 3 },\n                        { name: 'test42', rate: 17, age: 35, level: 4 }\n                      ]\n                    }\n                  ]\n                  resolve(list)\n                }, 300)\n              })\n            },\n            formatName ({ row }) {\n              return row.children && row.children.length ? `${row.name} (${row.num}人)` : row.name\n            },\n            // 计算逻辑\n            handleSummary  (children) {\n              return {\n                num: XEUtils.sum(children, 'num'),\n                level: Math.floor(XEUtils.sum(children, 'level')),\n                age: parseInt(XEUtils.mean(children, 'age')),\n                rate: XEUtils.sum(children, 'rate')\n              }\n            },\n            getGroupSummary (data) {\n              XEUtils.eachTree(data, (row, index, items, path, parent, nodes) => {\n                let children = row.children\n                if (children && children.length) {\n                  // 合计子节点\n                  Object.assign(row, this.handleSummary(children))\n                } else {\n                  row.num = 1\n                  if (index === items.length - 1) {\n                    // 全量汇总\n                    for (let len = nodes.length - 2; len >= 0; len--) {\n                      Object.assign(nodes[len], this.handleSummary(nodes[len].children))\n                    }\n                  }\n                }\n              }, this.tableTreeConfig)\n              XEUtils.eachTree(data, (row) => {\n                let children = row.children\n                if (children && children.length) {\n                  // 动态增加一行汇总\n                  children.push({\n                    name: `合计 (${row.name})`,\n                    level: row.level,\n                    age: row.age,\n                    rate: row.rate\n                  })\n                }\n              }, this.tableTreeConfig)\n              return data\n            },\n            colspanMethod ({ row, column }) {\n              // 当行被展开时将行合并\n              let xTree = this.$refs.xTree\n              if (row.children && row.children.length && xTree && xTree.isTreeExpandByRow(row)) {\n                if (column.treeNode) {\n                  return {\n                    rowspan: 1,\n                    colspan: 4\n                  }\n                } else {\n                  return {\n                    rowspan: 0,\n                    colspan: 0\n                  }\n                }\n              }\n            },\n            footerMethod ({ columns, data }) {\n              return [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return `合计 (${XEUtils.sum(data, 'num')}人)`\n                  }\n                  switch (column.property) {\n                    case 'level':\n                      return `总共 ${Math.floor(XEUtils.sum(data, 'level'))}`\n                    case 'age':\n                      return `平均年龄 ${parseInt(XEUtils.mean(data, 'age'))}`\n                    case 'rate':\n                      return `总分 ${XEUtils.sum(data, 'rate')}`\n                  }\n                  return '-'\n                })\n              ]\n            }\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,this.findList().then((function(t){e.tableData=e.getGroupSummary(t),e.loading=!1}))},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){return new Promise((function(e){setTimeout((function(){var t=[{name:"一班",level:"",age:"",rate:"",children:[{name:"test7",rate:9,age:24,level:1},{name:"test6",rate:14,age:20,level:3},{name:"第一组",level:"",age:"",rate:"",children:[{name:"test85",rate:13,age:32,level:1},{name:"test37",rate:9,age:29,level:4},{name:"test93",rate:22,age:28,level:5},{name:"test90",rate:55,age:26,level:2}]},{name:"test32",rate:11,age:21,level:1}]},{name:"二班",level:"",age:"",rate:"",children:[{name:"test15",rate:13,age:32,level:1},{name:"test44",rate:9,age:29,level:4},{name:"第一组",level:"",age:"",rate:"",children:[{name:"test37",rate:9,age:29,level:4},{name:"test93",rate:22,age:28,level:5}]},{name:"第二组",level:"",age:"",rate:"",children:[{name:"test74",rate:11,age:32,level:5},{name:"test99",rate:23,age:18,level:4},{name:"第一排",level:"",age:"",rate:"",children:[{name:"test48",rate:77,age:29,level:4},{name:"test38",rate:34,age:21,level:2}]},{name:"test16",rate:22,age:26,level:5}]},{name:"test91",rate:16,age:27,level:5},{name:"第三组",level:"",age:"",rate:"",children:[{name:"test77",rate:11,age:35,level:1},{name:"test89",rate:40,age:18,level:4},{name:"test10",rate:22,age:20,level:2}]}]},{name:"三班",level:"",age:"",rate:"",children:[{name:"test6",rate:3,age:22,level:2},{name:"test2",rate:5,age:25,level:3},{name:"test42",rate:17,age:35,level:4}]}];e(t)}),300)}))},formatName:function(e){var t=e.row;return t.children&&t.children.length?"".concat(t.name," (").concat(t.num,"人)"):t.name},handleSummary:function(e){return{num:i.a.sum(e,"num"),level:Math.floor(i.a.sum(e,"level")),age:parseInt(i.a.mean(e,"age")),rate:i.a.sum(e,"rate")}},getGroupSummary:function(e){var t=this;return i.a.eachTree(e,(function(e,n,a,l,o,i){var r=e.children;if(r&&r.length)Object.assign(e,t.handleSummary(r));else if(e.num=1,n===a.length-1)for(var s=i.length-2;s>=0;s--)Object.assign(i[s],t.handleSummary(i[s].children))}),this.tableTreeConfig),i.a.eachTree(e,(function(e){var t=e.children;t&&t.length&&t.push({name:"合计 (".concat(e.name,")"),level:e.level,age:e.age,rate:e.rate})}),this.tableTreeConfig),e},colspanMethod:function(e){var t=e.row,n=e.column,a=this.$refs.xTree;if(t.children&&t.children.length&&a&&a.isTreeExpandByRow(t))return n.treeNode?{rowspan:1,colspan:4}:{rowspan:0,colspan:0}},footerMethod:function(e){var t=e.columns,n=e.data;return[t.map((function(e,t){if(0===t)return"合计 (".concat(i.a.sum(n,"num"),"人)");switch(e.property){case"level":return"总共 ".concat(Math.floor(i.a.sum(n,"level")));case"age":return"平均年龄 ".concat(parseInt(i.a.mean(n,"age")));case"rate":return"总分 ".concat(i.a.sum(n,"rate"))}return"-"}))]}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},b142:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getTreeRadioEvent}},[e._v("获取选中")]),n("vxe-button",{on:{click:e.getTreeExpansionEvent}},[e._v("获取已展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree1",attrs:{"show-overflow":"","tree-config":"","show-header":!1,"radio-config":{labelField:"name"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio","tree-node":""}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("带连接线")]),n("vxe-table",{attrs:{"show-overflow":"","highlight-hover-row":"","row-key":"","show-header":!1,data:e.tableData,"checkbox-config":{labelField:"name"},"tree-config":{children:"children",accordion:!0,line:!0,iconOpen:"fa fa-caret-down",iconClose:"fa fa-caret-right"}}},[n("vxe-table-column",{attrs:{type:"checkbox","tree-node":""}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("更多功能")]),n("vxe-table",{ref:"xTree3",attrs:{"show-overflow":"","highlight-hover-row":"","row-key":"",border:"none","show-header":!1,data:e.tableData3,"checkbox-config":{labelField:"name"},"tree-config":{children:"children",accordion:!0,line:!0,iconOpen:"fa fa-minus-square-o",iconClose:"fa fa-plus-square-o"}}},[n("vxe-table-column",{attrs:{type:"checkbox","tree-node":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[a.children&&a.children.length?[n("i",{staticClass:"tree-node-icon fa",class:e.$refs.xTree3.isTreeExpandByRow(a)?"fa-folder-open-o":"fa-folder-o"})]:[n("i",{staticClass:"tree-node-icon fa fa-file-o"})],n("span",[e._v(e._s(a.name))])],2)]}}])}),n("vxe-table-column",{attrs:{title:"操作",width:"140"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("vxe-button",{attrs:{type:"text",icon:"fa fa-eye"}}),n("vxe-button",{attrs:{type:"text",icon:"fa fa-edit"}}),n("vxe-button",{attrs:{type:"text",icon:"fa fa-trash-o"},on:{click:function(t){return e.removeRowEvent(a)}}}),n("vxe-button",{attrs:{type:"text",icon:"fa fa-id-card-o"}})]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("普通树"),n("br"),n("span",{staticClass:"red"},[e._v("(注：树结构不支持大量数据)")])])}],o=(n("4160"),n("a630"),n("a434"),n("b0c0"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],tableData3:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="getTreeRadioEvent">获取选中</vxe-button>\n            <vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>\n            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          show-overflow\n          tree-config\n          ref="xTree"\n          :show-header="false"\n          :radio-config="{labelField: \'name\'}"\n          :data="tableData">\n          <vxe-table-column type="radio" tree-node></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            getTreeExpansionEvent () {\n              let selectRow = this.$refs.xTree.getRadioRecord()\n              this.$XModal.alert(selectRow ? selectRow.name : 'null')\n            },\n            getTreeExpansionEvent () {\n              let treeExpandRecords = this.$refs.xTree.getTreeExpandRecords()\n              this.$XModal.alert(treeExpandRecords.length)\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          show-overflow\n          highlight-hover-row\n          row-key\n          :show-header="false"\n          :data="tableData"\n          :checkbox-config="{labelField: \'name\'}"\n          :tree-config="{children: \'children\', accordion: true, line: true, iconOpen: \'fa fa-caret-down\', iconClose: \'fa fa-caret-right\'}">\n          <vxe-table-column type="checkbox" tree-node></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ",'\n        <vxe-table\n          show-overflow\n          highlight-hover-row\n          row-key\n          ref="xTree3"\n          border="none"\n          :show-header="false"\n          :data="tableData"\n          :checkbox-config="{labelField: \'name\'}"\n          :tree-config="{children: \'children\', accordion: true, line: true, iconOpen: \'fa fa-minus-square-o\', iconClose: \'fa fa-plus-square-o\'}">\n          <vxe-table-column type="checkbox" tree-node>\n            <template v-slot="{ row }">\n              <span>\n                <template v-if="row.children && row.children.length">\n                  <i class="tree-node-icon fa" :class="$refs.xTree3.isTreeExpandByRow(row) ? \'fa-folder-open-o\' : \'fa-folder-o\'"></i>\n                </template>\n                <template v-else>\n                  <i class="tree-node-icon fa fa-file-o"></i>\n                </template>\n                <span>{{ row.name }}</span>\n              </span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column title="操作" width="140">\n            <template v-slot="{ row }">\n              <vxe-button type="text" icon="fa fa-eye"></vxe-button>\n              <vxe-button type="text" icon="fa fa-edit"></vxe-button>\n              <vxe-button type="text" icon="fa fa-trash-o" @click="removeRowEvent(row)"></vxe-button>\n              <vxe-button type="text" icon="fa fa-id-card-o"></vxe-button>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            removeRowEvent (row) {\n              this.$XModal.confirm('您确定要删除吗？').then(type => {\n                if (type === 'confirm') {\n                  let matchObj = XEUtils.findTree(this.tableData, item => item === row, this.treeConfig)\n                  if (matchObj) {\n                    // 从树节点中移除\n                    matchObj.items.splice(matchObj.index, 1)\n                  }\n                }\n              })\n            }\n          }\n        }\n        ","\n        .tree-node-icon {\n          width: 24px;\n          text-align: center;\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0),this.tableData3=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{removeRowEvent:function(e){var t=this;this.$XModal.confirm("您确定要删除吗？").then((function(n){if("confirm"===n){var a=i.a.findTree(t.tableData3,(function(t){return t===e}),t.treeConfig);a&&a.items.splice(a.index,1)}}))},getTreeRadioEvent:function(){var e=this.$refs.xTree1.getRadioRecord();this.$XModal.alert(e?e.name:"null")},getTreeExpansionEvent:function(){var e=this.$refs.xTree1.getTreeExpandRecords();this.$XModal.alert(e.length)}}},d=c,u=(n("4149"),n("2877")),v=Object(u["a"])(d,a,l,!1,null,"6d1aaa19",null);t["default"]=v.exports},bb1e:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("手风琴展开效果，通过配置 tree-config={"),n("table-api-link",{attrs:{prop:"accordion"}}),e._v("} 属性来开启同一级的节点，每次只能展开一个")],1),n("vxe-table",{attrs:{border:"",resizable:"","tree-config":{children:"children",accordion:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          :tree-config="{children: \'children\', accordion: true}"\n          :data="tableData">\n          <vxe-table-column field="name" title="app.body.label.name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},bda2:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("实现树结构深层排序")]),n("vxe-table",{attrs:{"max-height":"600",loading:e.loading,data:e.tableData,"tree-config":{children:"children"}},on:{"sort-change":e.sortChangeEvent}},[n("vxe-table-column",{attrs:{field:"id",title:"ID",width:"80"}}),n("vxe-table-column",{attrs:{field:"name",title:"名称","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"大小",width:"140"}}),n("vxe-table-column",{attrs:{field:"type",title:"类型",width:"140"}}),n("vxe-table-column",{attrs:{field:"date",title:"修改日期",width:"260",sortable:"","remote-sort":""}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{filterName:"",loading:!1,originData:[],tableData:[],demoCodes:['\n        <vxe-table\n          max-height="600"\n          :loading="loading"\n          :data="tableData"\n          :tree-config="{children: \'children\'}"\n          @sort-change="sortChangeEvent">\n          <vxe-table-column field="id" title="ID" width="80"></vxe-table-column>\n          <vxe-table-column field="name" title="名称" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="大小" width="140"></vxe-table-column>\n          <vxe-table-column field="type" title="类型" width="140"></vxe-table-column>\n          <vxe-table-column field="date" title="修改日期" width="260" sortable remote-sort></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              originData: [],\n              tableData: []\n            }\n          },\n          created () {\n            this.originData = XEUtils.toTreeArray(window.MOCK_TREE_DATA_LIST)\n            this.findList()\n          },\n          methods: {\n            // 模拟后台接口\n            findList (order) {\n              this.loading = true\n              setTimeout(() => {\n                this.loading = false\n                // 将有关联的列表转成树结构\n                if (order === 'asc') {\n                  this.tableData = XEUtils.toArrayTree(this.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: false })\n                } else if (order === 'desc') {\n                  this.tableData = XEUtils.toArrayTree(this.originData, { key: 'id', parentKey: 'parentId', sortKey: 'date', reverse: true })\n                } else {\n                  this.tableData = XEUtils.toArrayTree(this.originData, { key: 'id', parentKey: 'parentId' })\n                }\n              }, 300)\n            },\n            sortChangeEvent ({ column, property, order }) {\n              this.findList(order)\n            }\n        }"]}},created:function(){this.originData=i.a.toTreeArray(i.a.clone(window.MOCK_TREE_DATA_LIST,!0)),this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(e){var t=this;this.loading=!0,setTimeout((function(){t.loading=!1,t.tableData="asc"===e?i.a.toArrayTree(t.originData,{key:"id",parentKey:"parentId",sortKey:"date",reverse:!1}):"desc"===e?i.a.toArrayTree(t.originData,{key:"id",parentKey:"parentId",sortKey:"date",reverse:!0}):i.a.toArrayTree(t.originData,{key:"id",parentKey:"parentId"})}),300)},sortChangeEvent:function(e){var t=e.order;this.findList(t)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},cafe:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("通过调用 "),n("table-api-link",{attrs:{prop:"validate"}}),e._v(" 函数校验数据，"),n("table-api-link",{attrs:{prop:"edit-rules"}}),e._v(" 校验规则配置")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.validEvent}},[e._v("校验")]),n("vxe-button",{on:{click:e.fullValidEvent}},[e._v("完整校验")]),n("vxe-button",{on:{click:e.selectValidEvent}},[e._v("选中校验")]),n("vxe-button",{on:{click:e.getSelectEvent}},[e._v("获取选中")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","keep-source":"","edit-rules":e.validRules,"tree-config":e.treeConfig,"edit-config":{trigger:"click",mode:"row",showStatus:!0},"checkbox-config":{labelField:"id"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"ID","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"size",title:"Size","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"type",title:"Type","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("99af"),n("4de4"),n("4160"),n("a630"),n("a15b"),n("d81d"),n("a9e3"),n("07ac"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],treeConfig:{children:"children"},validRules:{name:[{required:!0,message:"app.body.valid.rName"},{min:3,max:50,message:"文件名长度在 3 到 50 个字符"}]},demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="validEvent">校验</vxe-button>\n            <vxe-button @click="fullValidEvent">完整校验</vxe-button>\n            <vxe-button @click="selectValidEvent">选中校验</vxe-button>\n            <vxe-button @click="getSelectEvent">获取选中</vxe-button>\n            <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          keep-source\n          ref="xTree"\n          :edit-rules="validRules"\n          :tree-config="treeConfig"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          :checkbox-config="{labelField: \'id\'}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" title="ID" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              treeConfig: {\n                children: 'children'\n              },\n              validRules: {\n                name: [\n                  { required: true, message: 'app.body.valid.rName' },\n                  { min: 3, max: 50, message: '文件名长度在 3 到 50 个字符' }\n                ]\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            validEvent () {\n              this.$refs.xTree.validate(valid => {\n                if (valid) {\n                  this.$XModal.message({ status: 'success', message: '校验成功！' })\n                } else {\n                  this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                }\n              })\n            },\n            fullValidEvent () {\n              this.$refs.xTree.fullValidate((valid, errMap) => {\n                if (valid) {\n                  this.$XModal.message({ status: 'success', message: '校验成功！' })\n                } else {\n                  let msgList = []\n                  Object.values(errMap).forEach(errList => {\n                    errList.forEach(params => {\n                      let { row, column, rules } = params\n                      let matchObj = XEUtils.findTree(this.tableData, item => item === row, this.treeConfig)\n                      let seq = matchObj.path.filter(item => item !== this.treeConfig.children).map(item => Number(item) + 1).join('.')\n                      rules.forEach(rule => {\n                        msgList.push(`第 ${seq} 行 ${column.title} 校验错误：${rule.message}`)\n                      })\n                    })\n                  })\n                  this.$XModal.message({\n                    status: 'error',\n                    message: () => {\n                      return [\n                        <div class=\"red\" style=\"max-height: 400px;overflow: auto;\">\n                          {\n                            msgList.map(msg => {\n                              return <div>{ msg }</div>\n                            })\n                          }\n                        </div>\n                      ]\n                    }\n                  })\n                }\n              })\n            },\n            selectValidEvent () {\n              let selectRecords = this.$refs.xTree.getCheckboxRecords()\n              if (selectRecords.length > 0) {\n                this.$refs.xTree.validate(selectRecords, valid => {\n                  if (valid) {\n                    this.$XModal.message({ status: 'success', message: '校验成功！' })\n                  } else {\n                    this.$XModal.message({ status: 'error', message: '校验不通过！' })\n                  }\n                })\n              } else {\n                this.$XModal.message({ status: 'warning', message: '未选中数据！' })\n              }\n            },\n            getSelectEvent () {\n              let selectRecords = this.$refs.xTree.getCheckboxRecords()\n              this.$XModal.alert(selectRecords.length)\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xTree.getUpdateRecords()\n              this.$XModal.alert(updateRecords.length)\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{validEvent:function(){var e=this;this.$refs.xTree.validate((function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},fullValidEvent:function(){var e=this,t=this.$createElement;this.$refs.xTree.fullValidate((function(n,a){if(n)e.$XModal.message({status:"success",message:"校验成功！"});else{var l=[];Object.values(a).forEach((function(t){t.forEach((function(t){var n=t.row,a=t.column,o=t.rules,r=i.a.findTree(e.tableData,(function(e){return e===n}),e.treeConfig),s=r.path.filter((function(t){return t!==e.treeConfig.children})).map((function(e){return Number(e)+1})).join(".");o.forEach((function(e){l.push("第 ".concat(s," 行 ").concat(a.title," 校验错误：").concat(e.message))}))}))})),e.$XModal.message({status:"error",message:function(){return[t("div",{class:"red",style:"max-height: 400px;overflow: auto;"},[l.map((function(e){return t("div",[e])}))])]}})}}))},selectValidEvent:function(){var e=this,t=this.$refs.xTree.getCheckboxRecords();t.length>0?this.$refs.xTree.validate(t,(function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})})):this.$XModal.message({status:"warning",message:"未选中数据！"})},getSelectEvent:function(){var e=this.$refs.xTree.getCheckboxRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTree.getUpdateRecords();this.$XModal.alert(e.length)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},ce1c:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("使用 "),n("table-api-link",{attrs:{prop:"highlight-current-row"}}),e._v(" 方式")],1),n("vxe-table",{attrs:{"highlight-current-row":"","tree-config":{children:"children"},data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("使用 radio 方式")]),n("vxe-table",{attrs:{"tree-config":{children:"children"},"radio-config":{labelField:"name",highlight:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",title:"Name",width:"400","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("当然也可以两种方式同时使用")]),n("vxe-table",{ref:"xTable3",attrs:{resizable:"","highlight-current-row":"","tree-config":{children:"children"},"radio-config":{labelField:"name",trigger:"row"},data:e.tableData},on:{"current-change":e.currentChangeEvent}},[n("vxe-table-column",{attrs:{type:"radio",width:"400","tree-node":""},scopedSlots:e._u([{key:"header",fn:function(){return[n("vxe-button",{attrs:{type:"text",disabled:!e.selectRow},on:{click:e.clearCurrentRowEvent}},[e._v("取消")])]},proxy:!0}])}),n("vxe-table-column",{attrs:{field:"size",title:"Size"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],selectRow:null,demoCodes:['\n        <vxe-table\n          highlight-current-row\n          :tree-config="{children: \'children\'}"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ",'\n        <vxe-table\n          :tree-config="{children: \'children\'}"\n          :radio-config="{labelField: \'name\', highlight: true}"\n          :data="tableData">\n          <vxe-table-column type="radio" title="Name" width="400" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }\n        ",'\n        <vxe-table\n          resizable\n          highlight-current-row\n          ref="xTable"\n          :tree-config="{children: \'children\'}"\n          :radio-config="{labelField: \'name\', trigger: \'row\'}"\n          :data="tableData"\n          @current-change="currentChangeEvent">\n          <vxe-table-column type="radio" width="400" tree-node>\n            <template v-slot:header>\n              <vxe-button type="text" @click="clearCurrentRowEvent" :disabled="!selectRow">取消</vxe-button>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="size" title="Size"></vxe-table-column>\n          <vxe-table-column field="type" title="Type"></vxe-table-column>\n          <vxe-table-column field="date" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              selectRow: null\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          },\n          methods: {\n            currentChangeEvent ({ row }) {\n              this.selectRow = row\n            },\n            clearCurrentRowEvent () {\n              this.selectRow = null\n              this.$refs.xTable.clearRadioRow()\n              this.$refs.xTable.clearCurrentRow()\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{currentChangeEvent:function(e){var t=e.row;this.selectRow=t},clearCurrentRowEvent:function(){this.selectRow=null,this.$refs.xTable3.clearRadioRow(),this.$refs.xTable3.clearCurrentRow()}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},cfca:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("实现树结构深层查找")]),n("vxe-table",{ref:"xTree",attrs:{"max-height":"600",loading:e.loading,data:e.tableData,"tree-config":{children:"children"}}},[n("vxe-table-column",{attrs:{field:"name",title:"名称","tree-node":""},scopedSlots:e._u([{key:"header",fn:function(){return[n("div",[e._v("名称")]),n("input",{directives:[{name:"model",rawName:"v-model",value:e.filterName,expression:"filterName"}],attrs:{type:"type",placeholder:"Filter"},domProps:{value:e.filterName},on:{keyup:e.searchEvent,input:function(t){t.target.composing||(e.filterName=t.target.value)}}})]},proxy:!0}])}),n("vxe-table-column",{attrs:{field:"size",title:"大小",width:"140"}}),n("vxe-table-column",{attrs:{field:"type",title:"类型",width:"140"}}),n("vxe-table-column",{attrs:{field:"date",title:"修改日期",width:"260"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("c975"),n("45fc"),n("d3b7"),n("25f0"),n("3ca3"),n("498a"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{filterName:"",loading:!1,originData:[],tableData:[],demoCodes:['\n        <vxe-table\n          ref="xTree"\n          max-height="600"\n          :loading="loading"\n          :data="tableData"\n          :tree-config="{children: \'children\'}">\n          <vxe-table-column field="name" title="名称" tree-node>\n            <template v-slot:header="{ row }">\n              <div>名称</div>\n              <input v-model="filterName" type="type" placeholder="Filter" @keyup="searchEvent">\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="size" title="大小" width="140"></vxe-table-column>\n          <vxe-table-column field="type" title="类型" width="140"></vxe-table-column>\n          <vxe-table-column field="date" title="修改日期" width="260"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              filterName: '',\n              loading: false,\n              originData: [],\n              tableData: []\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.loading = false\n              this.originData = XEUtils.clone(window.MOCK_TREE_DATA_LIST, true)\n              this.handleSearch()\n            }, 300)\n          },\n          methods: {\n            handleSearch () {\n              let filterName = XEUtils.toString(this.filterName).trim()\n              if (filterName) {\n                let options = { children: 'children' }\n                let searchProps = ['name']\n                this.tableData = XEUtils.searchTree(this.originData, item => searchProps.some(key => XEUtils.toString(item[key]).indexOf(filterName) > -1), options)\n                // 搜索之后默认展开所有子节点\n                this.$nextTick(() => {\n                  this.$refs.xTree.setAllTreeExpansion(true)\n                })\n              } else {\n                this.tableData = this.originData\n              }\n            },\n            // 创建一个防反跳策略函数，调用频率间隔 500 毫秒\n            searchEvent: XEUtils.debounce(function () {\n              this.handleSearch()\n            }, 500, { leading: false, trailing: true })\n          }\n        }"]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.loading=!1,e.originData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0),e.handleSearch()}),300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{handleSearch:function(){var e=this,t=i.a.toString(this.filterName).trim();if(t){var n={children:"children"},a=["name"];this.tableData=i.a.searchTree(this.originData,(function(e){return a.some((function(n){return i.a.toString(e[n]).indexOf(t)>-1}))}),n),this.$nextTick((function(){e.$refs.xTree.setAllTreeExpansion(!0)}))}else this.tableData=this.originData},searchEvent:i.a.debounce((function(){this.handleSearch()}),500,{leading:!1,trailing:!0})}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports},d13f:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},l=[],o=n("2877"),i={},r=Object(o["a"])(i,a,l,!1,null,null,null);t["default"]=r.exports},d69a:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{attrs:{data:e.tableData,refresh:{query:e.reload},export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.insertEvent}},[e._v(e._s(e.$t("app.body.button.insert")))]),n("vxe-button",{on:{click:e.removeEvent}},[e._v("移除选中")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")]),n("vxe-button",{on:{click:e.saveEvent}},[e._v("保存")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","export-config":"","keep-source":"","row-id":"id",loading:e.loading,"tree-config":e.treeConfig,"edit-config":{trigger:"click",mode:"row",showStatus:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"size",title:"Size","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"type",title:"Type","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","edit-render":{name:"input"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("增删改查、工具栏"),n("br"),n("span",{staticClass:"red"},[e._v("注：树形结构默认不支持 insert 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")])])}],o=(n("4160"),n("a630"),n("a434"),n("d3b7"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData:[],removeList:[],treeConfig:{children:"children"},demoCodes:['\n        <vxe-toolbar :data="tableData" :refresh="{query: reload}" export custom>\n          <template v-slot:buttons>\n            <vxe-button @click="insertEvent">{{ $t(\'app.body.button.insert\') }}</vxe-button>\n            <vxe-button @click="removeEvent">移除选中</vxe-button>\n            <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n            <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n            <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n            <vxe-button @click="saveEvent">保存</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          resizable\n          export-config\n          keep-source\n          ref="xTree"\n          row-id="id"\n          :loading="loading"\n          :tree-config="treeConfig"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>\n          <vxe-table-column field="size" title="Size" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" :edit-render="{name: \'input\'}"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" :edit-render="{name: \'input\'}"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              ttableData: [],\n              removeList: [],\n              treeConfig: {\n                children: 'children'\n              }\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  this.tableData = XEUtils.clone(window.MOCK_TREE_DATA_LIST, true)\n                  this.loading = false\n                  resolve(this.tableData)\n                }, 300)\n              })\n            },\n            insertEvent () {\n              let xTree = this.$refs.xTree\n              xTree.createRow({\n                name: '新数据',\n                date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),\n                isNew: true\n              }).then(newRow => {\n                // 插入到第一行\n                this.tableData.unshift(newRow)\n                xTree.refreshData().then(() => xTree.setActiveRow(newRow))\n              })\n            },\n            removeEvent () {\n              let xTree = this.$refs.xTree\n              let removeRecords = xTree.getCheckboxRecords()\n              removeRecords.forEach(row => {\n                let matchObj = XEUtils.findTree(this.tableData, item => item === row, this.treeConfig)\n                if (matchObj) {\n                  let { items, index } = matchObj\n                  // 从树节点中移除\n                  let restRow = items.splice(index, 1)[0]\n                  this.removeList.push(restRow)\n                }\n              })\n              xTree.refreshData()\n            },\n            reload () {\n              // 清除所有状态\n              this.$refs.xTree.clearAll()\n              return this.findList()\n            },\n            saveEvent () {\n              this.findList()\n            },\n            getInsertEvent () {\n              let insertRecords = XEUtils.filterTree(this.tableData, item => item.isNew, this.treeConfig)\n              this.$XModal.alert(insertRecords.length)\n            },\n            getRemoveEvent () {\n              let removeRecords = this.removeList\n              this.$XModal.alert(removeRecords.length)\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xTree.getUpdateRecords()\n              this.$XModal.alert(updateRecords.length)\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;return this.loading=!0,new Promise((function(t){setTimeout((function(){e.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0),e.loading=!1,t(e.tableData)}),300)}))},insertEvent:function(){var e=this,t=this.$refs.xTree;t.createRow({name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd"),isNew:!0}).then((function(n){e.tableData.unshift(n),t.refreshData().then((function(){return t.setActiveRow(n)}))}))},removeEvent:function(){var e=this,t=this.$refs.xTree,n=t.getCheckboxRecords();n.forEach((function(t){var n=i.a.findTree(e.tableData,(function(e){return e===t}),e.treeConfig);if(n){var a=n.items,l=n.index,o=a.splice(l,1)[0];e.removeList.push(o)}})),t.refreshData()},reload:function(){return this.$refs.xTree.clearAll(),this.findList()},saveEvent:function(){this.findList()},getInsertEvent:function(){var e=i.a.filterTree(this.tableData,(function(e){return e.isNew}),this.treeConfig);this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.removeList;this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTree.getUpdateRecords();this.$XModal.alert(e.length)}}},d=c,u=n("2877"),v=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=v.exports}}]);