Vue+Element ui中表单常用下拉列表

情景：表单中会出现使用下拉列表，下拉列表是通过查询字典表中，下面就记录一下。

1.form表单

<!-- 只贴出item部分 -->
<el-form-item label="出产国别" prop="countryType">
  <el-select v-model="form.countryType" placeholder="请选择出产国别">
      <el-option  v-for="item in countryList" :key="item.value" :label="item.label"
           :value="item.value"></el-option>
  </el-select>
</el-form-item>

2.data() {return {}}的return定义countryList类型

return {  
   countryList: [] //定义数组
}

3.在data(){methods:{}}中写请求，返回所需要的countryList列表

methods:{
//这个方法我这边是，一加载页面就会调用此方法
  doGetDicts() {
      if (this.dialog) {
        getDicts()
          .then(res => {
            this.countryList= res.data.countryList;//把请求返回的列表，赋值给之前定义的
          })
          .catch(err => {
            this.loading = false;
            console.log(err.response.data.message);
          });
      }
    }
}

4.效果图:

下拉列表的实现，最核心的就这三步啦。

ok  这次就到这里啦