remove props keys of forms and columns

zollero · Dec 19, 2017 · 80edd74 · 80edd74
1 parent d896d18
commit 80edd74
Show file tree

Hide file tree

Showing 9 changed files with 449 additions and 451 deletions.
diff --git a/lib/el-search-table-pagination.common.js b/lib/el-search-table-pagination.common.js
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/search-table-pagination.js b/lib/search-table-pagination.js
diff --git a/lib/search.js b/lib/search.js
@@ -221,59 +221,59 @@ var formProps = exports.formProps = {
   },
   forms: {
     type: Array,
-    required: true,
-    label: String,
-    prop: {
-      type: [String, Array],
-      required: true
-    },
-    itemType: {
-      type: String,
-      default: 'input',
-      validator: itemTypeValidator
-    },
-    size: {
-      type: String,
-      default: '',
-      validator: sizeValidator
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    fuzzy: {
-      type: Boolean,
-      default: false
-    },
-    options: Array,
-    selectFetch: Function,
-    selectResultField: String,
-    selectResultHandler: Function,
-    selectUrl: String,
-    selectMethod: String,
-    valueKey: String,
-    labelKey: String,
-    format: Function,
-    selectParams: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    },
-    rules: Array,
-    pickerOptions: Object
+    required: true
+    // label: String,
+    // prop: {
+    //   type: [String, Array],
+    //   required: true
+    // },
+    // itemType: {
+    //   type: String,
+    //   default: 'input',
+    //   validator: itemTypeValidator
+    // },
+    // size: {
+    //   type: String,
+    //   default: '',
+    //   validator: sizeValidator
+    // },
+    // placeholder: {
+    //   type: String,
+    //   default: ''
+    // },
+    // editable: {
+    //   type: Boolean,
+    //   default: true
+    // },
+    // disabled: {
+    //   type: Boolean,
+    //   default: false
+    // },
+    // readonly: {
+    //   type: Boolean,
+    //   default: false
+    // },
+    // fuzzy: {
+    //   type: Boolean,
+    //   default: false
+    // },
+    // options: Array,
+    // selectFetch: Function,
+    // selectResultField: String,
+    // selectResultHandler: Function,
+    // selectUrl: String,
+    // selectMethod: String,
+    // valueKey: String,
+    // labelKey: String,
+    // format: Function,
+    // selectParams: {
+    //   type: Object,
+    //   default: () => {
+    //     return {}
+    //   }
+    // },
+    // rules: Array,
+    // pickerOptions: Object
   }
 };
 
@@ -286,14 +286,14 @@ function sizeValidator(value) {
   return valid;
 }
 
-function itemTypeValidator(value) {
-  var methodTypes = ['input', 'select', 'date', 'daterange'];
-  var valid = methodTypes.indexOf(value.toLowerCase()) !== -1;
-  if (!valid) {
-    throw new Error('ItemType must be one of [\'input\', \'select\', \'date\', \'daterange\']');
-  }
-  return valid;
-}
+// function itemTypeValidator(value) {
+//   const methodTypes = ['input', 'select', 'date', 'daterange'];
+//   const valid = methodTypes.indexOf(value.toLowerCase()) !== -1
+//   if (!valid) {
+//     throw new Error(`ItemType must be one of ['input', 'select', 'date', 'daterange']`)
+//   }
+//   return valid
+// }
 
 /***/ }),
 /* 2 */
