src/components/GuipSelect.vue

@@ -1,70 +1,67 @@
 <template>
-   <el-form-item 
-   :style="{...style,height:height,...styleObject}"
-    :class="[{'column':column},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']"
-    :label="label" :prop="prop" :rules="rules">
+  <el-form-item :style="{ ...style, height: height, ...styleObject }"
+    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :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">
-      <el-option
-        v-for="item in options"
-        :key="item.value"
-        :label="item.label"
-        :disabled="item.disabled"
+    <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"
         :value="item.value">
       </el-option>
     </el-select>
   </el-form-item>
- </template>
-  
- <script>
-  export default {
-    name: 'GuipTextarea',
-    props:['options','styleObject','disabled','defaultValue','placeholder',
-    'width','height','label','type','prop','rules','column','addClass','desc'],
-    data() {
-      return {
-            selectedValue:'',
-            style:{},
-            placeholder1:'请选择'
-      }
-    },
-    watch: {
-      value(newVal) {
-        this.selectedValue = newVal;
-      }
+</template>
+
+<script>
+export default {
+  name: 'GuipTextarea',
+  props: ['options', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
+    'width', 'height', 'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc'],
+  data() {
+    return {
+      selectedValue: '',
+      style: {},
+      placeholder1: '请选择'
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.selectedValue = newVal;
     },
-    mounted(){
-      // 默认值赋值
-      if(this.defaultValue != null){
-        this.selectedValue = this.defaultValue;
-      }
-      // 默认提示语
-      if(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:{
+    defaultValue(newVal) {
+      this.selectedValue = newVal;
+    }
+  },
+  mounted() {
+    // 默认值赋值
+    if (this.defaultValue != null) {
+      this.selectedValue = this.defaultValue;
+    }
+    if (this.value != null) {
+      this.selectedValue = this.value;
+    }
+    // 默认提示语
+    if (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) {
       this.$emit('input', value);
       this.$emit('change', value);
     },
-   }
   }
- </script>
+}
+</script>