vue链表实现动态表单

Vue 链表实现动态表单

在 Vue 中，可以使用链表数据结构来实现动态表单，链表可以方便地插入、删除和遍历表单元素。以下是实现动态表单的几种方法。

使用对象数组模拟链表

定义一个对象数组，每个对象包含表单字段信息和指向下一个节点的指针。

data() {
  return {
    formFields: [
      { id: 1, value: '', next: 2 },
      { id: 2, value: '', next: null }
    ]
  }
}

在模板中遍历数组，渲染表单字段。

<template>
  <div v-for="field in formFields" :key="field.id">
    <input v-model="field.value" />
    <button @click="removeField(field.id)">删除</button>
  </div>
  <button @click="addField">添加字段</button>
</template>

实现链表操作

添加新字段到链表末尾。

methods: {
  addField() {
    const newId = this.formFields.length + 1
    this.formFields.push({ id: newId, value: '', next: null })
    this.formFields[this.formFields.length - 2].next = newId
  }
}

删除指定字段并更新链表关系。

methods: {
  removeField(id) {
    const index = this.formFields.findIndex(field => field.id === id)
    if (index !== -1) {
      const prevField = this.formFields.find(field => field.next === id)
      if (prevField) {
        prevField.next = this.formFields[index].next
      }
      this.formFields.splice(index, 1)
    }
  }
}

使用双向链表实现更复杂的操作

双向链表可以更方便地实现字段的插入和删除。

data() {
  return {
    formFields: [
      { id: 1, value: '', prev: null, next: 2 },
      { id: 2, value: '', prev: 1, next: null }
    ]
  }
}

在指定位置插入新字段。

methods: {
  insertFieldAfter(id) {
    const index = this.formFields.findIndex(field => field.id === id)
    if (index !== -1) {
      const newId = this.formFields.length + 1
      const newField = { id: newId, value: '', prev: id, next: this.formFields[index].next }
      this.formFields.splice(index + 1, 0, newField)
      this.formFields[index].next = newId
      if (newField.next) {
        const nextField = this.formFields.find(field => field.id === newField.next)
        nextField.prev = newId
      }
    }
  }
}

使用 Vue 的动态组件

结合动态组件可以更灵活地渲染不同类型的表单字段。

<template>
  <div v-for="field in formFields" :key="field.id">
    <component :is="field.type" v-model="field.value" />
    <button @click="removeField(field.id)">删除</button>
  </div>
</template>

表单验证

为链表中的每个字段添加验证规则。

data() {
  return {
    formFields: [
      { id: 1, value: '', next: 2, rules: [v => !!v || '必填'] },
      { id: 2, value: '', next: null, rules: [v => v.length > 3 || '至少4个字符'] }
    ]
  }
}

在提交时验证所有字段。

methods: {
  validateForm() {
    return this.formFields.every(field => {
      const errors = field.rules.map(rule => rule(field.value)).filter(Boolean)
      return errors.length === 0
    })
  }
}

以上方法展示了如何在 Vue 中使用链表数据结构实现动态表单，包括添加、删除、插入和验证表单字段。根据实际需求，可以选择合适的链表类型和操作方法。