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
fbc35cdfed0d0ec47ffde54b5606ad3d2c8bacb6
vxe-table/docs/v1/static/js/virtual-tree.d8a52c87.js
xuliangzhan 9fcb84d727 优化重构
2020-02-24 23:14:25 +08:00

1 line
64 KiB
JavaScript
Raw Blame History

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["virtual-tree"],{"049a":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("virtual-tree-api-link",{attrs:{prop:"highlight-current-row"}}),e._v(" 方式")],1),n("vxe-virtual-tree",{attrs:{"row-key":"","row-id":"id","highlight-current-row":"","tree-config":{children:"children"},data:e.tableData,columns:e.tableColumn1}}),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-virtual-tree",{attrs:{"row-key":"","row-id":"id","tree-config":{children:"children"},"radio-config":{labelField:"name"},data:e.tableData,columns:e.tableColumn2}}),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-virtual-tree",{ref:"xTree3",attrs:{resizable:"","row-key":"","highlight-current-row":"","row-id":"id","tree-config":{children:"children"},"radio-config":{labelField:"name",trigger:"row"},data:e.tableData,columns:e.tableColumn3},on:{"current-change":e.currentChangeEvent}}),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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){var e=this,t=this.$createElement;return{tableData:[],tableColumn1:[{field:"name",title:"Name",width:400,treeNode:!0},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],tableColumn2:[{type:"radio",title:"Name",width:400,treeNode:!0},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],tableColumn3:[{type:"radio",width:280,treeNode:!0,slots:{header:function(){return[t("vxe-button",{attrs:{type:"text",disabled:!e.selectRow},on:{click:e.clearCurrentRowEvent}},["取消"])]}}},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],selectRow:null,demoCodes:['\n <vxe-virtual-tree\n row-key\n highlight-current-row\n row-id="id"\n :tree-config="{children: \'children\'}"\n :data="tableData"\n :columns="tableColumn">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { field: 'name', title: 'Name', width: 400, treeNode: true },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n ",'\n <vxe-virtual-tree\n row-key\n row-id="id"\n :tree-config="{children: \'children\'}"\n :radio-config="{labelField: \'name\'}"\n :data="tableData"\n :columns="tableColumn">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'radio', title: 'Name', width: 400, treeNode: true },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n ",'\n <vxe-virtual-tree\n resizable\n row-key\n highlight-current-row\n ref="xVTree"\n row-id="id"\n :tree-config="{children: \'children\'}"\n :radio-config="{labelField: \'name\', trigger: \'row\'}"\n :data="tableData"\n :columns="tableColumn"\n @current-change="currentChangeEvent">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n {\n type: 'radio',\n width: 280,\n treeNode: true,\n slots: {\n header: () => {\n return [\n <vxe-button type=\"text\" onClick={ this.clearCurrentRowEvent } disabled={ !this.selectRow }>取消</vxe-button>\n ]\n }\n }\n },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ],\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.xTree.clearRadioRow()\n this.$refs.xTree.clearCurrentRow()\n }\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{currentChangeEvent:function(e){var t=e.row;this.selectRow=t},clearCurrentRowEvent:function(){this.selectRow=null,this.$refs.xTree3.clearRadioRow(),this.$refs.xTree3.clearCurrentRow()}}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},"27c3":function(e,t,n){"use strict";var a=n("c1e7"),r=n.n(a);r.a},"3e3c":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("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-virtual-tree",target:"_blank"}},[e._v("vxe-table-plugin-virtual-tree")]),e._v(" 插件的 API"),n("br"),n("span",{staticClass:"red"},[e._v("(实现原理就是把一颗树结构平铺进行渲染，可以支持虚拟滚动，但是会失去部分功能)")]),n("br"),e._v(" 通过配置 "),n("virtual-tree-api-link",{attrs:{prop:"tree-config"}}),e._v(" 和指定列 "),n("table-column-api-link",{attrs:{prop:"tree-node"}}),e._v(" 属性来开启树表格 ")],1),n("vxe-virtual-tree",{ref:"xVTree",attrs:{border:"",resizable:"","row-key":"",toolbar:"","tree-config":{children:"children"},columns:e.tableColumn1,data:e.tableData1},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("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("virtual-tree-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("virtual-tree-api-link",{attrs:{prop:"expandAll"}}),e._v(": true} 参数设置默认展开所有树节点")],1),n("vxe-virtual-tree",{attrs:{border:"","row-key":"","row-id":"id",data:e.tableData2,"tree-config":{children:"children",expandAll:!0},columns:e.tableColumn2}}),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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){return{tableData1:[],tableData2:[],tableColumn1:[{field:"name",title:"Name",treeNode:!0},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],tableColumn2:[{type:"seq",title:"序号",width:280,treeNode:!0},{field:"name",title:"Name"},{title:"基本信息",children:[{field:"size",title:"Size"},{field:"type",title:"Type"}]},{field:"date",title:"Date"}],demoCodes:['\n <vxe-virtual-tree\n border\n resizable\n row-key\n toolbar\n ref="xVTree"\n :tree-config="{children: \'children\'}"\n :columns="tableColumn1"\n :data="tableData">\n <template v-slot:buttons>\n <vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>\n <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn1: [\n { field: 'name', title: 'Name', treeNode: true },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\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-virtual-tree\n border\n row-key\n row-id="id"\n :data="tableData"\n :tree-config="{children: \'children\', expandAll: true}"\n :columns="tableColumn">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'seq', title: '序号', width: 280, treeNode: true },\n { field: 'name', title: 'Name' },\n {\n title: '基本信息',\n children: [\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' }\n ]\n },\n { field: 'date', title: 'Date' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n "]}},created:function(){this.tableData1=i.a.clone(window.MOCK_TREE_DATA_LIST,!0),this.tableData2=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{getTreeExpansionEvent:function(){var e=this.$refs.xTree.getTreeExpandRecords();this.$XModal.alert(e.length)}}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},"403e":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-virtual-tree",{ref:"xTree1",attrs:{"show-overflow":"",toolbar:"","row-key":"","row-id":"id","show-header":!1,"tree-config":{children:"children"},"radio-config":{labelField:"name"},columns:e.tableColumn1,data:e.tableData},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getTreeRadioEvent}},[e._v("获取选中")]),n("vxe-button",{on:{click:e.getTreeExpansionEvent}},[e._v("获取已展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("p",{staticClass:"tip"},[e._v("带连接线")]),n("vxe-virtual-tree",{attrs:{"show-overflow":"","highlight-hover-row":"","row-id":"id","show-header":!1,data:e.tableData,"checkbox-config":{labelField:"name"},"tree-config":{children:"children",line:!0,iconOpen:"fa fa-minus-square-o",iconClose:"fa fa-plus-square-o"},columns:e.tableColumn2}}),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-virtual-tree",{ref:"xTree3",attrs:{"show-overflow":"","highlight-hover-row":"","row-id":"id","show-header":!1,data:e.tableData,"checkbox-config":{labelField:"name"},"tree-config":{children:"children",line:!0,iconOpen:"fa fa-minus-square-o",iconClose:"fa fa-plus-square-o"},columns:e.tableColumn3}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n ")])],1)},r=[],o=(n("4160"),n("a630"),n("b0c0"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){var e=this,t=this.$createElement;return{tableData:[],tableColumn1:[{type:"radio",treeNode:!0}],tableColumn2:[{type:"checkbox",treeNode:!0}],tableColumn3:[{type:"checkbox",treeNode:!0,slots:{default:function(n){var a=n.row;return[t("span",[a.children&&a.children.length?t("i",{class:["tree-node-icon fa",e.$refs.xTree3.isTreeExpandByRow(a)?"fa-folder-open-o":"fa-folder-o"]}):t("i",{class:"tree-node-icon fa fa-file-o"}),t("span",[a.name])])]}}},{title:"操作",width:140,slots:{default:function(){return[t("vxe-button",{attrs:{type:"text",icon:"fa fa-eye"}}),t("vxe-button",{attrs:{type:"text",icon:"fa fa-edit"}}),t("vxe-button",{attrs:{type:"text",icon:"fa fa-trash-o"}}),t("vxe-button",{attrs:{type:"text",icon:"fa fa-id-card-o"}})]}}}],demoCodes:['\n <vxe-virtual-tree\n show-overflow\n toolbar\n row-key\n ref="xTree1"\n row-id="id"\n :show-header="false"\n :tree-config="{children: \'children\'}"\n :radio-config="{labelField: \'name\'}"\n :columns="tableColumn"\n :data="tableData">\n <template v-slot:buttons>\n <vxe-button @click="getTreeRadioEvent">获取选中</vxe-button>\n <vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>\n <vxe-button @click="$refs.xTree1.setAllTreeExpansion(true)">展开所有</vxe-button>\n <vxe-button @click="$refs.xTree1.clearTreeExpand()">关闭所有</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn1: [\n { type: 'radio', treeNode: true }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n },\n methods: {\n getTreeExpansionEvent () {\n let selectRow = this.$refs.xTree.getRadioRecord()\n this.$XModal.alert(selectRow ? selectRow.name : 'null')\n },\n getTreeExpansionEvent () {\n let treeExpandRecords = this.$refs.xTree.getTreeExpandRecords()\n this.$XModal.alert(treeExpandRecords.length)\n }\n }\n }\n ",'\n <vxe-virtual-tree\n show-overflow\n highlight-hover-row\n row-id="id"\n :show-header="false"\n :data="tableData"\n :checkbox-config="{labelField: \'name\'}"\n :tree-config="{children: \'children\', line: true, iconOpen: \'fa fa-minus-square-o\', iconClose: \'fa fa-plus-square-o\'}"\n :columns="tableColumn">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', treeNode: true }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n ",'\n <vxe-virtual-tree\n show-overflow\n highlight-hover-row\n ref="xVTree"\n row-id="id"\n :show-header="false"\n :data="tableData"\n :checkbox-config="{labelField: \'name\'}"\n :tree-config="{children: \'children\', line: true, iconOpen: \'fa fa-minus-square-o\', iconClose: \'fa fa-plus-square-o\'}"\n :columns="tableColumn3">\n </vxe-virtual-tree>\n ','\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n {\n type: \'checkbox\',\n treeNode: true,\n slots: {\n default: ({ row }) => {\n return [\n <span>\n {\n row.children && row.children.length\n ? <i class={ [\'tree-node-icon fa\', this.$refs.xTree.isTreeExpandByRow(row) ? \'fa-folder-open-o\' : \'fa-folder-o\'] }></i>\n : <i class="tree-node-icon fa fa-file-o"></i>\n }\n <span>{ row.name }</span>\n </span>\n ]\n }\n }\n },\n {\n title: \'操作\',\n width: 140,\n slots: {\n default: ({ row }) => {\n return [\n <vxe-button type="text" icon="fa fa-eye"></vxe-button>,\n <vxe-button type="text" icon="fa fa-edit"></vxe-button>,\n <vxe-button type="text" icon="fa fa-trash-o"></vxe-button>,\n <vxe-button type="text" icon="fa fa-id-card-o"></vxe-button>\n ]\n }\n }\n }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n ',"\n .tree-node-icon {\n width: 24px;\n text-align: center;\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{getTreeRadioEvent:function(){var e=this.$refs.xTree1.getRadioRecord();this.$XModal.alert(e?e.name:"null")},getTreeExpansionEvent:function(){var e=this.$refs.xTree1.getTreeExpandRecords();this.$XModal.alert(e.length)}}},c=d,u=(n("c98b"),n("2877")),v=Object(u["a"])(c,a,r,!1,null,"75e39fb9",null);t["default"]=v.exports},7627: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-virtual-tree",{ref:"xVTree",attrs:{resizable:"","row-key":"",toolbar:"","row-id":"id","tree-config":{children:"children"},"edit-config":{trigger:"click",mode:"row"},"checkbox-config":{labelField:"id"},columns:e.tableColumn,data:e.tableData},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("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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){return{tableData:[],tableColumn:[{type:"checkbox",title:"ID",treeNode:!0},{field:"name",title:"Name",editRender:{name:"input"}},{field:"size",title:"Size",editRender:{name:"input"}},{field:"type",title:"Type",editRender:{name:"input"}},{field:"date",title:"Date",editRender:{name:"input"}}],demoCodes:['\n <vxe-virtual-tree\n resizable\n row-key\n toolbar\n ref="xVTree"\n row-id="id"\n :tree-config="{children: \'children\'}"\n :edit-config="{trigger: \'click\', mode: \'row\'}"\n :checkbox-config="{labelField: \'id\'}"\n :columns="tableColumn"\n :data="tableData">\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-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', title: 'ID', treeNode: true },\n { field: 'name', title: 'Name', editRender: { name: 'input' } },\n { field: 'size', title: 'Size', editRender: { name: 'input' } },\n { field: 'type', title: 'Type', editRender: { name: 'input' } },\n { field: 'date', title: 'Date', editRender: { name: 'input' } }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},a872: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("virtual-tree-api-link",{attrs:{prop:"tree-config"}}),e._v("={"),n("virtual-tree-api-link",{attrs:{prop:"iconOpen"}}),e._v(", "),n("virtual-tree-api-link",{attrs:{prop:"iconClose"}}),e._v("} 局部替换默认的图标")],1),n("vxe-virtual-tree",{ref:"xTree1",attrs:{border:"",resizable:"","row-key":"",toolbar:"","row-id":"id",columns:e.tableColumn1,"tree-config":{children:"children",iconOpen:"fa fa-minus-square-o",iconClose:"fa fa-plus-square-o"},data:e.tableData},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getTreeExpansionEvent}},[e._v("获取已展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree1.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("p",{staticClass:"tip"},[e._v("更多自定义")]),n("vxe-virtual-tree",{ref:"xTree2",attrs:{resizable:"","show-overflow":"","row-key":"","row-id":"id",columns:e.tableColumn2,"tree-config":{children:"children",iconOpen:"fa fa-minus-circle",iconClose:"fa fa-plus-circle"},data:e.tableData}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n ")])],1)},r=[],o=(n("4160"),n("a630"),n("b0c0"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){var e=this,t=this.$createElement;return{tableData:[],tableColumn1:[{field:"name",title:"Name",width:400,treeNode:!0},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],tableColumn2:[{field:"name",title:"Name",width:400,treeNode:!0,slots:{default:function(n){var a=n.row;return[t("span",[a.children&&a.children.length?t("i",{class:["tree-node-icon fa",e.$refs.xTree2.isTreeExpandByRow(a)?"fa-folder-open-o":"fa-folder-o"]}):t("i",{class:"tree-node-icon fa fa-file-o"}),t("span",[a.name])])]}}},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],demoCodes:['\n <vxe-virtual-tree\n border\n resizable\n row-key\n toolbar\n ref="xTree1"\n row-id="id"\n :columns="tableColumn1"\n :tree-config="{children: \'children\', iconOpen: \'fa fa-minus-square-o\', iconClose: \'fa fa-plus-square-o\'}"\n :data="tableData">\n <template v-slot:buttons>\n <vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>\n <vxe-button @click="$refs.xTree1.setAllTreeExpansion(true)">展开所有</vxe-button>\n <vxe-button @click="$refs.xTree1.clearTreeExpand()">关闭所有</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn1: [\n { field: 'name', title: 'Name', width: 400, treeNode: true },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\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-virtual-tree\n resizable\n show-overflow\n row-key\n ref="xVTree"\n row-id="id"\n :columns="tableColumn"\n :tree-config="{children: \'children\', iconOpen: \'fa fa-minus-circle\', iconClose: \'fa fa-plus-circle\'}"\n :data="tableData">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n {\n field: 'name',\n title: 'Name',\n width: 400,\n treeNode: true,\n slots: {\n default: ({ row }) => {\n return [\n <span>\n {\n row.children && row.children.length\n ? <i class={ ['tree-node-icon fa', this.$refs.xTree.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'] }></i>\n : <i class=\"tree-node-icon fa fa-file-o\"></i>\n }\n <span>{ row.name }</span>\n </span>\n ]\n }\n }\n },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n ","\n .tree-node-icon {\n width: 20px;\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{getTreeExpansionEvent:function(){var e=this.$refs.xTree1.getTreeExpandRecords();this.$XModal.alert(e.length)}}},c=d,u=(n("27c3"),n("2877")),v=Object(u["a"])(c,a,r,!1,null,"3b26cbca",null);t["default"]=v.exports},b127: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-virtual-tree",{ref:"xVTree",attrs:{resizable:"","row-key":"","export-config":"","keep-source":"","row-id":"id",toolbar:{export:!0,zoom:!0,custom:!0},"tree-config":{children:"children"},"edit-config":{trigger:"click",mode:"row",showStatus:!0},data:e.tableData,columns:e.tableColumn},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.removeSelectEvent()}}},[e._v("删除选中")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getSelectEvent}},[e._v("获取选中")])]},proxy:!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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){var e=this,t=this.$createElement;return{tableData:[],tableColumn:[{type:"checkbox",width:120,treeNode:!0},{field:"name",title:"Name",editRender:{name:"input"}},{field:"size",title:"Size",editRender:{name:"input"}},{field:"type",title:"Type",editRender:{name:"input"}},{field:"date",title:"Date",editRender:{name:"input"}},{title:"操作",slots:{default:function(n){var a=n.row;return[t("vxe-button",{on:{click:function(){return e.removeRowEvent(a)}}},["删除"])]}}}],demoCodes:['\n <vxe-virtual-tree\n resizable\n row-key\n export-config\n keep-source\n ref="xVTree"\n row-id="id"\n :toolbar="{export: true, zoom: true, custom: true}"\n :tree-config="{children: \'children\'}"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n :data="tableData"\n :columns="tableColumn">\n <template v-slot:buttons>\n <vxe-button @click="insertEvent()">新增</vxe-button>\n <vxe-button @click="removeSelectEvent()">删除选中</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getSelectEvent">获取选中</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', width: 120, treeNode: true },\n { field: 'name', title: 'Name', editRender: { name: 'input' } },\n { field: 'size', title: 'Size', editRender: { name: 'input' } },\n { field: 'type', title: 'Type', editRender: { name: 'input' } },\n { field: 'date', title: 'Date', editRender: { name: 'input' } },\n {\n title: '操作',\n slots: {\n default: ({ row }) => {\n return [\n <vxe-button onClick={ e => this.removeRowEvent(row) }>删除</vxe-button>\n ]\n }\n }\n }\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 let record = {\n name: '新数据',\n date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')\n }\n xTree.insert(record).then(({ row }) => xTree.setActiveRow(row))\n },\n removeSelectEvent () {\n this.$refs.xTree.removeSelecteds()\n },\n removeRowEvent (row) {\n this.$refs.xTree.remove(row)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xTree.getRemoveRecords()\n this.$XModal.alert(removeRecords.length)\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTree.getInsertRecords()\n this.$XModal.alert(insertRecords.length)\n },\n getSelectEvent () {\n let selectRecords = this.$refs.xTree.getCheckboxRecords()\n this.$XModal.alert(selectRecords.length)\n }\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{insertEvent:function(){var e=this.$refs.xTree,t={name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd")};e.insert(t).then((function(t){var n=t.row;return e.setActiveRow(n)}))},removeSelectEvent:function(){this.$refs.xTree.removeSelecteds()},removeRowEvent:function(e){this.$refs.xTree.remove(e)},getRemoveEvent:function(){var e=this.$refs.xTree.getRemoveRecords();this.$XModal.alert(e.length)},getInsertEvent:function(){var e=this.$refs.xTree.getInsertRecords();this.$XModal.alert(e.length)},getSelectEvent:function(){var e=this.$refs.xTree.getCheckboxRecords();this.$XModal.alert(e.length)}}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},bc17: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("virtual-tree-api-link",{attrs:{prop:"max-height"}}),e._v(" 设置为最大高度")],1),n("vxe-virtual-tree",{ref:"xVTree",attrs:{border:"",resizable:"","row-key":"","export-config":"","max-height":"400",toolbar:{export:!0,zoom:!0},"tree-config":{children:"children"},columns:e.tableColumn,data:e.tableData},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTree.setAllTreeExpansion(!0)}}},[e._v("展开所有")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTree.clearTreeExpand()}}},[e._v("关闭所有")])]},proxy:!0}])}),n("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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){return{tableData:[],tableColumn:[{field:"name",title:"app.body.label.name",treeNode:!0},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],demoCodes:['\n <vxe-virtual-tree\n border\n resizable\n row-key\n export-config\n ref="xVTree"\n max-height="400"\n :toolbar="{export: true, zoom: true}"\n :tree-config="{children: \'children\'}"\n :columns="tableColumn"\n :data="tableData">\n <template v-slot:buttons>\n <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>\n <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { field: 'name', title: 'app.body.label.name', treeNode: true },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},bdfb: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-virtual-tree",{ref:"xVTree",attrs:{resizable:"","row-key":"","keep-source":"","row-id":"id",toolbar:{custom:!0},"tree-config":{children:"children"},"checkbox-config":{labelField:"id"},"context-menu":{header:{options:e.headerMenus},body:{options:e.bodyMenus},visibleMethod:e.visibleMethod},"edit-config":{trigger:"click",mode:"row",showStatus:!0},data:e.tableData,columns:e.tableColumn},on:{"context-menu-click":e.contextMenuClickEvent},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")])]},proxy:!0}])}),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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",[e._v("\n | Arrow Up ↑ | 移动到上一个菜单选项 |\n | Arrow Down ↓ | 移动到下一个菜单选项 |\n | Arrow Left ← | 关闭二级菜单 |\n | Arrow Right → | 打开二级菜单 |\n | Esc | 关闭菜单选项 |\n | Enter | 选中当前菜单选项 |\n | Spacebar | 选中当前菜单选项 |\n ")]),e._v("\n ")])}],o=(n("4160"),n("a630"),n("caad"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){return{tableData:[],tableColumn:[{type:"checkbox",title:"ID",width:280,treeNode:!0},{field:"name",title:"Name",editRender:{name:"input"}},{field:"size",title:"Size",editRender:{name:"input"}},{field:"type",title:"Type",editRender:{name:"input"}},{field:"date",title:"Date",editRender:{name:"input"}}],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-virtual-tree\n resizable\n row-key\n keep-source\n ref="xVTree"\n row-id="id"\n :toolbar="{custom: true}"\n :tree-config="{children: \'children\'}"\n :checkbox-config="{labelField: \'id\'}"\n :context-menu="{header: {options: headerMenus}, body: {options: bodyMenus}, visibleMethod}"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n :data="tableData"\n :columns="tableColumn"\n @context-menu-click="contextMenuClickEvent">\n <template v-slot:buttons>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', title: 'ID', width: 280, treeNode: true },\n { field: 'name', title: 'Name', editRender: { name: 'input' } },\n { field: 'size', title: 'Size', editRender: { name: 'input' } },\n { field: 'type', title: 'Type', editRender: { name: 'input' } },\n { field: 'date', title: 'Date', editRender: { name: 'input' } }\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 let record = {\n name: '新数据',\n date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')\n }\n // 插入到指定节点位置中\n xTree.insertAt(record, row).then(({ row }) => xTree.setActiveRow(row))\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTree.getInsertRecords()\n this.$XModal.alert(insertRecords.length)\n },\n visibleMethod ({ row, type }) {\n let xTree = this.$refs.xTree\n if (type === 'body') {\n this.bodyMenus.forEach(list => {\n list.forEach(item => {\n if (['expand', 'contract'].includes(item.code)) {\n if (row.children && row.children.length) {\n let isExpand = xTree.isTreeExpandByRow(row)\n item.disabled = ['expand'].includes(item.code) ? isExpand : !isExpand\n } else {\n item.disabled = true\n }\n }\n })\n })\n }\n return true\n },\n contextMenuClickEvent ({ menu, row, column }) {\n let xTree = this.$refs.xTree\n switch (menu.code) {\n case 'hideColumn':\n xTree.hideColumn(column)\n break\n case 'showAllColumn':\n xTree.resetColumn()\n break\n case 'insertAt':\n this.insertAtEvent(row, column)\n break\n case 'expand':\n xTree.setTreeExpansion(row, true)\n break\n case 'contract':\n xTree.setTreeExpansion(row, false)\n break\n }\n }\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{insertAtEvent:function(e){var t=this.$refs.xTree,n={name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd")};t.insertAt(n,e).then((function(e){var n=e.row;return t.setActiveRow(n)}))},getInsertEvent:function(){var e=this.$refs.xTree.getInsertRecords();this.$XModal.alert(e.length)},visibleMethod:function(e){var t=e.row,n=e.type,a=this.$refs.xTree;return"body"===n&&this.bodyMenus.forEach((function(e){e.forEach((function(e){if(["expand","contract"].includes(e.code))if(t.children&&t.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,r=this.$refs.xTree;switch(t.code){case"hideColumn":r.hideColumn(a);break;case"showAllColumn":r.resetColumn();break;case"insertAt":this.insertAtEvent(n,a);break;case"expand":r.setTreeExpansion(n,!0);break;case"contract":r.setTreeExpansion(n,!1);break}}}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},c1e7:function(e,t,n){},c98b:function(e,t,n){"use strict";var a=n("df05"),r=n.n(a);r.a},cdc3: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-virtual-tree",{ref:"xVTree",attrs:{resizable:"","row-key":"","export-config":"","keep-source":"","row-id":"id",toolbar:{export:!0,zoom:!0,custom:!0},"tree-config":{children:"children"},"edit-config":{trigger:"click",mode:"row",showStatus:!0},data:e.tableData,columns:e.tableColumn},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.insertEvent()}}},[e._v("插入第一行")]),n("vxe-button",{on:{click:function(t){return e.insertAtEvent()}}},[e._v("插入指定行")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getSelectEvent}},[e._v("获取选中")])]},proxy:!0}])}),n("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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){return{tableData:[],tableColumn:[{type:"checkbox",width:120,treeNode:!0},{field:"name",title:"Name",editRender:{name:"input"}},{field:"size",title:"Size",editRender:{name:"input"}},{field:"type",title:"Type",editRender:{name:"input"}},{field:"date",title:"Date",editRender:{name:"input"}}],demoCodes:['\n <vxe-virtual-tree\n resizable\n row-key\n export-config\n keep-source\n ref="xVTree"\n row-id="id"\n :toolbar="{export: true, zoom: true, custom: true}"\n :tree-config="{children: \'children\'}"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n :data="tableData"\n :columns="tableColumn">\n <template v-slot:buttons>\n <vxe-button @click="insertEvent()">插入第一行</vxe-button>\n <vxe-button @click="insertAtEvent()">插入指定行</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getSelectEvent">获取选中</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', width: 120, treeNode: true },\n { field: 'name', title: 'Name', editRender: { name: 'input' } },\n { field: 'size', title: 'Size', editRender: { name: 'input' } },\n { field: 'type', title: 'Type', editRender: { name: 'input' } },\n { field: 'date', title: 'Date', editRender: { name: 'input' } }\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 let record = {\n name: '新数据',\n date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')\n }\n xTree.insert(record).then(({ row }) => xTree.setActiveRow(row))\n },\n insertAtEvent () {\n let xTree = this.$refs.xTree\n let record = {\n name: '新数据',\n date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')\n }\n // 插入到第 3 行第 2 个子节点位置中\n xTree.insertAt(record, this.tableData[2].children[1]).then(({ row }) => xTree.setActiveRow(row))\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xTree.getInsertRecords()\n this.$XModal.alert(insertRecords.length)\n },\n getSelectEvent () {\n let selectRecords = this.$refs.xTree.getCheckboxRecords()\n this.$XModal.alert(selectRecords.length)\n }\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{insertEvent:function(){var e=this.$refs.xTree,t={name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd")};e.insert(t).then((function(t){var n=t.row;return e.setActiveRow(n)}))},insertAtEvent:function(){var e=this.$refs.xTree,t={name:"新数据",date:i.a.toDateString(new Date,"yyyy-MM-dd")};e.insertAt(t,this.tableData[2].children[1]).then((function(t){var n=t.row;return e.setActiveRow(n)}))},getInsertEvent:function(){var e=this.$refs.xTree.getInsertRecords();this.$XModal.alert(e.length)},getSelectEvent:function(){var e=this.$refs.xTree.getCheckboxRecords();this.$XModal.alert(e.length)}}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},d1e9: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-virtual-tree",{attrs:{resizable:"","row-key":"","row-id":"id","tree-config":{children:"children"},data:e.tableData,columns:e.tableColumn1},on:{"checkbox-change":e.selectChangeEvent}}),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("virtual-tree-api-link",{attrs:{prop:"checkRowKeys"}}),e._v(" 设置默认选中的行")],1),n("vxe-virtual-tree",{attrs:{resizable:"","row-key":"","row-id":"id",data:e.tableData,columns:e.tableColumn2,"tree-config":{children:"children"},"checkbox-config":{labelField:"name",checkRowKeys:["122000","20000"]}},on:{"checkbox-change":e.selectChangeEvent}}),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("virtual-tree-api-link",{attrs:{prop:"checkStrictly"}}),e._v(" 设置父子节点不互相关联，默认不显示头部复选框，可以通过 checkbox-config={"),n("virtual-tree-api-link",{attrs:{prop:"showHeader"}}),e._v("} 设置")],1),n("vxe-virtual-tree",{attrs:{resizable:"","row-key":"","row-id":"id",data:e.tableData,columns:e.tableColumn3,"tree-config":{children:"children"},"checkbox-config":{labelField:"name",checkStrictly:!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[4]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n ")])],1)},r=[],o=(n("4160"),n("a630"),n("caad"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){return{tableData:[],tableColumn1:[{type:"checkbox",treeNode:!0},{field:"name",title:"Name"},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],tableColumn2:[{type:"checkbox",title:"Name",width:400,treeNode:!0},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],tableColumn3:[{type:"checkbox",title:"Name",width:280,treeNode:!0},{field:"size",title:"Size"},{field:"type",title:"Type"},{field:"date",title:"Date"}],demoCodes:['\n <vxe-virtual-tree\n resizable\n row-key\n row-id="id"\n :tree-config="{children: \'children\'}"\n :data="tableData"\n :columns="tableColumn"\n @checkbox-change="selectChangeEvent">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', treeNode: true },\n { field: 'name', title: 'Name' },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\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-virtual-tree\n resizable\n row-key\n row-id="id"\n :data="tableData"\n :columns="tableColumn"\n :tree-config="{children: \'children\'}"\n :checkbox-config="{labelField: \'name\', checkRowKeys: [\'122000\', \'20000\']}"\n @checkbox-change="selectChangeEvent">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', title: 'Name', width: 400, treeNode: true },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\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-virtual-tree\n resizable\n row-key\n row-id="id"\n :data="tableData"\n :columns="tableColumn3"\n :tree-config="{children: \'children\'}"\n :checkbox-config="{labelField: \'name\', checkStrictly: true}">\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', title: 'Name', width: 280, treeNode: true },\n { field: 'size', title: 'Size' },\n { field: 'type', title: 'Type' },\n { field: 'date', title: 'Date' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},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)}}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},d6b4: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-virtual-tree",{ref:"xVTree",attrs:{border:"",resizable:"","row-key":"",toolbar:"","row-id":"id","tree-config":{children:"children"},"checkbox-config":{labelField:"id"},columns:e.tableColumn,data:e.tableData},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("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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){return{tableData:[],tableColumn:[{type:"checkbox",title:"ID",fixed:"left",width:280,treeNode:!0},{field:"name",title:"Name",width:300},{field:"size",title:"Size",width:300},{field:"type",title:"Type",width:300},{field:"date",title:"Date",width:300}],demoCodes:['\n <vxe-virtual-tree\n border\n resizable\n row-key\n toolbar\n ref="xVTree"\n row-id="id"\n :tree-config="{children: \'children\'}"\n :checkbox-config="{labelField: \'id\'}"\n :columns="tableColumn"\n :data="tableData">\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-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'checkbox', title: 'ID', fixed: 'left', width: 280, treeNode: true },\n { field: 'name', title: 'Name', width: 300 },\n { field: 'size', title: 'Size', width: 300 },\n { field: 'type', title: 'Type', width: 300 },\n { field: 'date', title: 'Date', width: 300 }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports},df05:function(e,t,n){},e7d6: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-virtual-tree",{attrs:{border:"",resizable:"",toolbar:"","row-key":"","tree-config":{children:"children"},data:e.tableData,columns:e.tableColumn},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-input",{attrs:{size:"small",placeholder:"搜索"}})]},proxy:!0},{key:"tools",fn:function(){return[n("vxe-button",{attrs:{status:"primary"}},[e._v("操作1")]),n("vxe-button",{attrs:{status:"primary"}},[e._v("操作2")]),n("vxe-button",{attrs:{status:"primary"}},[e._v("操作3")])]},proxy:!0}])}),n("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)},r=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),l=n("1487"),s=n.n(l),d={data:function(){var e=this.$createElement;return{tableData:[],tableColumn:[{type:"seq",title:"序号",width:80},{field:"name",title:"app.body.label.name"},{field:"size",title:"Size"},{field:"type",title:"Type",slots:{default:function(t){var n=t.row;return[e("span",["类型：".concat(n.type||"无")])]}}},{title:"Image",treeNode:!0,slots:{default:function(){return[e("img",{attrs:{src:"static/other/img1.gif",height:"50"}})]}}},{field:"date",title:"Date",slots:{default:function(t){var n=t.row;return[e("span",[i.a.toDateString(n.date,"yyyy-MM-dd HH:mm:ss.S")])]}}}],demoCodes:['\n <vxe-virtual-tree\n border\n resizable\n toolbar\n row-key\n :tree-config="{children: \'children\'}"\n :data="tableData"\n :columns="tableColumn">\n <template v-slot:buttons>\n <vxe-input size="small" placeholder="搜索"></vxe-input>\n </template>\n <template v-slot:tools>\n <vxe-button status="primary">操作1</vxe-button>\n <vxe-button status="primary">操作2</vxe-button>\n <vxe-button status="primary">操作3</vxe-button>\n </template>\n </vxe-virtual-tree>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'seq', title: '序号', width: 80 },\n { field: 'name', title: 'app.body.label.name' },\n { field: 'size', title: 'Size' },\n {\n field: 'type',\n title: 'Type',\n slots: {\n default: ({ row }) => {\n return [\n <span>{ `类型：${row.type || '无'}` }</span>\n ]\n }\n }\n },\n {\n title: 'Image',\n treeNode: true,\n slots: {\n default: ({ row }) => {\n return [\n <img src=\"static/other/img1.gif\" height=\"50\"/>\n ]\n }\n }\n },\n {\n field: 'date',\n title: 'Date',\n slots: {\n default: ({ row }) => {\n return [\n <span>{ XEUtils.toDateString(row.date, 'yyyy-MM-dd HH:mm:ss.S') }</span>\n ]\n }\n }\n }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n }\n }\n "]}},created:function(){this.tableData=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),v=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=v.exports}}]);
Reference in New Issue View Git Blame Copy Permalink