@zscreate/form-component 1.1.40 → 1.1.41

package/dist/form-component.umd.js

@@ -62875,7 +62875,7 @@ module.exports = /******/function (modules) {
 /* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6903);
 /* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _util_mathUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(38);
-/* harmony import */ var _util_util__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(6955);
+/* harmony import */ var _util_util__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(6955);
 /* harmony import */ var _layoutItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7102);
 /* harmony import */ var _components_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1033);
 /* harmony import */ var pubsub_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9616);
@@ -62883,6 +62883,7 @@ module.exports = /******/function (modules) {
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7203);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _components_MessageBox_confirmBox_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5927);
+/* harmony import */ var _form_modules_common_tableItem_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2780);
 
 //
 //
@@ -63245,6 +63246,18 @@ module.exports = /******/function (modules) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 
 
 
@@ -63255,6 +63268,11 @@ module.exports = /******/function (modules) {
 
 /* harmony default export */ __webpack_exports__.Z = ({
   name: "formLayout",
+  computed: {
+    tableItem() {
+      return _form_modules_common_tableItem_vue__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z;
+    }
+  },
   data() {
     return {
       defauList: ["loginUserName", "currentDate"],
@@ -63262,9 +63280,9 @@ module.exports = /******/function (modules) {
       //表单分页list 如果不需要分页 数组length为0
       formNameHeight: 40,
       //标题高度
-      A4Width: (0,_util_util__WEBPACK_IMPORTED_MODULE_7__/* .mmToPx */ .Zt)(210),
+      A4Width: (0,_util_util__WEBPACK_IMPORTED_MODULE_8__/* .mmToPx */ .Zt)(210),
       //A4纸 px宽度
-      A4Height: (0,_util_util__WEBPACK_IMPORTED_MODULE_7__/* .mmToPx */ .Zt)(297),
+      A4Height: (0,_util_util__WEBPACK_IMPORTED_MODULE_8__/* .mmToPx */ .Zt)(297),
       //A4纸 px高度
       contentStyle: {
         width: "200px",
@@ -63422,7 +63440,10 @@ module.exports = /******/function (modules) {
     },
     //添加子表单里面的row
     addToTableData(data, model, addModel = undefined, clickByUser = false) {
-      let dataTemp = JSON.parse(JSON.stringify(data));
+      let dataTemp = data;
+      if (!data._clone) {
+        dataTemp = JSON.parse(JSON.stringify(data));
+      }
       this.tableIndex[model] === undefined ? this.$set(this.tableIndex, model, 0) : null;
       dataTemp.index = this.tableIndex[model];
       this.tableIndex[model]++;
@@ -63586,18 +63607,26 @@ module.exports = /******/function (modules) {
     },
     tableInitByModel(model) {
       if (this.models[model] && this.models[model] instanceof Array && this.models[model].length > 0) {
+        if (this.tableData[model] === undefined) {
+          this.$set(this.tableData, model, []);
+        }
         // console.log('--',this.tableModel[model], model)
         setTimeout(async () => {
           this.$emit("tableLoading", true);
           this.formLoading = true;
           this.tableLoading = true;
+          let dataTemp = JSON.parse(JSON.stringify(this.tableModel[model]));
+          dataTemp._clone = true;
           for (let i = 0; i < this.models[model].length; i++) {
             this.originIndex++;
-            await this.timeout(0);
-            this.addToTableData(this.tableModel[model], model);
+            if (i < 20) {
+              await this.timeout(0);
+            }
+            this.addToTableData(dataTemp, model);
           }
           this.tableLoading = false;
           this.formLoading = false;
+          console.log("tableLoading false");
           this.$emit("tableLoading", false);
         }, 0);
       }
@@ -63618,7 +63647,7 @@ module.exports = /******/function (modules) {
           // values里面存在当前字段的值
           if (this.value && Object.keys(this.value).indexOf(widget.model) >= 0) {
             if (![undefined, null].includes(this.value[widget.model])) {
-              this.models[widget.model] = (0,_util_util__WEBPACK_IMPORTED_MODULE_7__/* .cloneObj */ .Cl)(this.value[widget.model]);
+              this.models[widget.model] = (0,_util_util__WEBPACK_IMPORTED_MODULE_8__/* .cloneObj */ .Cl)(this.value[widget.model]);
             } else {
               // 如果value数据是null 或者 undefined 则需要特殊处理(用于处理数据不完整)
               this.models[widget.model] = ["imgupload", "deptSelector", "userSelector", "userSelectorByRole", "relateSub"].includes(widget.type) ? [] : "";
@@ -63638,7 +63667,7 @@ module.exports = /******/function (modules) {
 
             // 是否为无效值
             let is_invalidation = [undefined, null].includes(widget.options.defaultValue);
-            this.models[widget.model] = this.models[widget.model] ? this.models[widget.model] : is_invalidation ? "" : (0,_util_util__WEBPACK_IMPORTED_MODULE_7__/* .cloneObj */ .Cl)(widget.options.defaultValue);
+            this.models[widget.model] = this.models[widget.model] ? this.models[widget.model] : is_invalidation ? "" : (0,_util_util__WEBPACK_IMPORTED_MODULE_8__/* .cloneObj */ .Cl)(widget.options.defaultValue);
           }
         });
       }
@@ -63657,13 +63686,13 @@ module.exports = /******/function (modules) {
           }
           return true;
         case "checkbox":
-          this.models[widget.model] = typeof widget.options.defaultValue === "string" ? [] : (0,_util_util__WEBPACK_IMPORTED_MODULE_7__/* .cloneObj */ .Cl)(widget.options.defaultValue);
+          this.models[widget.model] = typeof widget.options.defaultValue === "string" ? [] : (0,_util_util__WEBPACK_IMPORTED_MODULE_8__/* .cloneObj */ .Cl)(widget.options.defaultValue);
           return true;
         case "select":
           this.models[widget.model] = widget.options.multiple ? [] : "";
           return true;
         case "table":
-          this.models[widget.model] = (0,_util_util__WEBPACK_IMPORTED_MODULE_7__/* .cloneObj */ .Cl)(widget.options.defaultValue);
+          this.models[widget.model] = (0,_util_util__WEBPACK_IMPORTED_MODULE_8__/* .cloneObj */ .Cl)(widget.options.defaultValue);
           this.generateTableData(widget);
           return true;
         default:
@@ -106592,6 +106621,171 @@ var component = (0,componentNormalizer/* default */.Z)(
 
 /***/ }),
 
+/***/ 2780:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Z: function() { return /* binding */ tableItem; }
+});
+
+;// CONCATENATED MODULE: ./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/form/modules/common/tableItem.vue?vue&type=template&id=b1812dae&scoped=true&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"sub-table-col sub-table-col-no-border"},[_vm._l((_vm.source.columns),function(tableItem,talbeIndex){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(tableItem.type !== 'hidden'),expression:"tableItem.type !== 'hidden'"}],key:_vm.index + '_' + talbeIndex,staticClass:"sub-table-item"},[(['input', 'textarea'].includes(tableItem.type) && !_vm.editArr[talbeIndex] && !tableItem.tableColCanEdit )?_c('div',{style:(("color: #000; border-right: 1px solid #333; border-bottom: 1px solid #333;  line-height: normal; padding: 0 15px; line-break: anywhere; overflow: hidden; display: flex;  align-items: center; height: " + (_vm.widget.options.rowsHeight ? _vm.widget.options.rowsHeight + 'px' : 'initial'))),on:{"dblclick":function($event){return _vm.tableColumnsDBClick(talbeIndex, tableItem, _vm.source.model + '_' + _vm.index + '_' + tableItem.model)}}},[_c('span',[_vm._v(_vm._s(_vm.models[_vm.source.model][_vm.index][tableItem.model]))])]):_c('layout-item',{directives:[{name:"show",rawName:"v-show",value:(tableItem.options.canView),expression:"tableItem.options.canView"}],key:_vm.source.model,attrs:{"tableKey":_vm.source.model,"rules":_vm.rules,"tableIndex":_vm.index,"widget":tableItem,"models":_vm.models,"showLabel":false},on:{"update:rules":function($event){_vm.rules=$event}}})],1)}),(!_vm.widget.options.disabled && !_vm.widget.options.hiddenOperateBtn)?_c('span',{staticClass:"last-one",style:({ borderColor: _vm.data.config.borderColor })},[_c('a-button',{attrs:{"size":"small","type":"primary"},on:{"click":function($event){return _vm.handleDeleteRow(_vm.index, _vm.widget.model)}}},[_vm._v("删除行")])],1):_vm._e()],2)}
+var staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/_thread-loader@3.0.4@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.3.0@babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/form/modules/common/tableItem.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ var tableItemvue_type_script_lang_js_ = ({
+  props: {
+    widget: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    source: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    index: {
+      type: Number
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    models: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    handleDeleteRow: {
+      type: Function,
+      default: () => {
+        return () => {};
+      }
+    }
+  },
+  inject: {
+    isCorrectAudit: {
+      from: "isCorrectAudit",
+      // 来源
+      default: () => () => false // 默认值
+    },
+
+    isCorrect: {
+      // 健名
+      from: "isCorrect",
+      // 来源
+      default: false // 默认值
+    }
+  },
+
+  data() {
+    return {
+      isEdit: false,
+      editArr: []
+    };
+  },
+  created() {
+    this.editArr.length = this.source.columns.length;
+  },
+  methods: {
+    tableColumnsDBClick(talbeIndex, widget) {
+      this.$set(this.editArr, talbeIndex, true);
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/form/modules/common/tableItem.vue?vue&type=script&lang=js&
+ /* harmony default export */ var common_tableItemvue_type_script_lang_js_ = (tableItemvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/_mini-css-extract-plugin@2.7.6@mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/_css-loader@6.8.1@css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader@6.2.1@postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/_less-loader@5.0.0@less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/form/modules/common/tableItem.vue?vue&type=style&index=0&id=b1812dae&prod&scoped=true&lang=less&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/form/modules/common/tableItem.vue?vue&type=style&index=0&id=b1812dae&prod&scoped=true&lang=less&
+
+// EXTERNAL MODULE: ./node_modules/_vue-loader@15.10.1@vue-loader/lib/runtime/componentNormalizer.js
+var componentNormalizer = __webpack_require__(8412);
+;// CONCATENATED MODULE: ./src/form/modules/common/tableItem.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var component = (0,componentNormalizer/* default */.Z)(
+  common_tableItemvue_type_script_lang_js_,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  "b1812dae",
+  null
+  
+)
+
+/* harmony default export */ var tableItem = (component.exports);
+
+/***/ }),
+
 /***/ 3723:
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -107500,7 +107694,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__7203__;
 /***/ (function(module) {
 
 "use strict";
-module.exports = {"i8":"1.1.40"};
+module.exports = {"i8":"1.1.41"};
 
 /***/ })
 
@@ -107633,29 +107827,32 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(7203);
 var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
-;// CONCATENATED MODULE: ./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/form/modules/layout/layoutForPaper.vue?vue&type=template&id=7edbe256&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/form/modules/layout/layoutForPaper.vue?vue&type=template&id=57dc7d67&scoped=true&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a-spin',{staticClass:"layout layout-input-all-setting",class:{ 'no-border': !_vm.data.config.border, 'save-pdf': _vm.showLine, 'ant-form-noBorder': _vm.data.config.componentsNoBorder },attrs:{"spinning":_vm.formLoading,"tip":_vm.formLoadingTip}},[_c('a-form-model',{ref:"Form",attrs:{"hideRequiredMark":true,"model":_vm.models,"rules":_vm.rules,"wrapper-col":{}},on:{"update:rules":function($event){_vm.rules=$event}}},_vm._l((_vm.widgetList),function(list,listindex){return _c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.widgetList[0].length > 0),expression:"widgetList[0].length > 0"}],key:listindex,staticClass:"paper",style:(_vm.contentStyle)},[(listindex == 0)?_vm._t("default"):_vm._e(),(listindex == 0)?_c('div',{staticClass:"form-title",style:({ height: _vm.formNameHeight })},[_vm._v(" "+_vm._s(_vm.data.config.formName)+" ")]):_vm._e(),(_vm.data.config.pageHeader && listindex === 0)?_c('div',{style:(_vm.data.config.headerHeight),domProps:{"innerHTML":_vm._s(_vm.data.config.pageHeader)}}):_vm._e(),_c('div',{staticClass:"page-border",style:({ borderColor: _vm.data.config.borderColor })},[_vm._l((list),function(widget,index){return [(widget.type == 'table')?[(
-                widget.options.layoutModel === 'auto' ||
-                widget.options.layoutModel === undefined
-              )?_c('a-spin',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView),expression:"widget.options.canView"}],key:index,staticClass:"row-item",class:[widget.options.inline == true ? 'row-table' : ''],style:({ borderColor: _vm.data.config.borderColor }),attrs:{"spinning":_vm.tableLoading && !_vm.formLoading,"tip":"数据加载中"}},[(widget.options.inline)?_c('div',{staticClass:"table-left",style:({
-                  width: widget.options.labelWidth + 'px',
-                  borderColor: _vm.data.config.borderColor,
-                  backgroundColor: _vm.data.config.bgc,
-                  color: _vm.data.config.color,
-                })},[_c('p',{staticStyle:{"position":"relative","margin-bottom":"0","padding-bottom":"0"}},[(widget.options.enableImport && !widget.options.disabled)?_c('span',{staticStyle:{"position":"absolute","display":"flex","height":"100%","align-items":"center"}},[_c('a-upload',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"action":_vm.actionUrl + "?formId=" + (_vm.data.formId) + "&tableKey=" + (widget.model),"headers":_vm.headers,"showUploadList":false},on:{"change":function (params) { return _vm.handleChange(widget, params); }}},[_c('a-button',[_c('a-icon',{attrs:{"type":"upload"}}),_vm._v("上传")],1)],1),_c('confirm-box',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"content":"注意：使用Excel模板导入仅支持文本、日期、下拉等内容，无法支持复杂的组件以及数据校验等，请确认！"},on:{"confirm":function($event){return _vm.downloadTableTemplate(widget)}}},[_c('a-button',[_vm._v("下载模板")])],1)],1):_vm._e(),_c('span',[_vm._v(_vm._s(widget.name))])])]):_c('div',{staticClass:"table-content",style:({ borderColor: _vm.data.config.borderColor })},[_c('p',{staticStyle:{"position":"relative","margin-bottom":"0"}},[(widget.options.enableImport && !widget.options.disabled)?_c('span',{staticStyle:{"position":"absolute","display":"flex","height":"100%","align-items":"center"}},[_c('a-upload',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"action":_vm.actionUrl + "?formId=" + (_vm.data.formId) + "&tableKey=" + (widget.model),"headers":_vm.headers,"showUploadList":false},on:{"change":function (params) { return _vm.handleChange(widget, params); }}},[_c('a-button',[_c('a-icon',{attrs:{"type":"upload"}}),_vm._v("上传")],1)],1),_c('confirm-box',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"content":"注意：使用Excel模板导入仅支持文本、日期、下拉等内容，无法支持复杂的组件以及数据校验等，请确认！"},on:{"confirm":function($event){return _vm.downloadTableTemplate(widget)}}},[_c('a-button',[_vm._v("下载模板")])],1)],1):_vm._e(),_c('span',[_vm._v(_vm._s(widget.name))])])]),_c('div',{staticClass:"table-right"},[_c('div',{staticClass:"sub-table-col sub-table-col-no-border"},[_vm._l((widget.columns),function(children,index){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(children.type !== 'hidden'),expression:"children.type !== 'hidden'"}],key:index,class:[
-                      _vm.data.config.align,
-                      _vm.data.config.validate === true && children.options.required === true
-                        ? 'is_required'
-                        : 'no_required' ],staticStyle:{"border-right":"1px solid #333","border-bottom":"1px solid #333"},style:({ borderColor: _vm.data.config.borderColor })},[_vm._v(_vm._s(children.name))])}),(!widget.options.hiddenOperateBtn && widget.columns.length > 0 && !widget.options.disabled)?_c('span',{staticClass:"last-one",style:({ borderColor: _vm.data.config.borderColor })},[_c('a-button',{attrs:{"size":"small","type":"primary"},on:{"click":function($event){return _vm.addToTableData(widget, widget.model, 'addModel', true)}}},[_vm._v("添加行")])],1):_vm._e()],2),_vm._l((_vm.tableData[widget.model]),function(tableColums,columsIndex){return _c('div',{key:columsIndex,staticClass:"sub-table-col sub-table-col-no-border"},[_vm._l((tableColums.columns),function(tableItem,talbeIndex){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(tableItem.type !== 'hidden'),expression:"tableItem.type !== 'hidden'"}],key:columsIndex + '_' + talbeIndex,staticClass:"sub-table-item"},[(['input', 'textarea'].includes(tableItem.type) && !tableItem.tableColCanEdit )?_c('div',{directives:[{name:"show",rawName:"v-show",value:(tableItem.options.canView),expression:"tableItem.options.canView"}],style:(("color: #000; border-right: 1px solid #333; border-bottom: 1px solid #333;  line-height: normal; padding: 0 15px; line-break: anywhere; overflow: hidden; display: flex;  align-items: center; height: " + (widget.options.rowsHeight ? widget.options.rowsHeight + 'px' : 'initial'))),on:{"dblclick":function($event){return _vm.tableColumnsDBClick(tableItem, tableColums.model + '_' + columsIndex + '_' + tableItem.model)}}},[_c('span',[_vm._v(_vm._s(_vm.models[tableColums.model][columsIndex][tableItem.model]))])]):_c('layout-item',{directives:[{name:"show",rawName:"v-show",value:(tableItem.options.canView),expression:"tableItem.options.canView"}],ref:tableColums.model + '_' + columsIndex + '_' + tableItem.model,refInFor:true,attrs:{"tableKey":tableColums.model,"rules":_vm.rules,"tableIndex":columsIndex,"widget":tableItem,"verifyNode":_vm.verifyNode,"suggest":_vm.suggest,"verifyLogs":_vm.verifyLogs,"models":_vm.models,"showLabel":false},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1)}),(!widget.options.disabled && !widget.options.hiddenOperateBtn)?_c('span',{staticClass:"last-one",style:({ borderColor: _vm.data.config.borderColor })},[_c('a-button',{attrs:{"size":"small","type":"primary"},on:{"click":function($event){return _vm.handleDeleteRow(columsIndex, widget.model)}}},[_vm._v("删除行")])],1):_vm._e()],2)}),(
-                    widget.options.computingSub.length > 0 &&
-                    widget.options.computingMethod.length > 0 &&
-                    _vm.tableData &&
-                    _vm.tableData[widget.model] &&
-                    _vm.tableData[widget.model].length > 0
-                  )?_c('div',{staticClass:"computed-wrap"},[_c('div',{staticClass:"item"},[_c('div',[_vm._v("需统计字段")]),_vm._l((widget.options.computingSub),function(_item,key){return _c('div',{key:key},[_vm._v(" "+_vm._s(_vm.getSubName(_item, widget.columns))+" ")])})],2),_vm._l((widget.options.computingMethod),function(_methodItem,key){return _c('div',{key:key,staticClass:"item"},[_c('div',[_vm._v(_vm._s(_vm.getMethodName(_methodItem)))]),_vm._l((widget.options.computingSub),function(_subItem,it_key){return _c('div',{key:it_key},[_vm._v(" "+_vm._s(_vm.getMathResult(_methodItem, _vm.models[widget.model], _subItem))+" ")])})],2)})],2):_vm._e()],2)]):(widget.options.layoutModel === 'design')?_c('a-spin',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView),expression:"widget.options.canView"}],key:index,staticClass:"table_border row-item",style:({ borderColor: _vm.data.config.borderColor }),attrs:{"spinning":_vm.tableLoading && !_vm.formLoading,"tip":"数据加载中"}},[_c('tableComponent',{attrs:{"widget":widget,"tableData":_vm.tableData,"rules":_vm.rules,"models":_vm.models,"formId":_vm.data.formId,"index":index,"listindex":listindex},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event},"addToTableData":_vm.addToTableData,"handleDeleteRow":_vm.handleDeleteRow}})],1):_vm._e()]:(widget.type === 'grid')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('grid-component',{attrs:{"rules":_vm.rules,"models":_vm.models,"widget":widget,"index":index,"verifyNode":_vm.verifyNode,"suggest":_vm.suggest,"verifyLogs":_vm.verifyLogs,"config":_vm.data.config,"listindex":listindex},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'grid-lay-out')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",class:widget.type == 'grid-lay-out' ? ' no-row-item ' : '',style:({ borderColor: _vm.data.config.borderColor })},[_c('grid-layout-component',{attrs:{"widget":widget,"rules":_vm.rules,"models":_vm.models,"index":index,"verifyNode":_vm.verifyNode,"suggest":_vm.suggest,"verifyLogs":_vm.verifyLogs,"listindex":listindex,"config":_vm.data.config},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'verify')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('verify-component',{attrs:{"widget":widget,"rules":_vm.rules,"models":_vm.models,"verifyNode":_vm.verifyNode,"verifyLogs":_vm.verifyLogs,"suggest":_vm.suggest},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'all-lay-out')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('all-layout-component',{attrs:{"widget":widget,"rules":_vm.rules,"models":_vm.models,"index":index,"listindex":listindex},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'placeholder')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,class:{
-              'item-bottom': !widget.options.border,
-              'row-item': widget.options.border,
-            },style:({ borderColor: _vm.data.config.borderColor })},[_c('layout-item',{attrs:{"widget":widget,"models":_vm.models,"rules":_vm.rules,"verifyNode":_vm.verifyNode,"verifyLogs":_vm.verifyLogs},on:{"update:models":function($event){_vm.models=$event},"update:rules":function($event){_vm.rules=$event}}})],1):_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('layout-item',{attrs:{"widget":widget,"models":_vm.models,"verifyNode":_vm.verifyNode,"verifyLogs":_vm.verifyLogs,"suggest":_vm.suggest,"rules":_vm.rules},on:{"update:models":function($event){_vm.models=$event},"update:rules":function($event){_vm.rules=$event}}})],1)]})],2),(_vm.data.config.pageFooter && listindex === _vm.widgetList.length - 1)?_c('div',{style:(_vm.data.config.footerHeight),domProps:{"innerHTML":_vm._s(_vm.data.config.pageFooter)}}):_vm._e()],2)}),0)],1)}
+                  widget.options.layoutModel === 'auto' ||
+                  widget.options.layoutModel === undefined
+                )?_c('a-spin',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView),expression:"widget.options.canView"}],key:index,staticClass:"row-item",class:[widget.options.inline == true ? 'row-table' : ''],style:({ borderColor: _vm.data.config.borderColor }),attrs:{"spinning":_vm.tableLoading && !_vm.formLoading,"tip":"数据加载中"}},[(widget.options.inline)?_c('div',{staticClass:"table-left",style:({
+                    width: widget.options.labelWidth + 'px',
+                    borderColor: _vm.data.config.borderColor,
+                    backgroundColor: _vm.data.config.bgc,
+                    color: _vm.data.config.color,
+                  })},[_c('p',{staticStyle:{"position":"relative","margin-bottom":"0","padding-bottom":"0"}},[(widget.options.enableImport && !widget.options.disabled)?_c('span',{staticStyle:{"position":"absolute","display":"flex","height":"100%","align-items":"center"}},[_c('a-upload',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"action":_vm.actionUrl + "?formId=" + (_vm.data.formId) + "&tableKey=" + (widget.model),"headers":_vm.headers,"showUploadList":false},on:{"change":function (params) { return _vm.handleChange(widget, params); }}},[_c('a-button',[_c('a-icon',{attrs:{"type":"upload"}}),_vm._v("上传")],1)],1),_c('confirm-box',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"content":"注意：使用Excel模板导入仅支持文本、日期、下拉等内容，无法支持复杂的组件以及数据校验等，请确认！"},on:{"confirm":function($event){return _vm.downloadTableTemplate(widget)}}},[_c('a-button',[_vm._v("下载模板")])],1)],1):_vm._e(),_c('span',[_vm._v(_vm._s(widget.name))])])]):_c('div',{staticClass:"table-content",style:({ borderColor: _vm.data.config.borderColor })},[_c('p',{staticStyle:{"position":"relative","margin-bottom":"0"}},[(widget.options.enableImport && !widget.options.disabled)?_c('span',{staticStyle:{"position":"absolute","display":"flex","height":"100%","align-items":"center"}},[_c('a-upload',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"action":_vm.actionUrl + "?formId=" + (_vm.data.formId) + "&tableKey=" + (widget.model),"headers":_vm.headers,"showUploadList":false},on:{"change":function (params) { return _vm.handleChange(widget, params); }}},[_c('a-button',[_c('a-icon',{attrs:{"type":"upload"}}),_vm._v("上传")],1)],1),_c('confirm-box',{staticStyle:{"float":"left","margin":"0 5px"},attrs:{"content":"注意：使用Excel模板导入仅支持文本、日期、下拉等内容，无法支持复杂的组件以及数据校验等，请确认！"},on:{"confirm":function($event){return _vm.downloadTableTemplate(widget)}}},[_c('a-button',[_vm._v("下载模板")])],1)],1):_vm._e(),_c('span',[_vm._v(_vm._s(widget.name))])])]),_c('div',{staticClass:"table-right"},[_c('div',{staticClass:"sub-table-col sub-table-col-no-border"},[_vm._l((widget.columns),function(children,index){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(children.type !== 'hidden'),expression:"children.type !== 'hidden'"}],key:index,class:[
+                        _vm.data.config.align,
+                        _vm.data.config.validate === true && children.options.required === true
+                          ? 'is_required'
+                          : 'no_required' ],staticStyle:{"border-right":"1px solid #333","border-bottom":"1px solid #333"},style:({ borderColor: _vm.data.config.borderColor })},[_vm._v(_vm._s(children.name))])}),(!widget.options.hiddenOperateBtn && widget.columns.length > 0 && !widget.options.disabled)?_c('span',{staticClass:"last-one",style:({ borderColor: _vm.data.config.borderColor })},[_c('a-button',{attrs:{"size":"small","type":"primary"},on:{"click":function($event){return _vm.addToTableData(widget, widget.model, 'addModel', true)}}},[_vm._v("添加行")])],1):_vm._e()],2),(Array.isArray(_vm.tableData[widget.model]))?[_c('virtual-list',{staticClass:"virtual-list",attrs:{"keeps":50,"page-mode":"","data-key":function (ref) {
+                      var model = ref.model;
+                      var idx = ref.index;
+  return model + idx},"data-sources":_vm.tableData[widget.model],"data-component":_vm.tableItem,"extra-props":{ widget: widget, models: _vm.models, data: _vm.data, rules: _vm.rules, handleDeleteRow: _vm.handleDeleteRow}}})]:_vm._e(),(
+                      widget.options.computingSub.length > 0 &&
+                      widget.options.computingMethod.length > 0 &&
+                      _vm.tableData &&
+                      _vm.tableData[widget.model] &&
+                      _vm.tableData[widget.model].length > 0
+                    )?_c('div',{staticClass:"computed-wrap"},[_c('div',{staticClass:"item"},[_c('div',[_vm._v("需统计字段")]),_vm._l((widget.options.computingSub),function(_item,key){return _c('div',{key:key},[_vm._v(" "+_vm._s(_vm.getSubName(_item, widget.columns))+" ")])})],2),_vm._l((widget.options.computingMethod),function(_methodItem,key){return _c('div',{key:key,staticClass:"item"},[_c('div',[_vm._v(_vm._s(_vm.getMethodName(_methodItem)))]),_vm._l((widget.options.computingSub),function(_subItem,it_key){return _c('div',{key:it_key},[_vm._v(" "+_vm._s(_vm.getMathResult(_methodItem, _vm.models[widget.model], _subItem))+" ")])})],2)})],2):_vm._e()],2)]):(widget.options.layoutModel === 'design')?_c('a-spin',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView),expression:"widget.options.canView"}],key:index,staticClass:"table_border row-item",style:({ borderColor: _vm.data.config.borderColor }),attrs:{"spinning":_vm.tableLoading && !_vm.formLoading,"tip":"数据加载中"}},[_c('tableComponent',{attrs:{"widget":widget,"tableData":_vm.tableData,"rules":_vm.rules,"models":_vm.models,"formId":_vm.data.formId,"index":index,"listindex":listindex},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event},"addToTableData":_vm.addToTableData,"handleDeleteRow":_vm.handleDeleteRow}})],1):_vm._e()]:(widget.type === 'grid')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('grid-component',{attrs:{"rules":_vm.rules,"models":_vm.models,"widget":widget,"index":index,"verifyNode":_vm.verifyNode,"suggest":_vm.suggest,"verifyLogs":_vm.verifyLogs,"config":_vm.data.config,"listindex":listindex},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'grid-lay-out')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",class:widget.type == 'grid-lay-out' ? ' no-row-item ' : '',style:({ borderColor: _vm.data.config.borderColor })},[_c('grid-layout-component',{attrs:{"widget":widget,"rules":_vm.rules,"models":_vm.models,"index":index,"verifyNode":_vm.verifyNode,"suggest":_vm.suggest,"verifyLogs":_vm.verifyLogs,"listindex":listindex,"config":_vm.data.config},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'verify')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('verify-component',{attrs:{"widget":widget,"rules":_vm.rules,"models":_vm.models,"verifyNode":_vm.verifyNode,"verifyLogs":_vm.verifyLogs,"suggest":_vm.suggest},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'all-lay-out')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('all-layout-component',{attrs:{"widget":widget,"rules":_vm.rules,"models":_vm.models,"index":index,"listindex":listindex},on:{"update:rules":function($event){_vm.rules=$event},"update:models":function($event){_vm.models=$event}}})],1):(widget.type == 'placeholder')?_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,class:{
+                'item-bottom': !widget.options.border,
+                'row-item': widget.options.border,
+              },style:({ borderColor: _vm.data.config.borderColor })},[_c('layout-item',{attrs:{"widget":widget,"models":_vm.models,"rules":_vm.rules,"verifyNode":_vm.verifyNode,"verifyLogs":_vm.verifyLogs},on:{"update:models":function($event){_vm.models=$event},"update:rules":function($event){_vm.rules=$event}}})],1):_c('div',{directives:[{name:"show",rawName:"v-show",value:(widget.options.canView && widget.type != 'hidden'),expression:"widget.options.canView && widget.type != 'hidden'"}],key:index,staticClass:"row-item",style:({ borderColor: _vm.data.config.borderColor })},[_c('layout-item',{attrs:{"widget":widget,"models":_vm.models,"verifyNode":_vm.verifyNode,"verifyLogs":_vm.verifyLogs,"suggest":_vm.suggest,"rules":_vm.rules},on:{"update:models":function($event){_vm.models=$event},"update:rules":function($event){_vm.rules=$event}}})],1)]})],2),(_vm.data.config.pageFooter && listindex === _vm.widgetList.length - 1)?_c('div',{style:(_vm.data.config.footerHeight),domProps:{"innerHTML":_vm._s(_vm.data.config.pageFooter)}}):_vm._e()],2)}),0)],1)}
 var staticRenderFns = []
 
 
