vue+element-ui获取select的label

页面展示：

 

<template>

    <el-select v-model="select_PackingPrice" clearable placeholder="请选择价格" 
      @change="changePriceValue">

        <el-option

          v-for="item in options"

          :key="item.value"

          :label="item.label"

          :value="item.value">

      </el-option>

 </el-select>

</template>

<script>

export default {

    name: 'pack',

    data() {

    return {

    select_PackingPrice：“”，

   price:"",

   startPrice:"",

   endPrice:"",

   options: [{

   value: '选项1',

   label: '0-200'

}, {

   value: '选项2',

   label: '201-400'

}, {

   value: '选项3',

   label: '401-600'

}, {

   value: '选项4',

   label: '601-1000'

}],
  }
}



methods:{

//选择下拉价格区间

  changePriceValue(val){

    let obj = {};

    obj = this.options.find((item)=>{

         return item.value === val;//比如：选项2

     });

//判断是否有选择，如果用户没有选择，但是删除了上一个选择内容，避免控制台报错，需要做一个判断

   if(obj!=""&&obj!=undefined){

      this.select_PackingPrice= obj.label;//获取label的值 0-2000

      console.log(this.select_PackingPrice)

      this.price=this.select_PackingPrice.split("-");//拆分label  ["4001", "6000", __ob__: Observer]

      this.startPrice=this.price[0];//获取价格开始值0
  
      this.endPrice=this.price[1]//获取价格结束的值2000

      }

     },

   }

},

</script>