第一种方法:
this.$refs["flowere"].selected.currentLabel
注意!!!!:一定要是在nextTick数据更新后才会有值
this.$nextTick(() => {
this.form.flowerName = this.$refs["flowere"].selected.currentLabel;
});
第二种方法:
遍历绑定的数组,通过id筛选出匹配数据 (不太建议使用),看如下代码
<template>
<div class="conter">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="鲜花的名称">
<el-select
ref="flowere"
v-model="form.flowerguid"
filterable
clearable
placeholder="请选择"
@change="getSelects"
>
<el-option
v-for="item in options"
:key="item.guid"
:label="item.label"
:value="item.guid"
>
</el-option>
</el-select>
</el-form-item>
<div class="selcct">鲜花id:{{ this.form.flowerguid }}</div>
<div class="selcct">鲜花名字:{{ this.form.flowerName }}</div>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
flowerguid: "",
flowerName: "",
},
options: [
{
value: "1",
guid: "1111",
label: "郁金香🌷"
},
{
value: "2",
guid: "2222",
label: "向日葵🌻"
},
{
value: "3",
guid: "3333",
label: "满天星💐"
},
{
value: "4",
guid: "4444",
label: "粉玫瑰🌸"
},
{
value: "5",
guid: "5555",
label: "雏菊🌼"
},
],
};
},
methods: {
getSelects(val) {
// 方法1:(推荐,如果后期有回显,比较方便)
// 这里val是选中当前的guid
this.form.flowerguid = val;
// 注意!!!!:一定要是在nextTick数据更新后才会有值
this.$nextTick(() => {
this.form.flowerName = this.$refs["flowere"].selected.currentLabel;
});
// 方法2:(不太推荐)
// this.form.flowerguid = val;
// let name;
// //这里的options就是上面遍历的数据源
// this.options.find((item) => {
// //筛选出匹配数据
// if (item.guid === val) {
// name = item.label;
// }
// return this.form.flowerName = name
// })
},
}
};
</script>
原图附上: