页面展示:

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