使用vue3+el-form实现动态新增名称，值，并对名称进行必填校验

使用vue3+el-form实现动态新增名称，值，并对名称进行必填校验

效果图

代码

<template>
  <el-form :model="form" :rules="rules" ref="dynamicForm">
    <!-- 动态添加的名称和值 -->
    <el-row v-for="(item, index) in form.items" :key="index">
      <el-col :span="8">
        <el-form-item :prop="'items.' + index + '.key'" :rules="rules.key">
          <el-input v-model="item.key" placeholder="请输入" :disabled="disabled"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item>
          <el-input v-model="item.value" placeholder="请输入" :disabled="disabled"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-button @click="addItem(index)" :disabled="disabled">+</el-button>
        <el-button type="danger" @click="removeItem(index)" :disabled="disabled">-</el-button>
      </el-col>
    </el-row>

    <!-- 添加按钮 -->
    <!--    <el-button type="primary" @click="addItem">Add Item</el-button>-->

    <!-- 提交按钮 -->
    <!--    <el-button type="success" @click="submitForm">Submit</el-button>-->
  </el-form>
</template>

<script setup name="dynamicsForm">
import { ref, reactive, defineProps, watch } from 'vue'
const props = defineProps({
  defaultData: {
    type: [Object, Array]
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const dynamicForm = ref(null) // 表单引用
const form = reactive({
  items: [] // 动态表单项
})

const rules = reactive({
  key: [{ required: true, message: '请输入', trigger: 'blur' }]
})

// 添加表单项
const addItem = index => {
  // form.items.push({ key: '', value: '' });
  form.items.splice(index + 1, 0, { key: '', value: '' })
}

// 移除表单项
const removeItem = index => {
  form.items.splice(index, 1)
}

// 提交表单
const submitForm = () => {
  dynamicForm.value.validate(valid => {
    if (valid) {
      alert('Form submitted successfully!')
      console.log('Form Data:', form.items)
    } else {
      alert('Form validation failed!')
      return false
    }
  })
}
// 校验表单
const validateForm = async () => {
  const result = {
    status: true,
    data: form.items
  }
  result.status = await dynamicForm.value.validate()
  return result
}
watch(
  () => props.defaultData,
  val => {
    form.items = val && val.length > 0 ? val : [{ key: '', value: '' }]
  },
  {
    immediate: true
  }
)
defineExpose({
  validateForm
})
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>