ElementUI之下拉框的使用（默认值和动态获取）

1. 下拉框默认值

<el-select v-model="searchParams.sex" placeholder="请选择性别" style="width: 140px" size="small">
    <el-option
            v-for="item in sexs"
            :key="item.value"
            :label="item.label"
            :value="item.value">
    </el-option>
</el-select>

data中放置默认数据

 //多条件查询是否性别下拉框
 sexs: [{
       value: '1',
       label: '男'
   }, {
       value: '0',
       label: '女'
   }],

本例中 searchParams.sex 值若为1 则该下拉框默认显示为男，若为0则默认显示为女，若为其他值则显示 placeholder中的显示文字

---

---

2. 动态获取下拉框的数据

本图中数据为从后端动态获取

<el-select v-model="searchParams.carType" :label="searchParams.carType"
          size="small" placeholder="请选择车辆类型" style="width: 140px" clearable>
    <el-option
            v-for="type in typeList"
            :key="type.carType"
            :label="type.carType"
            :value="type.carType">
    </el-option>
</el-select>

由于此处数据库存储使用的 key 和 label 值相同 所以都使用 carType

在data中定义一个空数组 typeList:[], 用来接收后端数据

在mounted中向后端请求获取carType数据（此处无查询条件 但统一规划后端请求时，需要传查询条件json数据，所以此处使用空json）

 //获取车辆类型下拉框数据
 let app = this;
 let queryData={};
 app.$Api.queryAllCarTypeList(queryData,function (result) {
     app.typeList = result.list;
 })