@@ -303,7 +303,7 @@ function itemTypeValidator(value) {
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__ = __webpack_require__(3);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_a5e9fc3c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5b9d566d_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__ = __webpack_require__(4);
 var normalizeComponent = __webpack_require__(0)
 /* script */
 
@@ -319,7 +319,7 @@ var __vue_scopeId__ = null
 var __vue_module_identifier__ = null
 var Component = normalizeComponent(
   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default.a,
-  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_a5e9fc3c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__["a" /* default */],
+  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5b9d566d_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__["a" /* default */],
   __vue_template_functional__,
   __vue_styles__,
   __vue_scopeId__,
@@ -595,7 +595,7 @@ exports.default = {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-form',{ref:"form",attrs:{"model":_vm.params,"inline":_vm.inline,"label-width":_vm.labelWidth ? (_vm.labelWidth + 'px') : ''},nativeOn:{"submit":function($event){$event.preventDefault();_vm.searchHandler()}}},[_vm._l((_vm.forms),function(form,index){return _c('el-form-item',{key:index,attrs:{"prop":form.itemType != 'daterange' ? form.prop : (_vm.datePrefix + index),"label":form.label,"rules":form.rules || [],"label-width":form.labelWidth ? (form.labelWidth + 'px') : ''}},[(form.itemType === 'input' || form.itemType === undefined)?_c('el-input',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"size":form.size ? form.size : _vm.size,"readonly":form.readonly,"disabled":form.disabled,"placeholder":form.placeholder},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}}):(form.itemType === 'select')?_c('el-select',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"size":form.size ? form.size : _vm.size,"disabled":form.disabled,"placeholder":form.placeholder},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}},[_vm._l((form.options),function(option,optionIndex){return _c('el-option',{key:optionIndex,attrs:{"value":(typeof option === 'object') ? option[form.valueKey || 'value'] : option,"label":(typeof option === 'object') ? option[form.labelKey || 'label'] : option}})}),_vm._l((_vm.selectOptions[_vm.selectOptionPrefix + index]),function(op,opIndex){return _c('el-option',{key:opIndex,attrs:{"value":(typeof op === 'object') ? op[form.valueKey || 'value'] : op,"label":(typeof op === 'object') ? op[form.labelKey || 'label'] : op}})})],2):(form.itemType === 'date')?_c('el-date-picker',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"type":"date","placeholder":form.placeholder,"size":form.size ? form.size : _vm.size,"disabled":form.disabled,"readonly":form.readonly,"editable":form.editable,"picker-options":form.pickerOptions || {}},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}}):(form.itemType === 'daterange')?_c('el-date-picker',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"size":form.size ? form.size : _vm.size,"type":"daterange","disabled":form.disabled,"readonly":form.readonly,"editable":form.editable,"placeholder":form.placeholder,"picker-options":form.pickerOptions || {}},on:{"change":function (date) { return _vm.changeDate(date, form.prop[0], form.prop[1]); }},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}}):_vm._e()],1)}),_c('el-form-item',{attrs:{"label":""}},[_c('el-button',{attrs:{"type":"primary","size":_vm.size,"loading":_vm.submitLoading},on:{"click":_vm.searchHandler}},[_vm._v("\n      "+_vm._s(_vm.submitBtnText)+"\n    ")]),(_vm.showResetBtn)?_c('el-button',{attrs:{"type":"primary","plain":true,"size":_vm.size,"loading":_vm.submitLoading},on:{"click":_vm.resetForm}},[_vm._v("\n      "+_vm._s(_vm.resetBtnText)+"\n    ")]):_vm._e()],1)],2)}
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-form',{ref:"form",attrs:{"model":_vm.params,"inline":_vm.inline,"label-width":_vm.labelWidth ? (_vm.labelWidth + 'px') : ''},nativeOn:{"submit":function($event){$event.preventDefault();_vm.searchHandler()}}},[_vm._l((_vm.forms),function(form,index){return _c('el-form-item',{key:index,attrs:{"prop":form.itemType != 'daterange' ? form.prop : (_vm.datePrefix + index),"label":form.label,"rules":form.rules || [],"label-width":form.labelWidth ? (form.labelWidth + 'px') : ''}},[(form.itemType === 'input' || form.itemType === undefined)?_c('el-input',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"size":form.size ? form.size : _vm.size,"readonly":form.readonly,"disabled":form.disabled,"placeholder":form.placeholder},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}}):(form.itemType === 'select')?_c('el-select',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"size":form.size ? form.size : _vm.size,"disabled":form.disabled,"placeholder":form.placeholder},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}},[_vm._l((form.options),function(option,optionIndex){return _c('el-option',{key:optionIndex + '_local',attrs:{"value":(typeof option === 'object') ? option[form.valueKey || 'value'] : option,"label":(typeof option === 'object') ? option[form.labelKey || 'label'] : option}})}),_vm._l((_vm.selectOptions[_vm.selectOptionPrefix + index]),function(op,opIndex){return _c('el-option',{key:opIndex + '_remote',attrs:{"value":(typeof op === 'object') ? op[form.valueKey || 'value'] : op,"label":(typeof op === 'object') ? op[form.labelKey || 'label'] : op}})})],2):(form.itemType === 'date')?_c('el-date-picker',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"type":"date","placeholder":form.placeholder,"size":form.size ? form.size : _vm.size,"disabled":form.disabled,"readonly":form.readonly,"editable":form.editable,"picker-options":form.pickerOptions || {}},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}}):(form.itemType === 'daterange')?_c('el-date-picker',{style:(_vm.itemStyle + (form.itemWidth ? ("width: " + (form.itemWidth) + "px;") : '')),attrs:{"size":form.size ? form.size : _vm.size,"type":"daterange","disabled":form.disabled,"readonly":form.readonly,"editable":form.editable,"placeholder":form.placeholder,"picker-options":form.pickerOptions || {}},on:{"change":function (date) { return _vm.changeDate(date, form.prop[0], form.prop[1]); }},model:{value:(_vm.params[form.modelValue]),callback:function ($$v) {_vm.$set(_vm.params, form.modelValue, $$v)},expression:"params[form.modelValue]"}}):_vm._e()],1)}),_c('el-form-item',{attrs:{"label":""}},[_c('el-button',{attrs:{"type":"primary","size":_vm.size,"loading":_vm.submitLoading},on:{"click":_vm.searchHandler}},[_vm._v("\n      "+_vm._s(_vm.submitBtnText)+"\n    ")]),(_vm.showResetBtn)?_c('el-button',{attrs:{"type":"primary","plain":true,"size":_vm.size,"loading":_vm.submitLoading},on:{"click":_vm.resetForm}},[_vm._v("\n      "+_vm._s(_vm.resetBtnText)+"\n    ")]):_vm._e()],1)],2)}
 var staticRenderFns = []
 var esExports = { render: render, staticRenderFns: staticRenderFns }
 /* harmony default export */ __webpack_exports__["a"] = (esExports);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "el-search-table-pagination",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "A component which combines form、table with pagination components in Element UI. ",
   "main": "./lib/index.js",
   "files": [

diff --git a/packages/search-table-pagination/src/main.vue b/packages/search-table-pagination/src/main.vue
@@ -287,19 +287,19 @@
           }
 
           let totalValue = response
-          if (totalField && totalField.indexOf('.') !== -1) {
+          if (response[totalField] && totalField && totalField.indexOf('.') !== -1) {
             totalField.split('.').forEach(vv => {
               totalValue = totalValue[vv]
             })
           } else {
-            totalValue = response[totalField] || result.length
+            totalValue = (response && response[totalField]) || result.length
           }
 
           this.total = totalValue
 
           this.loading = false
         }).catch(error => {
-          console.error('Get remote data failed. ', error)
+          // console.error('Get remote data failed. ', error)
           this.loading = false
         })
       },

diff --git a/packages/search-table-pagination/src/props.js b/packages/search-table-pagination/src/props.js
@@ -90,62 +90,62 @@ let props = {
   },
   columns: {
     type: Array,
-    required: true,
-    // Element UI table-column attribute
-    columnKey: String,
-    label: {
-      type: String,
-      required: true
-    },
-    prop: {
-      type: String,
-      required: true
-    },
-    width: Number,
-    minWidth: Number,
-    fixed: [Boolean, String],
-    renderHeader: Function,
-    sortable: [Boolean, String],
-    sortMethod: Function,
-    resizable: {
-      type: Boolean,
-      default: true
-    },
-    formatter: Function,
-    showOverflowTooltip: Boolean,
-    align: {
-      type: String,
-      default: 'left'
-    },
-    headerAlign: String,
-    className: {
-      type: String,
-      default: ''
-    },
-    labelClassName: {
-      type: String,
-      default: ''
-    },
-    selectable: Function,
-    reserveSelection: Boolean,
-    filters: Array,
-    filterPlacement: String,
-    filterMultiple: {
-      type: Boolean,
-      default: true
-    },
-    filterMethod: Function,
-    filteredValue: Array,
-    // custom table-column attribute
-    filter: {
-      type: String
-    },
-    render: {
-      type: Function
-    },
-    slotName: {
-      type: String
-    }
+    required: true
+    // // Element UI table-column attribute
+    // columnKey: String,
+    // label: {
+    //   type: String,
+    //   required: true
+    // },
+    // prop: {
+    //   type: String,
+    //   required: true
+    // },
+    // width: Number,
+    // minWidth: Number,
+    // fixed: [Boolean, String],
+    // renderHeader: Function,
+    // sortable: [Boolean, String],
+    // sortMethod: Function,
+    // resizable: {
+    //   type: Boolean,
+    //   default: true
+    // },
+    // formatter: Function,
+    // showOverflowTooltip: Boolean,
+    // align: {
+    //   type: String,
+    //   default: 'left'
+    // },
+    // headerAlign: String,
+    // className: {
+    //   type: String,
+    //   default: ''
+    // },
+    // labelClassName: {
+    //   type: String,
+    //   default: ''
+    // },
+    // selectable: Function,
+    // reserveSelection: Boolean,
+    // filters: Array,
+    // filterPlacement: String,
+    // filterMultiple: {
+    //   type: Boolean,
+    //   default: true
+    // },
+    // filterMethod: Function,
+    // filteredValue: Array,
+    // // custom table-column attribute
+    // filter: {
+    //   type: String
+    // },
+    // render: {
+    //   type: Function
+    // },
+    // slotName: {
+    //   type: String
+    // }
   },
   showPagination: {
     type: Boolean,
@@ -171,8 +171,8 @@ let props = {
   }
 }
 
-Object.keys(formProps).forEach(v => {
-  props.formOptions[v] = formProps[v]
-})
+// Object.keys(formProps).forEach(v => {
+//   props.formOptions[v] = formProps[v]
+// })
 
 export default props
diff --git a/packages/search/src/main.vue b/packages/search/src/main.vue
@@ -19,10 +19,10 @@
         :disabled="form.disabled"
         :placeholder="form.placeholder"
         :style="itemStyle + (form.itemWidth ? `width: ${form.itemWidth}px;` : '')" >
-        <el-option v-for="(option, optionIndex) in form.options" :key="optionIndex"
+        <el-option v-for="(option, optionIndex) in form.options" :key="optionIndex + '_local'"
           :value="(typeof option === 'object') ? option[form.valueKey || 'value'] : option"
           :label="(typeof option === 'object') ? option[form.labelKey || 'label'] : option" />
-        <el-option v-for="(op, opIndex) in selectOptions[selectOptionPrefix + index]" :key="opIndex"
+        <el-option v-for="(op, opIndex) in selectOptions[selectOptionPrefix + index]" :key="opIndex + '_remote'"
           :value="(typeof op === 'object') ? op[form.valueKey || 'value'] : op"
           :label="(typeof op === 'object') ? op[form.labelKey || 'label'] : op" />
       </el-select>