lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
c1a09525969cfa85d8e1ca2bf23f16d04e8e3f2c
vxe-table/docs/static/js/tree.45b865d3.js
xuliangzhan 7d0c28eda0 内部优化
2019-11-13 19:36:31 +08:00

1 line
78 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(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:"default",fn:function(t){var a=t.row;t.rowIndex;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=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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="{ 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=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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},on:{"select-change":e.selectChangeEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"120","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:{"select-change":e.selectChangeEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"Sex",width:"180","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(" 设置父子节点不互相关联")],1),n("vxe-table",{attrs:{resizable:"",data:e.tableData,"tree-config":{children:"children"},"checkbox-config":{checkStrictly:!0}}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"120","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[4]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n ")])],1)},l=[],i=(n("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n resizable\n :tree-config="{children: \'children\'}"\n :data="tableData"\n @select-change="selectChangeEvent">\n <vxe-table-column type="checkbox" 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 @select-change="selectChangeEvent">\n <vxe-table-column type="checkbox" title="Sex" width="180" 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="{checkStrictly: true}">\n <vxe-table-column type="checkbox" width="120" 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 }\n "]}},created:function(){this.tableData=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.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)}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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:"trigger"}}),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:{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"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date","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("table-api-link",{attrs:{prop:"expand-config"}}),e._v(" 参数设置默认展开树节点")],1),n("vxe-table",{attrs:{border:"",data:e.tableData,"tree-config":{children:"children",expandAll:!0}}},[n("vxe-table-column",{attrs:{type:"index",width:"160",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[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},l=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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="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"></vxe-table-column>\n <vxe-table-column field="date" title="Date" 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 treeExpandRecords = this.$refs.xTree.getTreeExpandRecords()\n this.$XModal.alert(treeExpandRecords.length)\n }\n }\n }\n ",'\n <vxe-table\n border\n :data="tableData"\n :tree-config="{children: \'children\', expandAll: true}">\n <vxe-table-column type="index" width="160" 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.tableData=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{getTreeExpansionEvent:function(){var e=this.$refs.xTree.getTreeExpandRecords();this.$XModal.alert(e.length)}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"21fc":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:"",loading:e.loading,"tree-config":e.tableTreeConfig,"span-method":e.colspanMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","tree-node":""}}),n("vxe-table-column",{attrs:{field:"num",title:"Num"}}),n("vxe-table-column",{attrs:{field:"level",title:"Level"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],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=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={data:function(){return{loading:!1,tableData:[],tableTreeConfig:{children:"children",trigger:"row",expandAll:!1},demoCodes:['\n <vxe-table\n border\n resizable\n :loading="loading"\n :tree-config="tableTreeConfig"\n :span-method="colspanMethod"\n :data="tableData">\n <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>\n <vxe-table-column field="num" title="Num"></vxe-table-column>\n <vxe-table-column field="level" title="Level"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate"></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 trigger: 'row', // 设置为点击行展开或收缩\n expandAll: false // 默认是否全部展开\n }\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n let list = [\n { gKey: 'Group 1', name: 'test7', num: 23, level: 9, age: 24, rate: 4 },\n { gKey: 'Group 1', name: 'test6', num: 63, level: 14, age: 20, rate: 3 },\n { gKey: 'Group 1', name: 'test51', num: 84.8, level: 21, age: 19, rate: 5 },\n { gKey: 'Group 1', name: 'test32', num: 63, level: 11, age: 21, rate: 1 },\n { gKey: 'Group 2', name: 'test15', num: 5.9, level: 13, age: 32, rate: 1 },\n { gKey: 'Group 2', name: 'test44', num: 23, level: 9, age: 29, rate: 4 },\n { gKey: 'Group 2', name: 'test44', num: 41, level: 22, age: 28, rate: 5 },\n { gKey: 'Group 2', name: 'test84', num: 63.9, level: 18, age: 24, rate: 2 },\n { gKey: 'Group 2', name: 'test91', num: 12, level: 16, age: 27, rate: 5 },\n { gKey: 'Group 3', name: 'test6', num: 33.6, level: 3, age: 22, rate: 2 },\n { gKey: 'Group 3', name: 'test2', num: 23, level: 5, age: 25, rate: 3 },\n { gKey: 'Group 3', name: 'test42', num: 66.8, level: 17, age: 35, rate: 4 }\n ]\n // 将列表进行分组\n let groupMap = this.$utils.groupBy(list, 'gKey')\n let groupList = []\n // 分组合计计算逻辑\n this.$utils.each(groupMap, (list, gKey) => {\n let children = list || []\n if (children) {\n let total = {\n name: '',\n num: `总和:${this.$utils.sum(children, 'num')}`,\n level: `总和:${this.$utils.sum(children, 'level')}`,\n age: `平均:${this.$utils.mean(children, 'age')}`,\n rate: `总和:${this.$utils.sum(children, 'rate')}`\n }\n children.push(total)\n }\n groupList.push({ name: gKey, children })\n })\n this.tableData = groupList\n this.loading = false\n }, 300)\n },\n methods: {\n colspanMethod ({ row, rowIndex, column, columnIndex, data, level }) {\n // 合并第一级数据的所有列，看起来美观一些\n if (level === 0) {\n if (columnIndex === 0) {\n return {\n rowspan: 1,\n colspan: 5\n }\n } else if (columnIndex < 5) {\n return {\n rowspan: 0,\n colspan: 0\n }\n }\n }\n }\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){var t=[{gKey:"Group 1",name:"test7",num:23,level:9,age:24,rate:4},{gKey:"Group 1",name:"test6",num:63,level:14,age:20,rate:3},{gKey:"Group 1",name:"test51",num:84.8,level:21,age:19,rate:5},{gKey:"Group 1",name:"test32",num:63,level:11,age:21,rate:1},{gKey:"Group 2",name:"test15",num:5.9,level:13,age:32,rate:1},{gKey:"Group 2",name:"test44",num:23,level:9,age:29,rate:4},{gKey:"Group 2",name:"test44",num:41,level:22,age:28,rate:5},{gKey:"Group 2",name:"test84",num:63.9,level:18,age:24,rate:2},{gKey:"Group 2",name:"test91",num:12,level:16,age:27,rate:5},{gKey:"Group 3",name:"test6",num:33.6,level:3,age:22,rate:2},{gKey:"Group 3",name:"test2",num:23,level:5,age:25,rate:3},{gKey:"Group 3",name:"test42",num:66.8,level:17,age:35,rate:4}],n=e.$utils.groupBy(t,"gKey"),a=[];e.$utils.each(n,(function(t,n){var l=t||[];if(l){var i={name:"",num:"总和:".concat(e.$utils.sum(l,"num")),level:"总和:".concat(e.$utils.sum(l,"level")),age:"平均:".concat(parseInt(e.$utils.mean(l,"age"))),rate:"总和:".concat(e.$utils.sum(l,"rate"))};l.push(i)}a.push({name:n,children:l})})),e.tableData=a,e.loading=!1}),300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{colspanMethod:function(e){e.row,e.rowIndex,e.column;var t=e.columnIndex,n=(e.data,e.level);if(0===n){if(0===t)return{rowspan:1,colspan:5};if(t<5)return{rowspan:0,colspan:0}}}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"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} 启用方向键功能")],1),n("vxe-table",{attrs:{"highlight-current-row":"",data:e.tableData,"tree-config":{children:"children"},"keyboard-config":{isArrow:!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 ")])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o=n("c695"),s=n.n(o),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}">\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){r.a.highlightBlock(e)}))}},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=[],i=n("2877"),r={},o=Object(i["a"])(r,a,l,!1,null,null,null);t["default"]=o.exports},"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:{resizable:"","tree-config":{children:"children"},"checkbox-config":{labelField:"id"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",title:"ID",fixed:"left",width:"200","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=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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 :checkbox-config="{labelField: \'id\'}"\n :data="tableData">\n <vxe-table-column type="checkbox" title="ID" fixed="left" width="200" 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=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},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("树表格的懒加载，通过配置 tree-config={"),n("table-api-link",{attrs:{prop:"hasLazy"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"lazyLoad"}}),e._v("} 加载方法来开启树形懒加载")],1),n("vxe-table",{attrs:{border:"",resizable:"","tree-config":{children:"children"},data:e.tableData}},[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","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 ")])],1)},l=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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"></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" 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 "]}},created:function(){this.tableData=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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,setting:""},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("获取新增")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","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 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")])])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={data:function(){return{tableData:[],treeConfig:{children:"children"},demoCodes:['\n <vxe-toolbar :data="tableData" setting>\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 </template>\n </vxe-toolbar>\n\n <vxe-table\n resizable\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: this.$utils.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: this.$utils.toDateString(new Date(), 'yyyy-MM-dd'),\n isNew: true\n }).then(newRow => {\n // 插入到 id 为 11000 的节点位置中\n let rowNode = this.$utils.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 = this.$utils.filterTree(this.tableData, item => item.isNew, this.treeConfig)\n this.$XModal.alert(insertRecords.length)\n }\n }\n }\n "]}},created:function(){this.tableData=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{insertEvent:function(){var e=this,t=this.$refs.xTree;t.createRow({name:"新数据",date:this.$utils.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:this.$utils.toDateString(new Date,"yyyy-MM-dd"),isNew:!0}).then((function(n){var a=e.$utils.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=this.$utils.filterTree(this.tableData,(function(e){return e.isNew}),this.treeConfig);this.$XModal.alert(e.length)}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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:"","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=[],i=(n("c5f6"),n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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 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 = this.$utils.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.getSelectRecords()\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.getSelectRecords()\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=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.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,i=t.rules,r=e.$utils.findTree(e.tableData,(function(e){return e===n}),e.treeConfig),o=r.path.filter((function(t){return t!==e.treeConfig.children})).map((function(e){return Number(e)+1})).join(".");i.forEach((function(e){l.push("第 ".concat(o," 行 ").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.getSelectRecords();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.getSelectRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTree.getUpdateRecords();this.$XModal.alert(e.length)}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")])])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"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:{data:e.tableData,setting:""},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:"","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 ")])}],i=(n("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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 :data="tableData" setting>\n <template v-slot:buttons>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n resizable\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: this.$utils.toDateString(new Date(), 'yyyy-MM-dd'),\n isNew: true\n }).then(newRow => {\n // 插入到指定节点位置中\n let rowNode = this.$utils.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 = this.$utils.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.resetCustoms()\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=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{insertAtEvent:function(e,t){var n=this,a=this.$refs.xTree;a.createRow({name:"新数据",date:this.$utils.toDateString(new Date,"yyyy-MM-dd"),isNew:!0}).then((function(l){var i=n.$utils.findTree(n.tableData,(function(t){return t===e}),n.treeConfig);i&&(i.items.splice(i.index,0,l),a.refreshData().then((function(){return a.setActiveCell(l,t.property)})))}))},getInsertEvent:function(){var e=this.$utils.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.resetCustoms();break;case"insertAt":this.insertAtEvent(n,a);break;case"expand":l.setTreeExpansion(n,!0);break;case"contract":l.setTreeExpansion(n,!1);break}}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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=[],i=n("2877"),r={},o=Object(i["a"])(r,a,l,!1,null,null,null);t["default"]=o.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=[],i=n("2877"),r={},o=Object(i["a"])(r,a,l,!1,null,null,null);t["default"]=o.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",[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:"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:"date",title:"Date","tree-node":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s(e.$utils.toDateString(a.date,"yyyy-MM-dd HH:mm:ss.S")))])]}}])})],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=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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="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="date" title="Date" tree-node>\n <template v-slot="{ row }">\n <span>{{ $utils.toDateString(row.date, \'yyyy-MM-dd HH:mm:ss.S\') }}</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 }\n "]}},created:function(){this.tableData=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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:"","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=[],i=(n("c5f6"),n("8615"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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 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 = this.$utils.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.getSelectRecords()\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.getSelectRecords()\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=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.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,i=t.rules,r=e.$utils.findTree(e.tableData,(function(e){return e===n}),e.treeConfig),o=r.path.filter((function(t){return t!==e.treeConfig.children})).map((function(e){return Number(e)+1})).join(".");i.forEach((function(e){l.push("第 ".concat(o," 行 ").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.getSelectRecords();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.getSelectRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTree.getUpdateRecords();this.$XModal.alert(e.length)}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",title:"Sex","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":{trigger:"row"},data:e.tableData},on:{"current-change":e.currentChangeEvent}},[n("vxe-table-column",{attrs:{type:"radio",width:"120","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:"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[4]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n ")])],1)},l=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={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 :data="tableData">\n <vxe-table-column type="radio" width="120" 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 }\n ",'\n <vxe-table\n resizable\n highlight-current-row\n ref="xTable3"\n :tree-config="{children: \'children\'}"\n :radio-config="{trigger: \'row\'}"\n :data="tableData"\n @current-change="currentChangeEvent">\n <vxe-table-column type="radio" width="120" 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="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 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.xTable3.clearRadioRow()\n }\n }\n }\n "]}},created:function(){this.tableData=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.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()}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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=[],i=n("2877"),r={},o=Object(i["a"])(r,a,l,!1,null,null,null);t["default"]=o.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,export:"",setting:""},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("获取修改")])]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{resizable:"","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 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")])])}],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(i),o={data:function(){return{tableData:[],removeList:[],treeConfig:{children:"children"},demoCodes:['\n <vxe-toolbar :data="tableData" export setting>\n <template v-slot:buttons>\n <vxe-button @click="insertEvent">新增</vxe-button>\n <vxe-button @click="$refs.xTree.removeSelecteds()">移除选中</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n resizable\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 ttableData: [],\n removeList: [],\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: this.$utils.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.getSelectRecords()\n removeRecords.forEach(row => {\n let matchObj = this.$utils.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 getInsertEvent () {\n let insertRecords = this.$utils.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.tableData=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{insertEvent:function(){var e=this,t=this.$refs.xTree;t.createRow({name:"新数据",date:this.$utils.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.getSelectRecords();n.forEach((function(t){var n=e.$utils.findTree(e.tableData,(function(e){return e===t}),e.treeConfig);if(n){var a=n.items,l=n.index,i=a.splice(l,1)[0];e.removeList.push(i)}})),t.refreshData()},getInsertEvent:function(){var e=this.$utils.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)}}},s=o,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports}}]);
Reference in New Issue View Git Blame Copy Permalink