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

Posted 2020-11-28 chendada

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

封装代码

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

<script>
export default {
  computed: {
    v: {
      get() {
        return this.val;
      },
      set(e) {
        this.$emit("update:val", e);
      }
    }
  },
  props: {
    val: {
      default: ""
    },
    options: {
      type: [Object, Array],
      default() {
        return null;
      }
    },
    label: {
      default: "label"
    },
    value: {
      default: "value"
    },
    placeholder: {
      default: ""
    }
  },
  methods: {
    change(e) {
      let options = this.options;
      options.find(v => {
        if (v[this.value] == e) {
          this.$emit("change", e, [this.label], v);
          return;
        }
      });
    }
  }
};
</script>

<style>
</style>

调用代码

<template>
  <div>
      <!-- 代码封装命名为CSelect.vue --> 
    <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>