美文网首页
element UI select 下拉选项 获取当前选中的值

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

作者: Grit_1024 | 来源:发表于2021-04-27 09:22 被阅读0次

    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>
    
    

    相关文章

      网友评论

          本文标题:element UI select 下拉选项 获取当前选中的值

          本文链接:https://www.haomeiwen.com/subject/yshurltx.html