頁面展示：
<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>複製程式碼