vue 实现动态配置from表单

慧香一格

已于 2024-04-22 10:28:33 修改

阅读量412

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-03-30 16:14:49 首次发布

本文链接：https://blog.youkuaiyun.com/xiaozukun/article/details/137175933

本文介绍了如何使用Vue.js动态创建一行包含两个输入框的表单，通过mounted生命周期钩子获取数据并在组件中管理字段列表，利用API获取FieldsList并处理可能出现的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div v-for="(field, index) in fields" :key="index" width="100%">
        <z-row  v-if="index%2==0">
          <z-col span="10" :xs="24" :sm="6" :lg="10">
              <z-form-item :label="field.label" :prop="field.name">
                  <z-input v-model="model[field.name]"  clearable :disabled="isdisabled"></z-input>
              </z-form-item>
          </z-col>
          <z-col span="10" :xs="24" :sm="6" :lg="10" v-if="index+1<fields.length">
              <z-form-item :label="fields[index+1].label" :prop="fields[index+1].name">
                  <z-input v-model="model[fields[index+1].name]"  clearable :disabled="isdisabled"></z-input>
              </z-form-item>
          </z-col>
        </z-row>
      </div>

以上为动态实现一行2个输入框，要求在 mounted下先获取数据后设置表单

 mounted () {

    this.getFields(0)

  },

methods:{

getFields (type) {

      if (type === 0) {

        var that = {}

        Api.getFieldsAPI(that).then((response) => {

          console.log('response', response)

          this.fields = response.data.FieldsList

          console.log('fields', this.fields)

        }).catch((error) => {

          console.log(error)

          this.fields = []

        })

      }

    },

}