vxe-table
Version:
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...
1 lines • 5.07 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _ctor=_interopRequireDefault(require("xe-utils/ctor")),_conf=_interopRequireDefault(require("../../conf")),_size=_interopRequireDefault(require("../../mixins/size")),_tools=require("../../tools");function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}var browse=_tools.DomTools.browse,_default2={name:"VxeList",mixins:[_size.default],props:{data:Array,height:[Number,String],maxHeight:[Number,String],loading:Boolean,size:{type:String,default:function(){return _conf.default.list.size||_conf.default.size}},autoResize:Boolean,syncResize:[Boolean,String,Number],scrollY:Object},data:function(){return{scrollYLoad:!1,bodyHeight:0,topSpaceHeight:0,items:[]}},computed:{sYOpts:function(){return Object.assign({},_conf.default.list.scrollY,this.scrollY)},styles:function(){var t=this.height,e=this.maxHeight,i={};return t?i.height=isNaN(t)?t:"".concat(t,"px"):e&&(i.height="auto",i.maxHeight=isNaN(e)?e:"".concat(e,"px")),i}},watch:{data:function(t){this.loadData(t)},syncResize:function(t){var e=this;t&&(this.recalculate(),this.$nextTick(function(){return setTimeout(function(){return e.recalculate()})}))}},created:function(){Object.assign(this,{fullData:[],lastScrollLeft:0,lastScrollTop:0,scrollYStore:{startIndex:0,endIndex:0,visibleSize:0}}),this.loadData(this.data),_tools.GlobalEvent.on(this,"resize",this.handleGlobalResizeEvent)},mounted:function(){var t=this;if(this.autoResize){var e=(0,_tools.createResizeEvent)(function(){return t.recalculate()});e.observe(this.$el),this.$resize=e}},beforeDestroy:function(){this.$resize&&this.$resize.disconnect()},destroyed:function(){_tools.GlobalEvent.off(this,"resize")},render:function(t){var e=this.$scopedSlots,i=this.styles,s=this.bodyHeight,l=this.topSpaceHeight,r=this.items,o=this.loading;return t("div",{class:["vxe-list",{"is--loading":o}]},[t("div",{ref:"virtualWrapper",class:"vxe-list--virtual-wrapper",style:i,on:{scroll:this.scrollEvent}},[t("div",{ref:"ySpace",class:"vxe-list--y-space",style:{height:s?"".concat(s,"px"):""}}),t("div",{ref:"body",class:"vxe-list--body",style:{marginTop:l?"".concat(l,"px"):""}},e.default?e.default.call(this,{items:r,$list:this},t):[])]),t("div",{class:["vxe-list--loading vxe-loading",{"is--visible":o}]},[t("div",{class:"vxe-loading--spinner"})])])},methods:{getParentElem:function(){return this.$el.parentNode},loadData:function(t){var e=this,i=this.sYOpts,s=this.scrollYStore,l=t||[];return s.startIndex=0,s.visibleIndex=0,this.fullData=l,this.scrollYLoad=-1<i.gt&&i.gt<=l.length,this.handleData(),this.computeScrollLoad().then(function(){e.refreshScroll()})},reloadData:function(t){return this.clearScroll(),this.loadData(t)},handleData:function(){var t=this.fullData,e=this.scrollYLoad,i=this.scrollYStore;return this.items=e?t.slice(i.startIndex,i.endIndex):t.slice(0),this.$nextTick()},recalculate:function(){var t=this.$el;return t.clientWidth&&t.clientHeight?this.computeScrollLoad():Promise.resolve()},clearScroll:function(){var e=this,t=this.$refs.virtualWrapper;return t&&(t.scrollTop=0),new Promise(function(t){requestAnimationFrame(function(){t(e.$nextTick())})})},refreshScroll:function(){var t=this,e=this.lastScrollLeft,i=this.lastScrollTop;return this.clearScroll().then(function(){if(e||i)return t.lastScrollLeft=0,t.lastScrollTop=0,t.scrollTo(e,i)})},scrollTo:function(t,e){var i=this,s=this.$refs.virtualWrapper;return _ctor.default.isNumber(t)&&(s.scrollLeft=t),_ctor.default.isNumber(e)&&(s.scrollTop=e),this.scrollYLoad?new Promise(function(t){return setTimeout(function(){return t(i.$nextTick())},50)}):this.$nextTick()},computeScrollLoad:function(){var n=this;return this.$nextTick().then(function(){var t,e=n.$refs,i=n.sYOpts,s=n.scrollYLoad,l=n.scrollYStore,r=0;if(i.sItem&&(t=e.body.querySelector(i.sItem)),t||(t=e.body.children[0]),t&&(r=t.offsetHeight),r=Math.max(20,r),l.rowHeight=r,s){var o=Math.max(8,Math.ceil(e.virtualWrapper.clientHeight/r)),a=i.oSize?_ctor.default.toNumber(i.oSize):browse.msie?20:browse.edge?10:0;l.offsetSize=a,l.visibleSize=o,l.endIndex=Math.max(l.startIndex,o+a,l.endIndex),n.updateYData()}else n.updateYSpace();n.rowHeight=r})},scrollEvent:function(t){var e=t.target,i=e.scrollTop,s=e.scrollLeft,l=s!==this.lastScrollLeft,r=i!==this.lastScrollTop;this.lastScrollTop=i,this.lastScrollLeft=s,this.scrollYLoad&&this.loadYData(t),this.$emit("scroll",{scrollLeft:s,scrollTop:i,isX:l,isY:r,$event:t})},loadYData:function(t){var e=this.scrollYStore,i=e.startIndex,s=e.endIndex,l=e.visibleSize,r=e.offsetSize,o=e.rowHeight,a=t.target.scrollTop,n=Math.floor(a/o),c=Math.max(0,n-1-r),u=n+l+r;(n<=i||s-l-1<=n)&&(i===c&&s===u||(e.startIndex=c,e.endIndex=u,this.updateYData()))},updateYData:function(){this.handleData(),this.updateYSpace()},updateYSpace:function(){var t=this.scrollYStore,e=this.scrollYLoad,i=this.fullData;this.bodyHeight=e?i.length*t.rowHeight:0,this.topSpaceHeight=e?Math.max(t.startIndex*t.rowHeight,0):0},handleGlobalResizeEvent:function(){this.recalculate()}}};exports.default=_default2;