VUE ， 表單中如何用獲取接口數據的select

如何增加一個查詢數據庫的select

data中加一個變量

buildingTypeList: []

初始化的時候獲取內容

created() {
    // 獲取樓棟類型
    this.getBuildingTypeList();
}

// 添加方法
getBuildingTypeList() {
      getBuildingTypeList().then(({data}) => {
        this.buildingTypeList = data;
      })
}

// 引入方法
import { getBuildingTypeList } from '@/api/village-api'

頁面中加上內容

<el-form-item label="樓棟類型"  prop="building_type_id">
  <el-select v-model="floorData.building_type_id" :disabled="buildingTypeList.length==0" placeholder="請選擇樓型" clearable style="width:100%">
    <el-option v-for="item in buildingTypeList" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</el-form-item>

表單中加上元素

rules: {
	building_type_id: [{required: true, message: '請選擇樓棟類型', trigger: ['blur', 'change']}],
	...
},
floorData: {
	building_type_id: undefined,
	...
}

表單提交

<el-button type="primary" @click="createData()">確認</el-button>

createData() {
  // 獲取表單，驗證表單，提交表單，獲取更新后的數據，關閉dialog，並提示成功
  this.$refs['dataForm'].validate((valid) => {
    if (valid) {
      addFloor(this.floorData).then((res) => {
        this.getFloorList();
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      })
    }
  })
}