xianniu-ui 0.3.22 → 0.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {

package/packages/search/main.vue

@@ -2,7 +2,7 @@
   <div class="xn-search">
     <el-form ref="form" inline :model="form" :label-width="labelWidth">
       <el-row :gutter="0" class="xn-search--row">
-        <template v-for="(item, idx) in formData">
+        <template v-for="(item, idx) in form.value">
           <el-col v-bind="{ ...col }" :key="idx" v-show="item.isShow || isColl">
             <el-form-item
               v-if="item.type === 'city'"
@@ -12,8 +12,9 @@
               class="xn-search--row_col"
             >
               <xn-city
+                :key="item.prop"
                 :data-level="(item.options && item.options.dataLevel) || 2"
-                v-model="form.value[idx].modelVal"
+                v-model="item.modelVal"
                 @on-city="handleChangeCity"
               />
             </el-form-item>
@@ -25,9 +26,10 @@
               class="xn-search--row_col"
             >
               <el-input
+                :key="item.prop"
                 style="width: 100%"
                 v-bind="item.options ? { ...item.options } : {}"
-                v-model="form.value[idx].modelVal"
+                v-model="item.modelVal"
                 :clearable="item.clearable || true"
                 :placeholder="item.placeholder || '请填写' + item.label"
               />
@@ -40,8 +42,9 @@
               class="xn-search--row_col"
             >
               <el-select
+                :key="item.prop"
                 style="width: 100%"
-                v-model="form.value[idx].modelVal"
+                v-model="item.modelVal"
                 :placeholder="item.placeholder || '请选择' + item.label"
                 :clearable="item.clearable || true"
                 filterable
@@ -71,7 +74,8 @@
               class="xn-search--row_col"
             >
               <xn-date
-                v-model="form.value[idx].modelVal"
+                :key="item.prop"
+                v-model="item.modelVal"
                 :mode="item.mode || 'range'"
                 :type="item.type || 'daterange'"
                 :is-shortcut="showShortcut(item)"
@@ -154,9 +158,6 @@ export default {
         return val && typeof val === "function";
       };
     },
-    _formData() {
-      return this.formData;
-    },
     toggle() {
       return this.isColl ? "el-icon-arrow-up" : "el-icon-arrow-down";
     },
@@ -203,20 +204,34 @@ export default {
     };
   },
   created() {
-    for (let i = 0, formData = this.formData; i < formData.length; i++) {
-      const item = formData[i];
-      item.isShow = i > 3 && this.showColl ? false : true;
-      this.form.value.push({
-        key: item.prop,
-        modelVal: "",
-      });
-    }
+    // this.init();
+  },
+  watch: {
+    formData: {
+      handler(n) {
+        n && n.length && this.init();
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   methods: {
+    init() {
+      this.form.value = [];
+      for (let i = 0, formData = this.formData; i < formData.length; i++) {
+        const item = formData[i];
+        item.isShow = i > 3 && this.showColl ? false : true;
+        this.form.value.push({
+          ...item,
+          key: item.prop,
+          modelVal: "",
+        });
+      }
+    },
     onSearch() {
       const formValue = {};
-      if (this.formData) {
-        for (let i = 0, formData = this.formData; i < formData.length; i++) {
+      if (this.form.value) {
+        for (let i = 0, formData = this.form.value; i < formData.length; i++) {
           const item = formData[i];
           const index = i;
           const key = item.prop;
@@ -239,13 +254,9 @@ export default {
       this.$emit("on-search", formValue);
     },
     onReset() {
-      this.form.value = [];
-      for (let i = 0, formData = this.formData; i < formData.length; i++) {
+      for (let i = 0, formData = this.form.value; i < formData.length; i++) {
         const item = formData[i];
-        this.form.value.push({
-          key: item.prop,
-          modelVal: "",
-        });
+        item.modelVal = "";
       }
       this.$emit("on-reset");
       this.$emit("on-search", {});
@@ -261,7 +272,7 @@ export default {
     },
     setData(key, data) {
       const row =
-        this.formData && this.formData.find((item) => item.label === key);
+        this.form.value && this.form.value.find((item) => item.label === key);
       this.$set(row, "data", data);
     },
   },