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
30bf892ffd1dfa9196fe33127cc5572b68fd39de
vxe-table/docs/static/js/tree.99e7bfc9.js
xuliangzhan 5869b1b207 update
2019-09-06 15:22:19 +08:00

1 line
51 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")),o=n.n(i),r={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){o.a.highlightBlock(e)})}},s=r,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:"selection",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"},"select-config":{labelField:"name",checkRowKeys:["122000","20000"]}},on:{"select-change":e.selectChangeEvent}},[n("vxe-table-column",{attrs:{type:"selection",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"},"select-config":{checkStrictly:!0}}},[n("vxe-table-column",{attrs:{type:"selection",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")),o=n.n(i),r={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="selection" 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 :select-config="{labelField: \'name\', checkRowKeys: [\'122000\', \'20000\']}"\n @select-change="selectChangeEvent">\n <vxe-table-column type="selection" 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 :select-config="{checkStrictly: true}">\n <vxe-table-column type="selection" 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){o.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=r,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-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"}}),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:{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:{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=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.n(i),r={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 }\n ",'\n <vxe-table\n :data="tableData"\n :tree-config="{children: \'children\', expandAll: true}">\n <vxe-table-column type="index" width="120" title="序号" tree-node></vxe-table-column>\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"></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){o.a.highlightBlock(e)})}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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",[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")),o=n.n(i),r={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=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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"},"select-config":{labelField:"id"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"selection",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")),o=n.n(i),r={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 :select-config="{labelField: \'id\'}"\n :data="tableData">\n <vxe-table-column type="selection" 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){o.a.highlightBlock(e)})}},s=r,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")),o=n.n(i),r={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){o.a.highlightBlock(e)})}},s=r,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",[n("p",{staticClass:"tip"},[e._v("插入数据：树形结构默认不支持 insert 相关方法，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")]),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:"selection",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=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.n(i),r={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="selection" 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){o.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=r,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",[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"},"edit-config":{trigger:"click",mode:"row"},"select-config":{labelField:"id"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"selection",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("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.n(i),r={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 :select-config="{labelField: \'id\'}"\n :data="tableData">\n <vxe-table-column type="selection" 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){o.a.highlightBlock(e)})}},s=r,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",[n("p",{staticClass:"tip"},[e._v("快捷菜单操作，如果要往子节点插入数据，你可以把表格当成一个子组件进行封装，自行操作数据源即可")]),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:"selection",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(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 | 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")),o=n.n(i),r={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="selection" 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 }) {\n let xTree = this.$refs.xTree\n let treeConfig = this.treeConfig\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.hasTreeExpand(row)\n item.disabled = ['expand'].includes(item.code) ? isExpand : !isExpand\n } else {\n item.disabled = true\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){o.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=this.$refs.xTree,a=this.treeConfig;return this.bodyMenus.forEach(function(e){e.forEach(function(e){if(["expand","contract"].includes(e.code))if(t[a.children]&&t[a.children].length){var l=n.hasTreeExpand(t);e.disabled=["expand"].includes(e.code)?l:!l}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=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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")),o=n.n(i),r={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){o.a.highlightBlock(e)})}},s=r,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")),o=n.n(i),r={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){o.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=r,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"),o={},r=Object(i["a"])(o,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",[n("p",{staticClass:"tip"},[e._v("增删改查、工具栏")]),n("vxe-toolbar",{attrs:{data:e.tableData,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:function(t){return e.$refs.xTree.removeSelecteds()}}},[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":{children:"children"},"edit-config":{trigger:"click",mode:"row",showStatus:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"selection",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=[],i=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),o=n.n(i),r={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar :data="tableData" 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="{children: \'children\'}"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n :data="tableData">\n <vxe-table-column type="selection" 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 }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n },\n methods: {\n insertEvent () {\n let record = {\n date: this.$utils.toDateString(new Date(), 'yyyy-MM-dd')\n }\n this.$refs.xTree.insert(record)\n .then(({ row }) => this.$refs.xTree.setActiveRow(row))\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTree.getInsertRecords()\n this.$XModal.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTree.getRemoveRecords()\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){o.a.highlightBlock(e)})},methods:{insertEvent:function(){var e=this,t={date:this.$utils.toDateString(new Date,"yyyy-MM-dd")};this.$refs.xTree.insert(t).then(function(t){var n=t.row;return e.$refs.xTree.setActiveRow(n)})},getInsertEvent:function(){var e=this.$refs.xTree.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xTree.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xTree.getUpdateRecords();this.$XModal.alert(e.length)}}},s=r,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