feat: 优化Select组件

刘汉宸
1 parent 37b6b7d9
Showing 2 changed files with 82 additions and 88 deletions Show diff stats
examples/views/docs/component/select.md
packages/select/index.vue
@@ -246,10 +246,12 @@ export default {
       console.log(val);
       return new Promise(resolve => {
         setTimeout(() => {
-          resolve([
-            { name: '王五', code: 'ww' },
-            { name: '赵六', code: 'zl' },
-          ]);
+          resolve({
+            result: [
+              { name: '王五', code: 'ww' },
+              { name: '赵六', code: 'zl' },
+            ]
+          });
         }, 1000);
       });
     },
@@ -289,10 +291,12 @@ export default {
     queryAPI(val) {
       return new Promise(resolve => {
         setTimeout(() => {
-          resolve([
-            { name: '王五', code: 'ww' },
-            { name: '赵六', code: 'zl' },
-          ]);
+          resolve({
+            result: [
+              { name: '王五', code: 'ww' },
+              { name: '赵六', code: 'zl' },
+            ]
+          });
         }, 1000);
       });
     },
@@ -309,7 +313,7 @@ export default {
 <template>
   <div>
     <pre class="demo-model" v-if="model.length">{{ model }}</pre>
-    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple update></z-select>
+    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple update raw></z-select>
   </div>
 </template>
@@ -317,7 +321,11 @@ export default {
 export default {
   data() {
     return {
-      model: ['wq', 'cs'],
+      // model: ['wq', 'cs'],
+      model: [
+        { name: '王七', code: 'wq' },
+        { name: '陈拾', code: 'cs' },
+      ],
       options: [
         { name: '王七', code: 'wq' },
         { name: '陈拾', code: 'cs' },
@@ -328,10 +336,12 @@ export default {
     queryAPI(val) {
       return new Promise(resolve => {
         setTimeout(() => {
-          resolve([
-            { name: '王五', code: 'ww' },
-            { name: '赵六', code: 'zl' },
-          ]);
+          resolve({
+            result: [
+              { name: '王五', code: 'ww' },
+              { name: '赵六', code: 'zl' },
+            ]
+          });
         }, 1000);
       });
     },
@@ -369,12 +379,13 @@ export default {
   methods: {
     queryAPI(val) {
       return new Promise(resolve => {
-        this.label = '';
         setTimeout(() => {
-          resolve([
-            { name: '王五', code: 'ww' },
-            { name: '赵六', code: 'zl' },
-          ]);
+          resolve({
+            result: [
+              { name: '王五', code: 'ww' },
+              { name: '赵六', code: 'zl' },
+            ]
+          });
         }, 1000);
       });
     },
@@ -410,10 +421,12 @@ export default {
     queryAPI(val) {
       return new Promise(resolve => {
         setTimeout(() => {
-          resolve([
-            { name: '王五', code: 'ww' },
-            { name: '赵六', code: 'zl' },
-          ]);
+          resolve({
+            result: [
+              { name: '王五', code: 'ww' },
+              { name: '赵六', code: 'zl' },
+            ]
+          });
         }, 1000);
       });
     },
@@ -449,10 +462,12 @@ selectProps | Element Select组件参数 | Object | - | -
 raw | 是否绑定原始对象 | Boolean | - | false
 url | 远程搜索URL | String | - | -
 http | HTTP请求库 | Function | - | -
+params | 请求参数 | Object | - | {}
 queryApi | 自定义接口 | Function | - | -
 triggerSize | 触发远程搜索的字段长度 | Number | - | 0
-auto | 初始化时自动查询数据 | Boolean | - | false
+auto | 初始化时自动查询数据 | Boolean | - | true
 update | 点开下拉框时更新数据 | Boolean | - | false
+update-once | 点开下拉框时更新一次数据 | Boolean | - | false
 ## Events 事件
@@ -81,6 +81,16 @@ export default {
     url: String,
     // HTTP请求库
     http: Function,
+    // 请求参数
+    params: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 请求配置
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
     // 自定义接口
     queryApi: Function,
     // 触发远程搜索的字段长度
@@ -88,8 +98,12 @@ export default {
       type: Number,
       default: 0,
     },
-    auto: Boolean,
+    auto: {
+      type: Boolean,
+      default: true,
+    },
     update: Boolean,
+    updateOnce: Boolean,
   },
   data() {
     return {
@@ -98,6 +112,7 @@ export default {
       optionsCurrent: this.fixOptions(this.options),
       loading: false,
       initing: false,
+      loaded: false,
     };
   },
   created() {
@@ -144,8 +159,14 @@ export default {
       return {
         ..._events,
         'visible-change': show => {
-          if (this.remote && this.update && show) {
-            this.remoteMethod();
+          if (this.remote && show) {
+            if (this.updateOnce) {
+              if (!this.loaded) {
+                this.remoteMethod();
+              }
+            } else if (this.update) {
+              this.remoteMethod();
+            }
           }
           _events['visible-change'] && _events['visible-change'](show);
         },
@@ -155,64 +176,24 @@ export default {
   methods: {
     // 修复当前数据源包含当前选中项
     fixOptions(list) {
-      if (!this.value || (this.value instanceof Array && this.value.length === 0) || (this.value instanceof Object && Object.keys(this.value).length === 0)) {
-        return list;
-      }
+      let fixOptions = [];
       if (this.raw) {
-        // 绑定为对象值时修复默认项
-        let fixOptions = [];
-        let defaultOptions = [];
         if (this.multiple) {
-          fixOptions = [...this.value];
-          this.options.forEach(item => {
-            if (this.value.find(i => i[this.valueKey] === item[this.valueKey])) {
-              defaultOptions.push(item);
-            }
-          });
+          fixOptions = this.value && this.value.length > 0 ? [...this.value] : [];
         } else {
-          fixOptions = [this.value];
-          this.options.forEach(item => {
-            if (item[this.valueKey] === this.value[this.valueKey]) {
-              defaultOptions.push(item);
-            }
-          });
+          fixOptions = this.value && Object.keys(this.value).length > 0 ? [this.value] : [];
         }
-        let hash = {};
-        const options = [...fixOptions, ...defaultOptions, ...list].reduce((result, item) => {
-          if (!hash[item[this.valueKey]]) {
-            // 如果当前元素的key值没有在hash对象里，则可放入最终结果数组
-            hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象
-            result.push(item); // 把当前元素放入结果数组
-          }
-          return result; // 返回结果数组
-        }, []);
-        return options;
-      } else {
-        // 绑定为非对象值时修复默认项
-        let defaultOptions = [];
-        if (this.multiple) {
-          this.options.forEach(item => {
-            if (this.value.find(i => i === item[this.valueKey])) {
-              defaultOptions.push(item);
-            }
-          });
-        } else {
-          const targetOption = this.options.find(item => item[this.valueKey] === this.value);
-          if (targetOption) {
-            defaultOptions = [targetOption];
-          }
-        }
-        let hash = {};
-        const options = [...defaultOptions, ...list].reduce((result, item) => {
-          if (!hash[item[this.valueKey]]) {
-            // 如果当前元素的key值没有在hash对象里，则可放入最终结果数组
-            hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象
-            result.push(item); // 把当前元素放入结果数组
-          }
-          return result; // 返回结果数组
-        }, []);
-        return options;
       }
+      let hash = {};
+      const options = [...fixOptions, ...this.options, ...list].reduce((result, item) => {
+        if (!hash[item[this.valueKey]]) {
+          // 如果当前元素的key值没有在hash对象里，则可放入最终结果数组
+          hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象
+          item[this.valueKey] && item[this.labelKey] && result.push(item); // 把当前元素放入结果数组
+        }
+        return result; // 返回结果数组
+      }, []);
+      return options;
     },
     // 远程加载
     remoteMethod(val = '') {
@@ -226,23 +207,21 @@ export default {
           requestPrimise = this.request({
             url: this.url,
             method: 'get',
-            params: searchText ? { [this.searchKey]: searchText } : {},
+            params: searchText ? { [this.searchKey]: searchText, ...this.params } : this.params,
+            ...this.config,
           });
         }
         requestPrimise
-          .then(list => {
-            const options = this.fixOptions(list);
+          .then(res => {
+            const response = res || {};
+            const options = this.fixOptions(response.result);
             this.optionsDataSource = options;
             this.optionsCurrent = options;
-            // 获取到选项数据源时刷新绑定显示值
-            this.model = undefined;
-            this.$nextTick(() => {
-              this.model = this.value;
-            });
           })
           .finally(() => {
             this.loading = false;
             this.initing = false;
+            this.loaded = true;
           });
       } else {
         this.optionsCurrent = this.optionsDataSource.filter(item => {