获取el-select的label

获取el-select的label

使用@click.navite

el-option 中添加 @clik.native 在方法的传参中传入自己需要的内容

这个方法同样适用于 element-plus


<script>
  export default {
    name: 'ElSelectTest',
    data() {
      return {
        selectValue: '',
        options: [
          { label: '苹果', value: 1 },
          { label: '香蕉', value: 2 },
          { label: '菠萝', value: 3 }
        ]
      }
    },
    methods: {
      optionClick(label) {
        console.log(label);
      }
    }
  }
</script>

使用ref获取

el-select 中添加 ref

使用 Vue.nextTick() 获取dom刷新后的label

这种方式不适用于 element-plus


<script>
  import Vue from 'vue';
  export default {
    name: 'ElSelectTest',
    data() {
      return {
        selectValue: '',
        options: [
          { label: '苹果', value: 1 },
          { label: '香蕉', value: 2 },
          { label: '菠萝', value: 3 }
        ]
      }
    },
    methods: {
      selectChange() {
        Vue.nextTick(() => {
          console.log(this.$refs.fruitSelect.selectedLabel);
        });
      }
    }
  }
</script>

你可能感兴趣的:(vue,前端,vue.js,javascript,前端,elementui)