获取Element的select的value和label值的两种方法

 第一种方法:

 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>

 原图附上:

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值