element UI select 下拉选项 获取当前选中的值

2021-04-27  本文已影响0人  Grit_1024

element UI select 下拉选项 获取当前选中的值

<template>
    <div>
       <el-select
              v-model="selectLetterValue"
              placeholder="请选择"
              style="width: 110px"
              @change="selectLetterClick"
            >
              <el-option
                v-for="(item, index) in selectLetter"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
    </div>
</template>

<script>
    export default {
        data () {
            return {
     selectLetter: [
        {
          value: "选项1",
          label: "小写字母",
        },
        {
          value: "选项2",
          label: "大写字母",
        },
      ],                
      // 当前用户选中的值
      selectLettercurrent: " ",
            }
        },

      methods: {
      selectLetterClick(e) {
      //let that = this ,将this保存在that中,再在函数中使用that均可 
      let that = this;
      console.log(that);
      let hh = that.selectLetter.filter(function (c, i, a) {
        if (c.value == that.selectLetterValue) {
          return c;
        }
      });
      this.selectLettercurrent = hh[0].value; //当前选中的select框的值
    },
        }
    }
</script>

<style lang='scss' scoped>
</style>

上一篇下一篇

猜你喜欢

热点阅读