vxe-table-plugin-virtual-tree
Version:
基于 vxe-table 的表格插件,实现简单的虚拟树表格(属于内测阶段)
1 lines • 15.4 kB
JavaScript
!function(e,t){"function"==typeof define&&define.amd?define("vxe-table-plugin-virtual-tree",["exports","xe-utils"],t):"undefined"!=typeof exports?t(exports,require("xe-utils")):(t((t={exports:{}}).exports,e.XEUtils),e.VXETablePluginVirtualTree=t.exports.default)}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,function(e,v){"use strict";var t;function h(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function x(e,t){e=t[e.treeOpts.children];return e&&e.length}function r(e){var t=e.setup,c=e.t,r=e.Grid,n=e.Table,E=t({}),i=Object.keys(n.props).filter(function(e){return-1===["data","treeConfig"].indexOf(e)}),r={name:"VxeVirtualTree",extends:r,data:function(){return{removeList:[],treeLazyLoadeds:[]}},computed:{treeOpts:function(){return Object.assign({},E.table.treeConfig,this.treeConfig)},checkboxOpts:function(){return Object.assign({},E.table.checkboxConfig,this.checkboxConfig)},tableExtendProps:function(){var t=this,r={};return i.forEach(function(e){r[e]=t[e]}),r.checkboxConfig&&(r.checkboxConfig=this.checkboxOpts),r}},watch:{columns:function(e){this.handleColumns(e)},data:function(e){this.loadData(e)}},created:function(){var e=this.$vxe,t=this.treeOpts,r=this.data,n=this.columns;Object.assign(this,{fullTreeData:[],treeTableData:[],fullTreeRowMap:new Map}),this.keepSource&&console.error(e.t("vxe.error.notProp",["keep-source"])),t.line&&console.error(e.t("vxe.error.notProp",["checkbox-config.line"])),n&&this.handleColumns(n),r&&this.reloadData(r)},render:function(e){var t,r,i,o,n,a,s,l,c,h,u,d,f=this.vSize,p=this.isZMax,x=this.$scopedSlots,g=!(!x.form&&!this.formConfig),b=!!(x.toolbar||this.toolbarConfig||this.toolbar),T=!(!x.pager&&!this.pagerConfig);return e("div",{class:["vxe-grid","vxe-virtual-tree",(m(u={},"size--".concat(f),f),m(u,"t--animat",!!this.animat),m(u,"is--round",this.round),m(u,"is--maximize",p),m(u,"is--loading",this.loading||this.tableLoading),u)],style:this.renderStyle},[g?e("div",{ref:"formWrapper",staticClass:"vxe-grid--form-wrapper"},x.form?x.form.call(this,{$grid:this},e):(l=e,f=(c=this).proxyConfig,p=c.proxyOpts,u=c.formData,g=c.formConfig,d=c.formOpts,g&&d.items&&d.items.length?(d.inited||(d.inited=!0,h=p.beforeItem,p&&h&&d.items.forEach(function(e){h.call(c,{$grid:c,item:e})})),[l("vxe-form",{props:Object.assign({},d,{data:f&&p.form?u:d.data}),on:{submit:c.submitEvent,reset:c.resetEvent,"submit-invalid":c.submitInvalidEvent,"toggle-collapse":c.togglCollapseEvent},ref:"form"})]):[])):null,b?e("div",{ref:"toolbarWrapper",class:"vxe-grid--toolbar-wrapper"},x.toolbar?x.toolbar.call(this,{$grid:this},e):[e("vxe-toolbar",{props:this.toolbarOpts,ref:"xToolbar",scopedSlots:(d=(n=this).$scopedSlots,b=n.toolbarOpts.slots,n={},b&&(a=b.buttons,s=b.tools,a&&d[a]&&(a=d[a]),s&&d[s]&&(s=d[s])),a&&(n.buttons=a),s&&(n.tools=s),n)})]):null,x.top?e("div",{ref:"topWrapper",staticClass:"vxe-grid--top-wrapper"},x.top.call(this,{$grid:this},e)):null,e("vxe-table",{props:this.tableProps,on:(a=(i=this).$listeners,s=i.proxyConfig,n=i.proxyOpts,o={},v.default.each(a,function(e,n){o[n]=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];i.$emit.apply(i,[n].concat(t))}}),o["checkbox-all"]=i.checkboxAllEvent,o["checkbox-change"]=i.checkboxChangeEvent,s&&(n.sort&&(o["sort-change"]=i.sortChangeEvent),n.filter&&(o["filter-change"]=i.filterChangeEvent)),o),scopedSlots:x,ref:"xTable"}),x.bottom?e("div",{ref:"bottomWrapper",staticClass:"vxe-grid--bottom-wrapper"},x.bottom.call(this,{$grid:this},e)):null,T?e("div",{ref:"pagerWrapper",staticClass:"vxe-grid--pager-wrapper"},x.pager?x.pager.call(this,{$grid:this},e):[e("vxe-pager",{props:this.pagerProps,on:{"page-change":this.pageChangeEvent},scopedSlots:(x=(T=this).$scopedSlots,e=T.pagerOpts.slots,T={},e&&(t=e.left,r=e.right,t&&x[t]&&(t=x[t]),r&&x[r]&&(r=x[r])),t&&(T.left=t),r&&(T.right=r),T)})]):null])},methods:{loadColumn:function(r){var o=this;return this.$nextTick().then(function(){var n=o.$vxe,i=o.$scopedSlots,t=o.renderTreeIcon,e=o.treeOpts;v.default.eachTree(r,function(e){e.treeNode&&(e.slots||(e.slots={}),e.slots.icon=t),e.slots&&v.default.each(e.slots,function(e,t,r){v.default.isFunction(e)||(i[e]?r[t]=i[e]:(r[t]=null,console.error(n.t("vxe.error.notSlot",[e]))))})},e),o.$refs.xTable.loadColumn(r)})},renderTreeIcon:function(t,e,r){var n=this,i=this.treeLazyLoadeds,o=this.treeOpts,a=t.isHidden,s=t.row,l=o.children,c=o.hasChild,h=o.indent,u=o.lazy,d=o.trigger,f=o.iconLoaded,p=o.showIcon,x=o.iconOpen,g=o.iconClose,b=s[l],T=!1,v=!1,o=!1,l={};return a||(v=s._X_EXPAND,u&&(o=-1<i.indexOf(s),T=s[c])),d&&"default"!==d||(l.click=function(e){return n.triggerTreeExpandEvent(e,t)}),[e("div",{class:["vxe-cell--tree-node",{"is--active":v}],style:{paddingLeft:"".concat(s._X_LEVEL*h,"px")}},[p&&(b&&b.length||T)?[e("div",{class:"vxe-tree--btn-wrapper",on:l},[e("i",{class:["vxe-tree--node-btn",o?f||E.icon.TABLE_TREE_LOADED:v?x||E.icon.TABLE_TREE_OPEN:g||E.icon.TABLE_TREE_CLOSE]})])]:null,e("div",{class:"vxe-tree-cell"},r)])]},_loadTreeData:function(e){var t,r=this,n=this.highlightCurrentRow,i=this.getRadioRecord();return n&&(t=this.getCurrentRecord()),this.$nextTick().then(function(){return r.$refs.xTable.loadData(e)}).then(function(){i&&r.setRadioRow(i),n&&t&&r.setCurrentRow(t)})},getData:function(e){var t=this.fullTreeData;return v.default.isUndefined(e)?t.slice(0):t[e]},loadData:function(e){return this._loadTreeData(this.toVirtualTree(e))},reloadData:function(e){var t=this;return this.$nextTick().then(function(){return t.$refs.xTable.reloadData(t.toVirtualTree(e))}).then(function(){return t.handleDefaultTreeExpand()})},isTreeExpandByRow:function(e){return!!e._X_EXPAND},setTreeExpansion:function(e,t){return this.setTreeExpand(e,t)},handleAsyncTreeExpandChilds:function(r){var n=this,i=this.treeLazyLoadeds,e=this.treeOpts,t=this.checkboxOpts,o=e.loadMethod,a=e.children,s=t.checkStrictly;return new Promise(function(t){o?(i.push(r),o({row:r}).catch(function(){return[]}).then(function(e){r._X_LOADED=!0,v.default.remove(i,function(e){return e===r}),v.default.isArray(e)||(e=[]),e&&(r[a]=e.map(function(e){return e._X_LOADED=!1,e._X_EXPAND=!1,e._X_INSERT=!1,e._X_LEVEL=r._X_LEVEL+1,e}),e.length&&!r._X_EXPAND&&n.virtualExpand(r,!0),!s&&n.isCheckedByCheckboxRow(r)&&n.setCheckboxRow(e,!0)),t(n.$nextTick().then(function(){return n.recalculate()}))})):t(null)})},setTreeExpand:function(t,r){var n=this,i=this.treeLazyLoadeds,e=this.treeOpts,o=this.tableFullData,a=this.treeNodeColumn,s=e.lazy,l=e.hasChild,c=e.accordion,h=e.toggleMethod,u=[];if(t){v.default.isArray(t)||(t=[t]);var d=this.getColumnIndex(a),f=this.getVMColumnIndex(a),p=h?t.filter(function(e){return h({expanded:r,column:a,row:e,columnIndex:d,$columnIndex:f})}):t;return c&&(p=p.length?[p[p.length-1]]:[],(e=v.default.findTree(o,function(e){return e===t[0]},e))&&e.items.forEach(function(e){e._X_EXPAND=!1})),p.forEach(function(e){var t=s&&e[l]&&!e._X_LOADED&&-1===i.indexOf(e);r&&t?u.push(n.handleAsyncTreeExpandChilds(e)):x(n,e)&&n.virtualExpand(e,!!r)}),Promise.all(u).then(function(){return n._loadTreeData(n.treeTableData),n.recalculate()})}return this.$nextTick()},setAllTreeExpansion:function(e){return this.setAllTreeExpand(e)},setAllTreeExpand:function(e){return this._loadTreeData(this.virtualAllExpand(e))},toggleTreeExpansion:function(e){return this.toggleTreeExpand(e)},triggerTreeExpandEvent:function(e,t){var r=this.treeOpts,n=this.treeLazyLoadeds,i=t.row,t=t.column;r.lazy&&-1!==n.indexOf(i)||(n=!this.isTreeExpandByRow(i),this.setTreeExpand(i,n),this.$emit("toggle-tree-expand",{expanded:n,column:t,row:i,$event:e}))},toggleTreeExpand:function(e){return this._loadTreeData(this.virtualExpand(e,!e._X_EXPAND))},getTreeExpandRecords:function(){var t=this,e=this.fullTreeData,r=this.treeOpts,n=[];return v.default.eachTree(e,function(e){e._X_EXPAND&&x(t,e)&&n.push(e)},r),n},clearTreeExpand:function(){return this.setAllTreeExpand(!1)},handleColumns:function(e){var t=this.$vxe,r=this.renderTreeIcon,n=this.checkboxOpts;if(e){if((!n.checkField||!n.halfField)&&e.some(function(e){return"checkbox"===e.type}))return console.error(t.t("vxe.error.reqProp",["table.checkbox-config.checkField | table.checkbox-config.halfField"])),[];n=e.find(function(e){return e.treeNode});return n&&((t=n.slots||{}).icon=r,n.slots=t,this.treeNodeColumn=n),e}return[]},getRecordset:function(){return{insertRecords:this.getInsertRecords(),removeRecords:this.getRemoveRecords(),updateRecords:[]}},isInsertByRow:function(e){return!!e._X_INSERT},getInsertRecords:function(){var e=this.treeOpts,t=[];return v.default.eachTree(this.fullTreeData,function(e){e._X_INSERT&&t.push(e)},e),t},insert:function(e){return this.insertAt(e,null)},insertAt:function(e,t){var r=this,n=this.fullTreeData,i=this.treeTableData,o=this.treeOpts;v.default.isArray(e)||(e=[e]);var a=e.map(function(e){return r.defineField(Object.assign({_X_LOADED:!1,_X_EXPAND:!1,_X_INSERT:!0,_X_LEVEL:0},e))});if(t)if(-1===t)n.push.apply(n,h(a)),i.push.apply(i,h(a));else{var s=v.default.findTree(n,function(e){return e===t},o);if(!s||-1===s.index)throw new Error(c("vxe.error.unableInsert"));var e=s.items,o=s.index,l=s.nodes,s=i.indexOf(t);-1<s&&i.splice.apply(i,[s,0].concat(h(a))),e.splice.apply(e,[o,0].concat(h(a))),a.forEach(function(e){e._X_LEVEL=l.length-1})}else n.unshift.apply(n,h(a)),i.unshift.apply(i,h(a));return this._loadTreeData(i).then(function(){return{row:a.length?a[a.length-1]:null,rows:a}})},getRemoveRecords:function(){return this.removeList},removeSelecteds:function(){return this.removeCheckboxRow()},removeCheckboxRow:function(){var t=this;return this.remove(this.getCheckboxRecords()).then(function(e){return t.clearSelection(),e})},remove:function(e){var a=this,s=this.removeList,l=this.fullTreeData,c=this.treeOpts,h=[];return e?v.default.isArray(e)||(e=[e]):e=l,e.forEach(function(t){var e,r,n,i,o=v.default.findTree(l,function(e){return e===t},c);o&&(e=o.item,r=o.items,n=o.index,i=o.parent,a.isInsertByRow(t)||s.push(t),i?((o=a.isTreeExpandByRow(i))&&a.handleCollapsing(i),r.splice(n,1),o&&a.handleExpanding(i)):(a.handleCollapsing(e),r.splice(n,1),a.treeTableData.splice(a.treeTableData.indexOf(e),1)),h.push(e))}),this._loadTreeData(this.treeTableData).then(function(){return{row:h.length?h[h.length-1]:null,rows:h}})},handleDefaultTreeExpand:function(){var n,e,i,o=this,t=this.treeConfig,a=this.treeOpts,s=this.tableFullData;t&&(n=a.children,e=a.expandAll,t=a.expandRowKeys,e?this.setAllTreeExpand(!0):t&&this.rowId&&(i=this.rowId,t.forEach(function(t){var e=v.default.findTree(s,function(e){return t===v.default.get(e,i)},a),r=e?e.item[n]:0;r&&r.length&&o.setTreeExpand(e.item,!0)})))},toVirtualTree:function(e){var t=this.treeOpts,a=this.fullTreeRowMap;return a.clear(),v.default.eachTree(e,function(e,t,r,n,i,o){e._X_LOADED=!1,e._X_EXPAND=!1,e._X_INSERT=!1,e._X_LEVEL=o.length-1,a.set(e,{item:e,index:t,items:r,paths:n,parent:i,nodes:o})},t),this.fullTreeData=e.slice(0),this.treeTableData=e.slice(0),e},virtualExpand:function(e,t){var r=this.treeOpts,n=this.treeNodeColumn,i=r.toggleMethod,o=this.getColumnIndex(n),r=this.getVMColumnIndex(n);return i&&!i({expanded:t,row:e,column:n,columnIndex:o,$columnIndex:r})||e._X_EXPAND!==t&&(e._X_EXPAND?this.handleCollapsing(e):this.handleExpanding(e)),this.treeTableData},handleExpanding:function(e){if(x(this,e)){var t=this.treeTableData,r=this.treeOpts,n=e[r.children],a=[],i=t.indexOf(e);if(-1===i)throw new Error("Expanding error");var s=new Map;v.default.eachTree(n,function(e,t,r,n,i,o){(!i||i._X_EXPAND&&s.has(i))&&(s.set(e,1),a.push(e))},r),e._X_EXPAND=!0,t.splice.apply(t,[i+1,0].concat(a))}return this.treeTableData},handleCollapsing:function(e){var t,r,n,i;return x(this,e)&&(t=this.treeTableData,n=e[(r=this.treeOpts).children],i=[],v.default.eachTree(n,function(e){i.push(e)},r),e._X_EXPAND=!1,this.treeTableData=t.filter(function(e){return-1===i.indexOf(e)})),this.treeTableData},virtualAllExpand:function(t){var r,e=this.treeOpts;return t?(r=[],v.default.eachTree(this.fullTreeData,function(e){e._X_EXPAND=t,r.push(e)},e),this.treeTableData=r):(v.default.eachTree(this.fullTreeData,function(e){e._X_EXPAND=t},e),this.treeTableData=this.fullTreeData.slice(0)),this.treeTableData},clearCheckboxRow:function(){return this.setAllCheckboxRow(!1)},toggleAllCheckboxRow:function(){var e=this.checkboxOpts,t=e.checkField,e=e.checkStrictly;return t&&!e?this.setAllCheckboxRow(!this.fullTreeData.every(function(e){return e[t]})):this.$nextTick()},setAllCheckboxRow:function(t){var e=this.checkboxOpts,r=this.treeOpts,n=e.checkField,i=e.halfField,e=e.checkStrictly;return n&&!e&&(v.default.eachTree(this.fullTreeData,function(e){e[n]=t,i&&(e[i]=!1)},r),this.$refs.xTable.checkSelectionStatus()),this.$nextTick()},checkboxAllEvent:function(e){var t=e.checked;this.setAllCheckboxRow(t),this.$emit("checkbox-all",e)},checkboxChangeEvent:function(e){var t=e.row,r=e.checked;this.setCheckboxRow(t,r),this.$emit("checkbox-change",e)},toggleCheckboxRow:function(e){var t=this,r=this.checkboxOpts.checkField;r&&e.forEach(function(e){t.setCheckboxRow(e,!e[r])})},setCheckboxRow:function(e,t){var r=this,n=this.checkboxOpts,i=this.treeOpts,o=n.checkField,a=n.halfField,n=n.checkStrictly;return v.default.isArray(e)||(e=[e]),o&&(n?e.forEach(function(e){e[o]=t,a&&(e[a]=!1)}):(v.default.eachTree(e,function(e){e[o]=t,a&&(e[a]=!1)},i),e.forEach(function(e){r.checkParentNodeSelection(e)}))),this.$nextTick()},checkParentNodeSelection:function(t){var e=this.checkboxOpts,r=this.treeOpts,n=r.children,i=e.checkField,o=e.halfField,e=e.checkStrictly,r=v.default.findTree(this.fullTreeData,function(e){return e===t},r);r&&i&&!e&&((e=r.parent)?(r=e[n].every(function(e){return e[i]}),o&&!r&&(e[o]=e[n].some(function(e){return e[i]||e[o]})),e[i]=r,this.checkParentNodeSelection(e)):this.$refs.xTable.checkSelectionStatus())},getCheckboxRecords:function(){var e=this.checkboxOpts,t=this.treeOpts,r=e.checkField;if(r){var n=[];return v.default.eachTree(this.fullTreeData,function(e){e[r]&&n.push(e)},t),n}return this.$refs.xTable.getCheckboxRecords()},getCheckboxIndeterminateRecords:function(){var e=this.checkboxOpts,t=this.treeOpts,r=e.halfField;if(r){var n=[];return v.default.eachTree(this.fullTreeData,function(e){e[r]&&n.push(e)},t),n}return this.$refs.xTable.getCheckboxIndeterminateRecords()}}};e.Vue.component(r.name,r)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=e.VXETablePluginVirtualTree=void 0,v=(t=v)&&t.__esModule?t:{default:t};var i={install:function(e){r(e)}};e.VXETablePluginVirtualTree=i,"undefined"!=typeof window&&window.VXETable&&window.VXETable.use&&window.VXETable.use(i),e.default=i});