vue element-ui Select 选择器自定义模版
1:应用场景(0-1)当后端给我们下拉选择时,需要我们展示更多的内容以便使用者更清晰的选择哪一个<template slot-scope="scope"><el-select v-model="scope.row.room_number" placeholder="全部房间" size="mini"@change="onGuestRoom" @focus="getGuestRoo
·
1:应用场景
(0-1)当后端给我们下拉选择时,需要我们展示更多的内容以便使用者更清晰的选择哪一个
<template slot-scope="scope">
<el-select v-model="scope.row.room_number" placeholder="全部房间" size="mini" @change="onGuestRoom" @focus="getGuestRoom" >
<el-option
v-for="item in guest_room_list"
:key="item.room_number"
:label="item.room_number"
:value="item.room_number">
<span style="float: left">{{ item.room_number }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">可排人数{{ item.count }}</span>
</el-option>
</el-select>
</template>
/*这里可以实现下拉选择展示内容
<span style="float: left">{{ item.room_number }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">可排人数{{ item.count }}</span>*/
2:拓展场景
(0-1)在后端给我们的数据里有一项可排人数我们需要用到用以判断,但是我们使用change 事件时我们只能拿到 :value=“item.room_number” 这个值,那这个时候我们怎么办呢?
//我们要获取guest_room_list
//其次我们在data里声明一个对象guest_room_dic
that.$axios({
url:that.url+"/v1/bill/get_reserve_base_house_list/"+that.id,
method:"post"
})
.then(res=>{
if(res.data.message==="success"){
that.guest_room_list=res.data.data;
//这里使用guest_room_dic对象的key = 我们change事件取到的值,方便使用key 取value
for(let i of that.guest_room_list){
this.guest_room_dict[i['room_number']] = i
}
}else {
that.hintInfo("warning","获取列表失败"+res.data.message)
}
})
.catch(err=>{
that.hintInfo("warning","获取列表失败"+err)
})
(0-2)在change事件地方使用就行了
onGuestRoom(value){
let that =this;
//that.guest_room_dict[value];//这个就是把选择的数据当作对象的key 取得value
let count = that.guest_room_dict[value].count
},
更多推荐
已为社区贡献10条内容
所有评论(0)