动态表单实现

//声明提交表单的form对象
const form = reactive({
  id                    : '',
  Items: [],//动态表单的数组
})


//添加表单项事件
function handleAddItem () {
  form.Items.push({
    id             : uuid(),//自己写个随机数的方法 让id每个不重复
    itemName       : '',
    itemType       : 'HbRadio',//所需要绑定的组件
    itemPlaceholder: '请输入'
  })
}

//移除表单事件
function handleRemoveItem (index) {
  if (form.Items.length > 1) {
    form.Items.splice(index, 1)
  } else {
    message.error('至少需要一个选项！')
  }
}


//表单
 <n-form-item
                  v-for="(item, index) in form.Items"
                  :key="item.id"
                  :label="`备选项${index + 1}`"
                  :path="`appSurveyQuestionItems[${index}].itemName`"
                  :rule="{
                    required: true,
                    message: `请输入选项${index + 1}的显示内容`,
                    trigger: ['input', 'blur']
                  }"
                >
                  <n-input
                    v-model:value="item.itemName"
                    clearable
                  />
                  <n-button
                    style="margin-left: 12px"
                    @click="handleRemoveItem(index)"
                  >
                    删除
                  </n-button>
                </n-form-item>