@@ -107663,10 +107860,10 @@ var staticRenderFns = []
 var layoutForPapervue_type_script_lang_js_ = __webpack_require__(7862);
 ;// CONCATENATED MODULE: ./src/form/modules/layout/layoutForPaper.vue?vue&type=script&lang=js&
  /* harmony default export */ var layout_layoutForPapervue_type_script_lang_js_ = (layoutForPapervue_type_script_lang_js_/* default */.Z); 
-;// CONCATENATED MODULE: ./node_modules/_mini-css-extract-plugin@2.7.6@mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/_css-loader@6.8.1@css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader@6.2.1@postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/_less-loader@5.0.0@less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/form/modules/layout/layoutForPaper.vue?vue&type=style&index=1&id=7edbe256&prod&lang=less&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/_mini-css-extract-plugin@2.7.6@mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/_css-loader@6.8.1@css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader@6.2.1@postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/_less-loader@5.0.0@less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/form/modules/layout/layoutForPaper.vue?vue&type=style&index=1&id=57dc7d67&prod&lang=less&scoped=true&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/form/modules/layout/layoutForPaper.vue?vue&type=style&index=1&id=7edbe256&prod&lang=less&scoped=true&
+;// CONCATENATED MODULE: ./src/form/modules/layout/layoutForPaper.vue?vue&type=style&index=1&id=57dc7d67&prod&lang=less&scoped=true&
 
 // EXTERNAL MODULE: ./node_modules/_vue-loader@15.10.1@vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__(8412);
