vue之elementUi的el-select同时获取value和label的三种方式

让我们来详细讲解一下“Vue之Element UI的el-select同时获取value和label的三种方式”的完整攻略。

介绍

在 Vue 中使用 Element UI 的 el-select 组件时，有时候我们需要同时获取到选中的 value 和 label 值，这时候就需要用到一些技巧来实现这个需求。在本文中，我将为大家介绍三种方式来同时获取 el-select 的 value 和 label 值。

方式一：利用 el-select 的 option 的 label、value 属性

代码示例：

<el-select v-model="selectedOption">
  <el-option label="label1" value="value1"></el-option>
  <el-option label="label2" value="value2"></el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedOption: { label: '', value: '' }
    }
  },
  watch: {
    selectedOption: function(newVal) {
      console.log(newVal.label, newVal.value);
    }
  }
}
</script>

在这个示例中，我们使用了 el-select 的 v-model 属性来绑定选中的值到组件的 selectedOption 变量上。同时我们使用 watch 监听 selectedOption 变量的变化，实现了选中值的打印输出。当然，我们需要在 option 标签中加上 label 和 value 的属性。

方式二：利用 el-select 的 @change 事件和 ref 属性

代码示例：

<el-select ref="select" @change="handleSelectChange">
  <el-option label="label1" value="value1"></el-option>
  <el-option label="label2" value="value2"></el-option>
</el-select>

<script>
export default {
  methods: {
    handleSelectChange() {
      const selectedOption = this.$refs.select && this.$refs.select.selectedOptions[0];
      if (selectedOption) {
        console.log(selectedOption.label, selectedOption.value);
      }
    }
  }
}
</script>

在这个示例中，我们利用了 el-select 的 @change 事件来监听选中值的变化。同时，我们给 el-select 标签加上 ref 属性，使得我们可以通过 this.$refs.select 来获取到 el-select 组件，然后通过 selectedOptions[0] 获取到选中的 option 组件，并从中获取到 label 和 value 值。

方式三：利用 el-select 的 filterable 和 filter-method 属性

代码示例：

<el-select v-model="selectedOption" :filterable="true" :filter-method="filterMethod">
  <el-option label="label1" value="value1"></el-option>
  <el-option label="label2" value="value2"></el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedOption: { label: '', value: '' }
    }
  },
  methods: {
    filterMethod(query, option) {
      return option.label.includes(query) || option.value.includes(query);
    }
  },
  watch: {
    selectedOption: function(newVal) {
      console.log(newVal.label, newVal.value);
    }
  }
}
</script>

在这个示例中，我们利用了 el-select 的 filterable 和 filter-method 属性来监听选中值的变化。filterable 属性开启了搜索框，filter-method 定义了搜索规则。我们同样使用了 el-select 的 v-model 属性来绑定选中的值到组件的 selectedOption 变量上，并监听了 selectedOption 变量的变化，实现了选中值的打印输出。