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>