@@ -107685,7 +107882,7 @@ var component = (0,componentNormalizer/* default */.Z)(
   staticRenderFns,
   false,
   null,
-  "7edbe256",
+  "57dc7d67",
   null
   
 )
@@ -111594,6 +111791,953 @@ var Container_component = (0,componentNormalizer/* default */.Z)(
 )
 
 /* harmony default export */ var Container = (Container_component.exports);
+;// CONCATENATED MODULE: ./src/components/VirtualList/virtual.js
+/**
+ * virtual list core calculating center
+ */
+
+const DIRECTION_TYPE = {
+  FRONT: 'FRONT',
+  // scroll up or left
+  BEHIND: 'BEHIND' // scroll down or right
+};
+
+const CALC_TYPE = {
+  INIT: 'INIT',
+  FIXED: 'FIXED',
+  DYNAMIC: 'DYNAMIC'
+};
+const LEADING_BUFFER = 0;
+class Virtual {
+  constructor(param, callUpdate) {
+    this.init(param, callUpdate);
+  }
+  init(param, callUpdate) {
+    // param data
+    this.param = param;
+    this.callUpdate = callUpdate;
+
+    // size data
+    this.sizes = new Map();
+    this.firstRangeTotalSize = 0;
+    this.firstRangeAverageSize = 0;
+    this.fixedSizeValue = 0;
+    this.calcType = CALC_TYPE.INIT;
+
+    // scroll data
+    this.offset = 0;
+    this.direction = '';
+
+    // range data
+    this.range = Object.create(null);
+    if (param) {
+      this.checkRange(0, param.keeps - 1);
+    }
+
+    // benchmark test data
+    // this.__bsearchCalls = 0
+    // this.__getIndexOffsetCalls = 0
+  }
+
+  destroy() {
+    this.init(null, null);
+  }
+
+  // return current render range
+  getRange() {
+    const range = Object.create(null);
+    range.start = this.range.start;
+    range.end = this.range.end;
+    range.padFront = this.range.padFront;
+    range.padBehind = this.range.padBehind;
+    return range;
+  }
+  isBehind() {
+    return this.direction === DIRECTION_TYPE.BEHIND;
+  }
+  isFront() {
+    return this.direction === DIRECTION_TYPE.FRONT;
+  }
+
+  // return start index offset
+  getOffset(start) {
+    return (start < 1 ? 0 : this.getIndexOffset(start)) + this.param.slotHeaderSize;
+  }
+  updateParam(key, value) {
+    if (this.param && key in this.param) {
+      // if uniqueIds change, find out deleted id and remove from size map
+      if (key === 'uniqueIds') {
+        this.sizes.forEach((v, key) => {
+          if (!value.includes(key)) {
+            this.sizes.delete(key);
+          }
+        });
+      }
+      this.param[key] = value;
+    }
+  }
+
+  // save each size map by id
+  saveSize(id, size) {
+    this.sizes.set(id, size);
+
+    // we assume size type is fixed at the beginning and remember first size value
+    // if there is no size value different from this at next comming saving
+    // we think it's a fixed size list, otherwise is dynamic size list
+    if (this.calcType === CALC_TYPE.INIT) {
+      this.fixedSizeValue = size;
+      this.calcType = CALC_TYPE.FIXED;
+    } else if (this.calcType === CALC_TYPE.FIXED && this.fixedSizeValue !== size) {
+      this.calcType = CALC_TYPE.DYNAMIC;
+      // it's no use at all
+      delete this.fixedSizeValue;
+    }
+
+    // calculate the average size only in the first range
+    if (this.calcType !== CALC_TYPE.FIXED && typeof this.firstRangeTotalSize !== 'undefined') {
+      if (this.sizes.size < Math.min(this.param.keeps, this.param.uniqueIds.length)) {
+        this.firstRangeTotalSize = [...this.sizes.values()].reduce((acc, val) => acc + val, 0);
+        this.firstRangeAverageSize = Math.round(this.firstRangeTotalSize / this.sizes.size);
+      } else {
+        // it's done using
+        delete this.firstRangeTotalSize;
+      }
+    }
+  }
+
+  // in some special situation (e.g. length change) we need to update in a row
+  // try goiong to render next range by a leading buffer according to current direction
+  handleDataSourcesChange() {
+    let start = this.range.start;
+    if (this.isFront()) {
+      start = start - LEADING_BUFFER;
+    } else if (this.isBehind()) {
+      start = start + LEADING_BUFFER;
+    }
+    start = Math.max(start, 0);
+    this.updateRange(this.range.start, this.getEndByStart(start));
+  }
+
+  // when slot size change, we also need force update
+  handleSlotSizeChange() {
+    this.handleDataSourcesChange();
+  }
+
+  // calculating range on scroll
+  handleScroll(offset) {
+    this.direction = offset < this.offset || offset === 0 ? DIRECTION_TYPE.FRONT : DIRECTION_TYPE.BEHIND;
+    this.offset = offset;
+    if (!this.param) {
+      return;
+    }
+    if (this.direction === DIRECTION_TYPE.FRONT) {
+      this.handleFront();
+    } else if (this.direction === DIRECTION_TYPE.BEHIND) {
+      this.handleBehind();
+    }
+  }
+
+  // ----------- public method end -----------
+
+  handleFront() {
+    const overs = this.getScrollOvers();
+    // should not change range if start doesn't exceed overs
+    if (overs > this.range.start) {
+      return;
+    }
+
+    // move up start by a buffer length, and make sure its safety
+    const start = Math.max(overs - this.param.buffer, 0);
+    this.checkRange(start, this.getEndByStart(start));
+  }
+  handleBehind() {
+    const overs = this.getScrollOvers();
+    // range should not change if scroll overs within buffer
+    if (overs < this.range.start + this.param.buffer) {
+      return;
+    }
+    this.checkRange(overs, this.getEndByStart(overs));
+  }
+
+  // return the pass overs according to current scroll offset
+  getScrollOvers() {
+    // if slot header exist, we need subtract its size
+    const offset = this.offset - this.param.slotHeaderSize;
+    if (offset <= 0) {
+      return 0;
+    }
+
+    // if is fixed type, that can be easily
+    if (this.isFixedType()) {
+      return Math.floor(offset / this.fixedSizeValue);
+    }
+    let low = 0;
+    let middle = 0;
+    let middleOffset = 0;
+    let high = this.param.uniqueIds.length;
+    while (low <= high) {
+      // this.__bsearchCalls++
+      middle = low + Math.floor((high - low) / 2);
+      middleOffset = this.getIndexOffset(middle);
+      if (middleOffset === offset) {
+        return middle;
+      } else if (middleOffset < offset) {
+        low = middle + 1;
+      } else if (middleOffset > offset) {
+        high = middle - 1;
+      }
+    }
+    return low > 0 ? --low : 0;
+  }
+
+  // return a scroll offset from given index, can efficiency be improved more here?
+  // although the call frequency is very high, its only a superposition of numbers
+  getIndexOffset(givenIndex) {
+    if (!givenIndex) {
+      return 0;
+    }
+    let offset = 0;
+    let indexSize = 0;
+    for (let index = 0; index < givenIndex; index++) {
+      // this.__getIndexOffsetCalls++
+      indexSize = this.sizes.get(this.param.uniqueIds[index]);
+      offset = offset + (typeof indexSize === 'number' ? indexSize : this.getEstimateSize());
+    }
+    return offset;
+  }
+
+  // is fixed size type
+  isFixedType() {
+    return this.calcType === CALC_TYPE.FIXED;
+  }
+
+  // return the real last index
+  getLastIndex() {
+    return this.param.uniqueIds.length - 1;
+  }
+
+  // in some conditions range is broke, we need correct it
+  // and then decide whether need update to next range
+  checkRange(start, end) {
+    const keeps = this.param.keeps;
+    const total = this.param.uniqueIds.length;
+
+    // datas less than keeps, render all
+    if (total <= keeps) {
+      start = 0;
+      end = this.getLastIndex();
+    } else if (end - start < keeps - 1) {
+      // if range length is less than keeps, corrent it base on end
+      start = end - keeps + 1;
+    }
+    if (this.range.start !== start) {
+      this.updateRange(start, end);
+    }
+  }
+
+  // setting to a new range and rerender
+  updateRange(start, end) {
+    this.range.start = start;
+    this.range.end = end;
+    this.range.padFront = this.getPadFront();
+    this.range.padBehind = this.getPadBehind();
+    this.callUpdate(this.getRange());
+  }
+
+  // return end base on start
+  getEndByStart(start) {
+    const theoryEnd = start + this.param.keeps - 1;
+    const truelyEnd = Math.min(theoryEnd, this.getLastIndex());
+    return truelyEnd;
+  }
+
+  // return total front offset
+  getPadFront() {
+    if (this.isFixedType()) {
+      return this.fixedSizeValue * this.range.start;
+    } else {
+      return this.getIndexOffset(this.range.start);
+    }
+  }
+
+  // return total behind offset
+  getPadBehind() {
+    const end = this.range.end;
+    const lastIndex = this.getLastIndex();
+    if (this.isFixedType()) {
+      return (lastIndex - end) * this.fixedSizeValue;
+    }
+    return (lastIndex - end) * this.getEstimateSize();
+  }
+
+  // get the item estimate size
+  getEstimateSize() {
+    return this.isFixedType() ? this.fixedSizeValue : this.firstRangeAverageSize || this.param.estimateSize;
+  }
+}
+;// CONCATENATED MODULE: ./src/components/VirtualList/props.js
+/**
+ * props declaration for default, item and slot component
+ */
+
+const VirtualProps = {
+  dataKey: {
+    type: [String, Function],
+    required: true
+  },
+  dataSources: {
+    type: Array,
+    required: true
+  },
+  dataComponent: {
+    type: [Object, Function],
+    required: true
+  },
+  keeps: {
+    type: Number,
+    default: 30
+  },
+  extraProps: {
+    type: Object
+  },
+  estimateSize: {
+    type: Number,
+    default: 50
+  },
+  direction: {
+    type: String,
+    default: 'vertical' // the other value is horizontal
+  },
+
+  start: {
+    type: Number,
+    default: 0
+  },
+  offset: {
+    type: Number,
+    default: 0
+  },
+  topThreshold: {
+    type: Number,
+    default: 0
+  },
+  bottomThreshold: {
+    type: Number,
+    default: 0
+  },
+  pageMode: {
+    type: Boolean,
+    default: false
+  },
+  rootTag: {
+    type: String,
+    default: 'div'
+  },
+  wrapTag: {
+    type: String,
+    default: 'div'
+  },
+  wrapClass: {
+    type: String,
+    default: ''
+  },
+  wrapStyle: {
+    type: Object
+  },
+  itemTag: {
+    type: String,
+    default: 'div'
+  },
+  itemClass: {
+    type: String,
+    default: ''
+  },
+  itemClassAdd: {
+    type: Function
+  },
+  itemStyle: {
+    type: Object
+  },
+  headerTag: {
+    type: String,
+    default: 'div'
+  },
+  headerClass: {
+    type: String,
+    default: ''
+  },
+  headerStyle: {
+    type: Object
+  },
+  footerTag: {
+    type: String,
+    default: 'div'
+  },
+  footerClass: {
+    type: String,
+    default: ''
+  },
+  footerStyle: {
+    type: Object
+  },
+  itemScopedSlots: {
+    type: Object
+  }
+};
+const ItemProps = {
+  index: {
+    type: Number
+  },
+  event: {
+    type: String
+  },
+  tag: {
+    type: String
+  },
+  horizontal: {
+    type: Boolean
+  },
+  source: {
+    type: Object
+  },
+  component: {
+    type: [Object, Function]
+  },
+  slotComponent: {
+    type: Function
+  },
+  uniqueKey: {
+    type: [String, Number]
+  },
+  extraProps: {
+    type: Object
+  },
+  scopedSlots: {
+    type: Object
+  }
+};
+const SlotProps = {
+  event: {
+    type: String
+  },
+  uniqueKey: {
+    type: String
+  },
+  tag: {
+    type: String
+  },
+  horizontal: {
+    type: Boolean
+  }
+};
+;// CONCATENATED MODULE: ./src/components/VirtualList/item.js
+/**
+ * item and slot component both use similar wrapper
+ * we need to know their size change at any time
+ */
+
+
+
+const Wrapper = {
+  created() {
+    this.shapeKey = this.horizontal ? 'offsetWidth' : 'offsetHeight';
+  },
+  mounted() {
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.dispatchSizeChange();
+      });
+      this.resizeObserver.observe(this.$el);
+    }
+  },
+  // since componet will be reused, so disptach when updated
+  updated() {
+    // this.dispatchSizeChange()
+    this.resizeObserver.observe(this.$el);
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  },
+  methods: {
+    getCurrentSize() {
+      return this.$el ? this.$el[this.shapeKey] : 0;
+    },
+    // tell parent current size identify by unqiue key
+    dispatchSizeChange() {
+      // this.$parent.$emit(this.event, this.uniqueKey, this.getCurrentSize(), this.hasInitial)
+    }
+  }
+};
+
+// wrapping for slot
+const Slot = external_commonjs_vue_commonjs2_vue_root_Vue_default().component('virtual-list-slot', {
+  mixins: [Wrapper],
+  props: SlotProps,
+  render(h) {
+    const {
+      tag,
+      uniqueKey
+    } = this;
+    return h(tag, {
+      key: uniqueKey,
+      attrs: {
+        role: uniqueKey
+      }
+    }, this.$slots.default);
+  }
+});
+;// CONCATENATED MODULE: ./node_modules/_thread-loader@3.0.4@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.3.0@babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js??vue-loader-options!./src/components/VirtualList/virtualListItem.vue?vue&type=script&lang=js&
+
+
+/* harmony default export */ var virtualListItemvue_type_script_lang_js_ = ({
+  mixins: [Wrapper],
+  props: ItemProps,
+  name: 'virtual-list-item',
+  render(h) {
+    const {
+      tag,
+      component,
+      extraProps = {},
+      index,
+      source,
+      scopedSlots = {},
+      uniqueKey,
+      slotComponent
+    } = this;
+    const props = {
+      ...extraProps,
+      source,
+      index
+    };
+    return h(tag, {
+      key: uniqueKey,
+      attrs: {
+        role: 'listitem'
+      }
+    }, [slotComponent ? slotComponent({
+      item: source,
+      index: index,
+      scope: props
+    }) : h(component, {
+      props,
+      scopedSlots: scopedSlots
+    })]);
+  }
+});
+;// CONCATENATED MODULE: ./src/components/VirtualList/virtualListItem.vue?vue&type=script&lang=js&
+ /* harmony default export */ var VirtualList_virtualListItemvue_type_script_lang_js_ = (virtualListItemvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./src/components/VirtualList/virtualListItem.vue
+var virtualListItem_render, virtualListItem_staticRenderFns
+;
+
+
+
+/* normalize component */
+;
+var virtualListItem_component = (0,componentNormalizer/* default */.Z)(
+  VirtualList_virtualListItemvue_type_script_lang_js_,
+  virtualListItem_render,
+  virtualListItem_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var virtualListItem = (virtualListItem_component.exports);
+;// CONCATENATED MODULE: ./src/components/VirtualList/index.js
+
+/**
+ * virtual list default component
+ */
+
+
+
+
+
+
+const EVENT_TYPE = {
+  ITEM: 'item_resize',
+  SLOT: 'slot_resize'
+};
+const SLOT_TYPE = {
+  HEADER: 'thead',
+  // string value also use for aria role attribute
+  FOOTER: 'tfoot'
+};
+const VirtualList = {
+  props: VirtualProps,
+  data() {
+    return {
+      range: null
+    };
+  },
+  watch: {
+    'dataSources.length'() {
+      this.virtual.updateParam('uniqueIds', this.getUniqueIdFromDataSources());
+      this.virtual.handleDataSourcesChange();
+    },
+    keeps(newValue) {
+      this.virtual.updateParam('keeps', newValue);
+      this.virtual.handleSlotSizeChange();
+    },
+    start(newValue) {
+      this.scrollToIndex(newValue);
+    },
+    offset(newValue) {
+      this.scrollToOffset(newValue);
+    }
+  },
+  created() {
+    this.isHorizontal = this.direction === 'horizontal';
+    this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop';
+    this.installVirtual();
+
+    // listen item size change
+    this.$on(EVENT_TYPE.ITEM, this.onItemResized);
+
+    // listen slot size change
+    if (this.$slots.header || this.$slots.footer) {
+      this.$on(EVENT_TYPE.SLOT, this.onSlotResized);
+    }
+  },
+  activated() {
+    // set back offset when awake from keep-alive
+    this.scrollToOffset(this.virtual.offset);
+    if (this.pageMode) {
+      document.addEventListener('scroll', this.onScroll, {
+        passive: false
+      });
+    }
+  },
+  deactivated() {
+    if (this.pageMode) {
+      document.removeEventListener('scroll', this.onScroll);
+    }
+  },
+  mounted() {
+    // set position
+    if (this.start) {
+      this.scrollToIndex(this.start);
+    } else if (this.offset) {
+      this.scrollToOffset(this.offset);
+    }
+
+    // in page mode we bind scroll event to document
+    if (this.pageMode) {
+      this.updatePageModeFront();
+      document.addEventListener('scroll', this.onScroll, {
+        passive: false
+      });
+    }
+  },
+  beforeDestroy() {
+    this.virtual.destroy();
+    if (this.pageMode) {
+      document.removeEventListener('scroll', this.onScroll);
+    }
+  },
+  methods: {
+    // get item size by id
+    getSize(id) {
+      return this.virtual.sizes.get(id);
+    },
+    // get the total number of stored (rendered) items
+    getSizes() {
+      return this.virtual.sizes.size;
+    },
+    // return current scroll offset
+    getOffset() {
+      if (this.pageMode) {
+        return document.documentElement[this.directionKey] || document.body[this.directionKey];
+      } else {
+        const {
+          root
+        } = this.$refs;
+        return root ? Math.ceil(root[this.directionKey]) : 0;
+      }
+    },
+    // return client viewport size
+    getClientSize() {
+      const key = this.isHorizontal ? 'clientWidth' : 'clientHeight';
+      if (this.pageMode) {
+        return document.documentElement[key] || document.body[key];
+      } else {
+        const {
+          root
+        } = this.$refs;
+        return root ? Math.ceil(root[key]) : 0;
+      }
+    },
+    // return all scroll size
+    getScrollSize() {
+      const key = this.isHorizontal ? 'scrollWidth' : 'scrollHeight';
+      if (this.pageMode) {
+        return document.documentElement[key] || document.body[key];
+      } else {
+        const {
+          root
+        } = this.$refs;
+        return root ? Math.ceil(root[key]) : 0;
+      }
+    },
+    // set current scroll position to a expectant offset
+    scrollToOffset(offset) {
+      if (this.pageMode) {
+        document.body[this.directionKey] = offset;
+        document.documentElement[this.directionKey] = offset;
+      } else {
+        const {
+          root
+        } = this.$refs;
+        if (root) {
+          root[this.directionKey] = offset;
+        }
+      }
+    },
+    // set current scroll position to a expectant index
+    scrollToIndex(index) {
+      // scroll to bottom
+      if (index >= this.dataSources.length - 1) {
+        this.scrollToBottom();
+      } else {
+        const offset = this.virtual.getOffset(index);
+        this.scrollToOffset(offset);
+      }
+    },
+    // set current scroll position to bottom
+    scrollToBottom() {
+      const {
+        shepherd
+      } = this.$refs;
+      if (shepherd) {
+        const offset = shepherd[this.isHorizontal ? 'offsetLeft' : 'offsetTop'];
+        this.scrollToOffset(offset);
+
+        // check if it's really scrolled to the bottom
+        // maybe list doesn't render and calculate to last range
+        // so we need retry in next event loop until it really at bottom
+        setTimeout(() => {
+          if (this.getOffset() + this.getClientSize() + 1 < this.getScrollSize()) {
+            this.scrollToBottom();
+          }
+        }, 3);
+      }
+    },
+    // when using page mode we need update slot header size manually
+    // taking root offset relative to the browser as slot header size
+    updatePageModeFront() {
+      const {
+        root
+      } = this.$refs;
+      if (root) {
+        const rect = root.getBoundingClientRect();
+        const {
+          defaultView
+        } = root.ownerDocument;
+        const offsetFront = this.isHorizontal ? rect.left + defaultView.pageXOffset : rect.top + defaultView.pageYOffset;
+        this.virtual.updateParam('slotHeaderSize', offsetFront);
+      }
+    },
+    // reset all state back to initial
+    reset() {
+      this.virtual.destroy();
+      this.scrollToOffset(0);
+      this.installVirtual();
+    },
+    // ----------- public method end -----------
+
+    installVirtual() {
+      this.virtual = new Virtual({
+        slotHeaderSize: 0,
+        slotFooterSize: 0,
+        keeps: this.keeps,
+        estimateSize: this.estimateSize,
+        buffer: Math.round(this.keeps / 3),
+        // recommend for a third of keeps
+        uniqueIds: this.getUniqueIdFromDataSources()
+      }, this.onRangeChanged);
+
+      // sync initial range
+      this.range = this.virtual.getRange();
+    },
+    getUniqueIdFromDataSources() {
+      const {
+        dataKey
+      } = this;
+      return this.dataSources.map(dataSource => typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey]);
+    },
+    // event called when each item mounted or size changed
+    onItemResized(id, size) {
+      this.virtual.saveSize(id, size);
+      this.$emit('resized', id, size);
+    },
+    // event called when slot mounted or size changed
+    onSlotResized(type, size, hasInit) {
+      if (type === SLOT_TYPE.HEADER) {
+        this.virtual.updateParam('slotHeaderSize', size);
+      } else if (type === SLOT_TYPE.FOOTER) {
+        this.virtual.updateParam('slotFooterSize', size);
+      }
+      if (hasInit) {
+        this.virtual.handleSlotSizeChange();
+      }
+    },
+    // here is the rerendering entry
+    onRangeChanged(range) {
+      this.range = range;
+    },
+    onScroll(evt) {
+      const offset = this.getOffset();
+      const clientSize = this.getClientSize();
+      const scrollSize = this.getScrollSize();
+
+      // iOS scroll-spring-back behavior will make direction mistake
+      if (offset < 0 || offset + clientSize > scrollSize + 1 || !scrollSize) {
+        return;
+      }
+      this.virtual.handleScroll(offset);
+      this.emitEvent(offset, clientSize, scrollSize, evt);
+    },
+    // emit event in special position
+    emitEvent(offset, clientSize, scrollSize, evt) {
+      this.$emit('scroll', evt, this.virtual.getRange());
+      if (this.virtual.isFront() && !!this.dataSources.length && offset - this.topThreshold <= 0) {
+        this.$emit('totop');
+      } else if (this.virtual.isBehind() && offset + clientSize + this.bottomThreshold >= scrollSize) {
+        this.$emit('tobottom');
+      }
+    },
+    // get the real render slots based on range data
+    // in-place patch strategy will try to reuse components as possible
+    // so those components that are reused will not trigger lifecycle mounted
+    getRenderSlots(h) {
+      const slots = [];
+      const {
+        start,
+        end
+      } = this.range;
+      const {
+        dataSources,
+        dataKey,
+        itemClass,
+        itemTag,
+        itemStyle,
+        isHorizontal,
+        extraProps,
+        dataComponent,
+        itemScopedSlots
+      } = this;
+      const slotComponent = this.$scopedSlots && this.$scopedSlots.item;
+      for (let index = start; index <= end; index++) {
+        const dataSource = dataSources[index];
+        if (dataSource) {
+          const uniqueKey = typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey];
+          if (typeof uniqueKey === 'string' || typeof uniqueKey === 'number') {
+            slots.push(h(virtualListItem, {
+              props: {
+                index,
+                tag: itemTag,
+                event: EVENT_TYPE.ITEM,
+                horizontal: isHorizontal,
+                uniqueKey: uniqueKey,
+                source: dataSource,
+                extraProps: extraProps,
+                component: dataComponent,
+                slotComponent: slotComponent,
+                scopedSlots: itemScopedSlots
+              },
+              style: itemStyle,
+              class: `${itemClass}${this.itemClassAdd ? ' ' + this.itemClassAdd(index) : ''}`
+            }));
+          } else {
+            console.warn(`Cannot get the data-key '${dataKey}' from data-sources.`);
+          }
+        } else {
+          console.warn(`Cannot get the index '${index}' from data-sources.`);
+        }
+      }
+      return slots;
+    }
+  },
+  // render function, a closer-to-the-compiler alternative to templates
+  // https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
+  render(h) {
+    const {
+      header,
+      footer
+    } = this.$slots;
+    const {
+      padFront,
+      padBehind
+    } = this.range;
+    const {
+      isHorizontal,
+      pageMode,
+      rootTag,
+      wrapTag,
+      wrapClass,
+      wrapStyle,
+      headerTag,
+      headerClass,
+      headerStyle,
+      footerTag,
+      footerClass,
+      footerStyle
+    } = this;
+    const paddingStyle = {
+      padding: isHorizontal ? `0px ${padBehind}px 0px ${padFront}px` : `${padFront}px 0px ${padBehind}px`
+    };
+    const wrapperStyle = wrapStyle ? Object.assign({}, wrapStyle, paddingStyle) : paddingStyle;
+    return h(rootTag, {
+      ref: 'root',
+      on: {
+        '&scroll': !pageMode && this.onScroll
+      }
+    }, [
+    // header slot
+    header ? h(Slot, {
+      class: headerClass,
+      style: headerStyle,
+      props: {
+        tag: headerTag,
+        event: EVENT_TYPE.SLOT,
+        uniqueKey: SLOT_TYPE.HEADER
+      }
+    }, header) : null,
+    // main list
+    h(wrapTag, {
+      class: wrapClass,
+      attrs: {
+        role: 'group'
+      },
+      style: wrapperStyle
+    }, this.getRenderSlots(h)),
+    // footer slot
+    footer ? h(Slot, {
+      class: footerClass,
+      style: footerStyle,
+      props: {
+        tag: footerTag,
+        event: EVENT_TYPE.SLOT,
+        uniqueKey: SLOT_TYPE.FOOTER
+      }
+    }, footer) : null,
+    // an empty element use to scroll to bottom
+    h('div', {
+      ref: 'shepherd',
+      style: {
+        width: isHorizontal ? '0px' : '100%',
+        height: isHorizontal ? '100%' : '0px'
+      }
+    })]);
+  }
+};
+/* harmony default export */ var components_VirtualList = (VirtualList);
 ;// CONCATENATED MODULE: ./src/main.js
 
 const version = (__webpack_require__(4147)/* .version */ .i8);
@@ -111603,6 +112747,7 @@ console.log("version:", version);
 
 
 
+
 const main_components = [layoutForPaper, Container, layoutItem["default"]];
 const install = function (Vue, opts = {}) {
   Vue.prototype = Object.assign(Vue.prototype, opts);
@@ -111610,6 +112755,7 @@ const install = function (Vue, opts = {}) {
   main_components.forEach(component => {
     Vue.component(component.name, component);
   });
+  Vue.component('virtual-list', components_VirtualList);
 };
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);