当前位置：首页 > VUE

vue实现层级表单

2026-01-19 05:02:53VUE

Vue 实现层级表单的方法

递归组件实现嵌套表单

使用递归组件可以轻松处理无限层级的表单结构。定义一个组件，该组件能够调用自身来渲染子表单。

<template>
  <div>
    <input v-model="formData.name" placeholder="名称">
    <button @click="addChild">添加子项</button>
    <div v-for="(child, index) in formData.children" :key="index">
      <nested-form :formData="child" @remove="removeChild(index)"></nested-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NestedForm',
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  methods: {
    addChild() {
      this.formData.children.push({ name: '', children: [] })
    },
    removeChild(index) {
      this.formData.children.splice(index, 1)
    }
  }
}
</script>

动态表单数据绑定

使用 Vue 的响应式特性，确保表单数据能够动态更新。可以通过 v-model 实现数据的双向绑定。

<template>
  <nested-form :formData="formData"></nested-form>
</template>

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

export default {
  components: { NestedForm },
  data() {
    return {
      formData: {
        name: '',
        children: []
      }
    }
  }
}
</script>

表单验证

结合 Vue 的表单验证库（如 VeeValidate）对层级表单进行验证。确保每一层的数据都符合要求。

<template>
  <div>
    <input v-model="formData.name" placeholder="名称" v-validate="'required'">
    <span v-if="errors.has('name')">{{ errors.first('name') }}</span>
    <div v-for="(child, index) in formData.children" :key="index">
      <nested-form :formData="child" @remove="removeChild(index)"></nested-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NestedForm',
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  inject: ['$validator'],
  methods: {
    addChild() {
      this.formData.children.push({ name: '', children: [] })
    },
    removeChild(index) {
      this.formData.children.splice(index, 1)
    }
  }
}
</script>

表单提交

在提交表单时，递归遍历所有层级的数据，确保所有数据都被正确处理。

<template>
  <div>
    <nested-form :formData="formData"></nested-form>
    <button @click="submitForm">提交</button>
  </div>
</template>

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

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

使用第三方库

如果需要更复杂的层级表单功能，可以考虑使用第三方库如 vue-form-generator 或 element-ui 的表单组件。

<template>
  <el-form :model="formData">
    <el-form-item label="名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item v-for="(child, index) in formData.children" :key="index">
      <nested-form :formData="child"></nested-form>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'NestedForm',
  props: {
    formData: {
      type: Object,
      required: true
    }
  }
}
</script>

以上方法可以根据实际需求进行组合和调整，以实现不同复杂度的层级表单功能。

vue实现层级表单