vue+element-ui获取select的label

364 阅读1分钟
页面展示:


<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>