vue实现层级表单

Vue 实现层级表单的方法

在 Vue 中实现层级表单通常需要处理嵌套数据结构，常见的场景包括动态增减表单项、父子表单项联动等。以下是几种实现方式：

使用 v-for 动态渲染嵌套表单

通过 v-for 指令可以动态渲染嵌套的表单结构，适用于已知层级深度的场景：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(parentItem, parentIndex) in formData" :key="parentIndex">
      <input v-model="parentItem.name" placeholder="Parent Name">

      <div v-for="(childItem, childIndex) in parentItem.children" :key="childIndex">
        <input v-model="childItem.name" placeholder="Child Name">
        <button @click="removeChild(parentIndex, childIndex)">Remove</button>
      </div>

      <button @click="addChild(parentIndex)">Add Child</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: [
        {
          name: '',
          children: []
        }
      ]
    }
  },
  methods: {
    addChild(parentIndex) {
      this.formData[parentIndex].children.push({ name: '' })
    },
    removeChild(parentIndex, childIndex) {
      this.formData[parentIndex].children.splice(childIndex, 1)
    },
    handleSubmit() {
      console.log(this.formData)
    }
  }
}
</script>

递归组件实现无限层级

对于不确定层级深度的场景，可以使用递归组件：

<template>
  <form @submit.prevent="handleSubmit">
    <form-item 
      v-model="formData"
      @add-child="addChild"
      @remove-item="removeItem"
    ></form-item>
  </form>
</template>

<script>
import FormItem from './FormItem.vue'

export default {
  components: { FormItem },
  data() {
    return {
      formData: {
        name: '',
        children: []
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.formData)
    }
  }
}
</script>

FormItem.vue 组件：

<template>
  <div class="form-item">
    <input v-model="localValue.name" placeholder="Name">
    <button @click="$emit('add-child', localValue)">Add Child</button>
    <button @click="$emit('remove-item')">Remove</button>

    <div v-for="(child, index) in localValue.children" :key="index">
      <form-item
        v-model="localValue.children[index]"
        @add-child="addNestedChild"
        @remove-item="removeNestedChild(index)"
      ></form-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormItem',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  computed: {
    localValue: {
      get() { return this.value },
      set(val) { this.$emit('input', val) }
    }
  },
  methods: {
    addNestedChild(parent) {
      parent.children.push({ name: '', children: [] })
    },
    removeNestedChild(index) {
      this.localValue.children.splice(index, 1)
    }
  }
}
</script>

使用第三方库

对于复杂表单场景，可以考虑使用专门的表单库：

1. VeeValidate：提供表单验证功能
2. FormVueLate：专门处理复杂嵌套表单
3. Element UI/Vuetify：UI 框架中的表单组件

表单验证处理

层级表单的验证需要递归处理：

methods: {
  validateForm(data) {
    if (!data.name) return false

    for (const child of data.children) {
      if (!this.validateForm(child)) return false
    }

    return true
  },
  handleSubmit() {
    if (this.validateForm(this.formData)) {
      // 提交逻辑
    }
  }
}

性能优化建议

1. 为动态生成的表单项添加合适的 key
2. 对深层嵌套表单考虑使用扁平化数据结构
3. 复杂场景下使用 Vuex 管理表单状态

实现层级表单时，应根据具体业务需求选择合适的方法。简单场景使用 v-for 即可，复杂嵌套结构推荐使用递归组件或专业表单库。