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="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
        })
      })
    }
  })
}