kuailelunwen_new_houtai/src/components/GuipSelect.vue

<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">

    <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"
        :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;
    },
    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>