vue+elementui 封装固定格式的select框,可以使用v-model动态绑定

245 阅读1分钟
<template>
  <el-select
    :value="val"
    :disabled="!!disabled"
    placeholder="请选择"
    class="input-with-select"
    @change="changeValue"
  >
    <el-option
      v-for="(item, index) in tfFlag"
      :key="'flag' + index"
      :label="item.dictName"
      :value="item.dictId"
    ></el-option>
  </el-select>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    disabled: [Boolean, String],
  },
  computed: {
   // 对于Vue封装的v-model组件,当input标签中的disabled属性启用后
   //可能会导致该组件的Watch监听不到外部传入的值的变化。具体原理是因为当disabled属性开启时,
   //输入控件将被禁用,导致这个禁用输入控件不支持双向数据绑定(v-model)了
    val() {
      return this.value;
    },
  },
  
  data() {
    return {
      tfFlag: [
      {dictId:'0',dictName:'是'},
      {dictId:'1',dictName:'否'}
      ],
    };
  },
  mounted() {},
  methods: {
    changeValue(val) {
      this.$emit("change", val);
    }
  },
};
</script>