Merge pull request 'zq-slider-menu' (#47) from zq-slider-menu into master

Reviewed-on: #47

src/components/GuipSelect.vue

@@ -1,12 +1,12 @@
 <template>
   <el-form-item :style="{ ...style, height: height, ...styleObject }"
-    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
+    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
-    :prop="prop" :rules="rules">
+    :label="label" :prop="prop" :rules="rules">
-
     <p v-if="desc" class="desc_right">{{ desc }}</p>
-        <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue" v-bind="$attrs">
+    <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :disabled="item.disabled"
+      v-bind="$attrs">
-        :value="item.value">
+      <el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
+        :disabled="item.disabled" :value="getItemValue(item)">
       </el-option>
     </el-select>
   </el-form-item>
@@ -14,9 +14,36 @@
 
 <script>
 export default {
-  name: 'GuipTextarea',
+  name: 'GuipSelect',
-  props: ['value','options', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
+  props: {
-    'width', 'height', 'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc'],
+    value: [String, Number, Array],
+    options: {
+      type: Array,
+      default: () => []
+    },
+    // 新增配置字段
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    styleObject: Object,
+    disabled: Boolean,
+    defaultValue: [String, Number, Array],
+    placeholder: String,
+    width: String,
+    height: String,
+    label: String,
+    type: String,
+    prop: String,
+    rules: [Object, Array],
+    column: Boolean,
+    addClass: String,
+    desc: String
+  },
   data() {
     return {
       selectedValue: '',
@@ -24,43 +51,48 @@ export default {
       placeholder1: '请选择',
     }
   },
+  computed: {
+    // 处理options为空的情况
+    processedOptions() {
+      return this.options || []
+    }
+  },
   watch: {
     value(newVal) {
-      this.selectedValue = newVal;
+      this.selectedValue = newVal
     },
-    // defaultValue(newVal) {
+    defaultValue(newVal) {
-    //   this.selectedValue = newVal;
+      if (newVal !== undefined && newVal !== null) {
-    // }
+        this.selectedValue = newVal
+      }
+    }
   },
   mounted() {
     // 默认值赋值
-    if (this.defaultValue != null) {
+    if (this.defaultValue !== undefined && this.defaultValue !== null) {
-      this.selectedValue = this.defaultValue;
+      this.selectedValue = this.defaultValue
     }
-    if (this.value != null) {
+    if (this.value !== undefined && this.value !== null) {
-      this.selectedValue = this.value;
+      this.selectedValue = this.value
     }
     // 默认提示语
     if (this.placeholder) {
-      this.placeholder1 = this.placeholder;
+      this.placeholder1 = this.placeholder
     }
-    this.$nextTick(() => {
-      // let els = document.querySelectorAll('.el-select .el-input');
-      // els.forEach(item => {
-      //   item.onmouseover = function () {
-      //     item.classList.add("hoverclass")
-      //   }
-      //   item.onmouseout = function () {
-      //     item.classList.remove("hoverclass")
-      //   }
-      // })
-    })
   },
   methods: {
-    handleChange(value) {
+    // 获取value值
-      this.$emit('input', value);
+    getItemValue(item) {
-      this.$emit('change', value);
+      return item[this.valueKey]
     },
+    // 获取label值
+    getItemLabel(item) {
+      return item[this.labelKey]
+    },
+    handleChange(value) {
+      this.$emit('input', value)
+      this.$emit('change', value)
+    }
   }
 }
 </script>