el-select的简单封装，使其返回值中包含key,value,obj 三种值

常规的el-select中change事件返回值，只有key返回，业务上有些需求有需要获取到value值，所以简单的封装了一下，使返回中包含key,value,obj三个值，基本上可以满足大部分的需求

封装代码

<template>
  <div>
    <el-select
      v-model="v"
      clearable
      :placeholder="'请选择'+placeholder"
      @change="change"
      :multiple="multiple"
    >
      <el-option
        v-for="item in options"
        :key="item[value]"
        :label="item[label]"
        :value="item[value]"
        :disabled="item[disabled]"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  computed: {
    v: {
      get() {
        return this.val;
      },
      set(e) {
        this.$emit("update:val", e);
      }
    }
  },
  props: {
    val: {
      type: [String, Array],
      default() {
        return null;
      }
    },
    options: {
      type: [Object, Array],
      default() {
        return null;
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: "label"
    },
    value: {
      type: String,
      default: "value"
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: String,
      default: "disabled"
    }
  },
  methods: {
    change(e) {
      let options = this.options;
      //e.length 只有当数组中存在值才进入，不加e.length的话清空时也会进入
      if (Array.isArray(e) && e.length > 0) {
        //多选时
        const item = [];
        const label = [];
        for (const i of e) {
          for (const j of options) {
            if (j[this.value] == i) {
              label.push(j[this.label]);
              item.push(j);
            }
          }
        }
        this.$emit("change", e, label, item);
      } else {
        //非多选时
        options.find(v => {
          if (v[this.value] == e) {
            this.$emit("change", e, v[this.label], v);
            return;
          }
        });
      }
    }
  }
};
</script>

<style>
</style>

调用代码

<template>
  <div>
    <c-select :options="options" :val.sync="val" @change="test"></c-select>
  </div>
</template>

<script>
export default {
  methods: {
    test(a, b, c) {
      console.log("test -> c", c);
      console.log("test -> b", b);
      console.log("test -> a", a);
    },
  },
  data() {
    return {
      val: "1",//可以给默认值
      options: [
        {
          label: "测试1",
          value: "1"
        },
        {
          label: "测试2",
          value: "2"
        }
      ]
    };
  }
};
</script>

v-model版

<template>
  <div>
    <el-select
      :value="value"
      clearable
      :placeholder="'请选择'+placeholder"
      @change="change"
      :multiple="multiple"
    >
      <el-option
        v-for="item in options"
        :key="item[optionValue]"
        :label="item[optionLabel]"
        :value="item[optionValue]"
        :disabled="item[disabled]"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  model: {
    event: "change"
  },
  props: {
    value: {
      type: [String, Array],
      default() {
        return null;
      }
    },
    options: {
      type: [Object, Array],
      default() {
        return null;
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    optionLabel: {
      type: String,
      default: "label"
    },
    optionValue: {
      type: String,
      default: "value"
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: String,
      default: "disabled"
    }
  },
  methods: {
    change(e) {
      let options = this.options;
      //清空
      if (e.length === 0) {
        //清空时会再次调用change方法，调用方法处需做非空判断，以免未知情况发生
        this.$emit("change", "", "", "");
        this.$emit("clear");
        return;
      }
      if (Array.isArray(e)) {
        //多选时
        const item = [];
        const label = [];
        for (const i of e) {
          for (const j of options) {
            if (j[this.optionValue] == i) {
              label.push(j[this.optionLabel]);
              item.push(j);
            }
          }
        }
        this.$emit("change", e, label, item);
      } else {
        //非多选时
        options.find(v => {
          if (v[this.optionValue] == e) {
            this.$emit("change", e, v[this.optionLabel], v);
            return;
          }
        });
      }
    }
  }
};
</script>

<style>
</style>

调用

 <c-select v-model="val" :options="options" @change="test"></c-select>