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  這次就到這裏啦