vue element-ui Select 选择器自定义模版_element select 自定义显示内容

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>*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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)
          })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(0-2)在change事件地方使用就行了

 onGuestRoom(value){
        let that =this;
         //that.guest_room_dict[value]；//这个就是把选择的数据当作对象的key 取得value 
        let count = that.guest_room_dict[value].count
     
      },
1
2
3
4
5
6