表单中select处理后端数据

在已有的表单中添加一个select菜单。dtype作为新增的一列

    const fromUserAdd = reactive({
      id: "", // 添加用户的用户名
      name: "",
      domain_status_check: "",
      domain_tls_check: "",
      prompt_time_day: "",
      update_time: "",
      dtype:"",
    })

但是dtype的数据是从另外一个结构获取，已知的后端接口数据格式如下

{
    "code": 200,
    "msg": "success",
    "data": [
        {
            "id": 0,
            "name": "test1"
        },
        {
            "id": 0,
            "name": "test2"
        }
    ]
}

要从接口数据获取值，我们重新声明2个变量进行赋值

    const selectvalue =""
    const Options =  ref([])

而后在函数中赋值

这里省略一些调用的判断和接口

    const handleAddAlert = async () => {
      let res = await proxy.$api.dingtalkgetname()
      Options.value = res
    }

而后需要return

    return {
      handleAddAlert,
      selectvalue,
      Options,
      ...

回到form表单

v-model="fromUserAdd.dtype"绑定新增的字段@focus="handleAddAlert"指定创建的函数el-option中v-for循环Options取值即可

    <el-form>
      <el-row>
        <el-col>
          <el-form-item label="选择一个告警媒介">
          <el-select placeholder="请选择" v-model="fromUserAdd.dtype"  @focus="handleAddAlert">
            <el-option
              v-for="item in Options"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>

如下