javascript - 点击＋号，增加form表单的子级应该怎么做能实现？

Question

上面的图片是ui图，这是一个编辑弹窗里面的功能，用的是vue2+element ui
在入参字段下面的表单，点击右侧的加号就能添加一个子级，总共能有三级。点击减号能删除当前的子级。
这七个表单的布局，是应该写七个form-item，还是在一个form-item下面写七个input，哪个好一点呢。
请问这样的添加表单的子级应该怎么实现呢？ 求指导 求指导

Answer 1

七个form-item吧，往数组里面push呗

Answer 2

组件

<!-- formRow.vue --><template>  <div>    <div class="form-row">      <el-form-item label="用户名">        <el-input          v-model="value.userName"          placeholder="请输入用户名"        ></el-input>      </el-form-item>      <el-form-item label="密码">        <el-input          v-model="value.password"          placeholder="请输入密码"        ></el-input>      </el-form-item>      <el-button @click="addChildren(value)"> 添加 </el-button>      <el-button @click="deleteRow(value)"> 删除 </el-button>    </div>    <div style="margin-left: 20px">      <template v-for="(item, index) in value.children">        <form-row          v-model="value.children[index]"          :key="index"          :index="index"          @removeRow="removeRow"        ></form-row>      </template>    </div>  </div></template><script>export default {  name: "form-row",  model: {    prop: "value",    event: "change",  },  props: {    value: {      type: Object,      default: () => [],    },    index: {      type: Number,      default: 0,    },  },  watch: {    value: {      handler(val) {        this.$emit("change", val);      },      deep: true,    },  },  methods: {    // 添加子级    addChildren() {      if (!this.value.children) {        this.$set(this.value, "children", [{ userName: "" }]);      } else {        this.value.children.push({          userName: "",          password: ""        });      }    },    // 删除该行表单    deleteRow() {      // 抛出事件到父级执行      this.$emit("removeRow", this.index);    },    // 删除子级    removeRow(index) {      if (this.value?.children[index]?.children?.length > 0) {        alert('请先删除子级')      } else {        this.value.children.splice(index, 1);      }    },  },};</script><style>.form-row {  display: flex;  margin-bottom: 10px;}.form-row .el-button {  height: 40px;  margin-left: 10px;}</style>

使用

<template>  <div id="app">    <el-form label-width="80px">      <template v-for="(item, index) in formArray">        <formRowVue          v-model="formArray[index]"          :key="index"          :index="index"          @removeItem="removeItem"        ></formRowVue>      </template>    </el-form>  </div></template><script>import formRowVue from './views/formRow.vue';export default {  name: "myform",  components: {    formRowVue  },  data() {    return {      formArray: [        {          userName: "张三",          password: '123456',          children: [{ userName: "张三1", password: '123456' }, { userName: "张三2", password: '123456' }],        },      ]    }  },  methods: {    removeItem(index) {      if (this.formArray[index]?.children?.length > 0) {        alert('请先删除子级')      } else {        this.formArray.splice(index, 1);      }    }  },};</script><style lang="less"></style>

Answer 3

首先，对于这个问题，我们需要使用Vue.js的动态组件功能。每个表单项应该是一个动态组件，这样我们就可以根据需要添加或删除它们。

在Vue 2中，你可以使用v-for指令来渲染一个动态的组件列表。对于每一个组件，你可以使用一个v-if来控制是否显示这个组件。

这是一个基本的示例，展示了如何创建一个可重复的表单项：

<template>  <el-form :model="form" label-width="120px">    <el-form-item label="项目名称" prop="name">      <el-input v-model="form.name"></el-input>    </el-form-item>    <el-form-item v-for="(item, index) in form.items" :key="index" label="项目内容" prop="content">      <el-input v-model="item.content"></el-input>      <el-button @click="removeItem(index)">删除</el-button>    </el-form-item>    <el-button type="primary" @click="addItem">添加项目</el-button>  </el-form></template><script>export default {  data() {    return {      form: {        name: '',        items: [{ content: '' }]  // 初始只有一个项目      }    };  },  methods: {    addItem() {      this.form.items.push({ content: '' });  // 添加一个新的项目    },    removeItem(index) {      this.form.items.splice(index, 1);  // 删除指定的项目    }  }};</script>

在这个示例中，我们有一个主表单项（name），然后我们使用v-for来渲染一个动态的表单项列表。每个表单项都有一个删除按钮和一个输入框。点击"添加项目"按钮会调用addItem方法，这个方法会将一个新的空项目添加到form.items数组中。点击删除按钮会调用removeItem方法，这个方法会从form.items数组中删除指定的项目。