AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单

2024-10-23 1951
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表，支持用户动态添加设备部位和任务，并提供相应的表单验证规则。

效果图：

效果图

代码实现：

Template 部分：

  • 表单使用了 el-form 和 el-form-item 组件来展示表单结构。
  • 表单项包括选择设备名称、模板类型、设备部位、任务名称、执行结果等。
  • 通过 v-for 动态渲染任务和设备部位列表。
  • 提供了操作按钮来添加和删除任务项及设备部位。
<template>
    <el-form class="form" ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-select v-model="form.equipmentName" placeholder="请选择设备名称" clearable style="width: 100%">
                <el-option v-for="(item, index) in menuOptions" :key="index" :label="item.name" :value="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="模板类型" prop="templateType">
              <el-select v-model="form.templateType" placeholder="请选择模板类型" clearable style="width: 100%">
                <el-option v-for="(item, index) in menuOptions" :key="index" :label="item.name" :value="item.name"/>
              </el-select>
            </el-form-item>
            <el-card shadow="never" v-for="(item, index) in form.partsList" :key="index">
              <el-row :gutter="10" type="flex" justify="space-between">
                <el-col :span="23">
                  <el-form-item label="设备部位" :prop="'partsList.'+ index + '.location'" :rules="partsListRules.location">
                    <el-input v-model="item.location" placeholder="请输入设备部位"/>
                  </el-form-item>
                  <el-form-item label="部位图片" :prop="'partsList.' + index + '.image'" :rules="partsListRules.image">
                    <imageUpload v-model="item.image" :limit="1" :is-show-tip="false"/>
                  </el-form-item>
                  <el-card shadow="never" v-for="(task, idx) in item.taskList" :key="idx">
                    <el-row :gutter="10" type="flex" justify="space-between">
                      <el-col :span="23">
                        <el-form-item label="任务名称" :prop="'partsList.' + index + '.taskList.' + idx + '.taskName'" :rules="taskListRules.taskName">
                          <el-input v-model="task.taskName" placeholder="请输入任务名称"/>
                        </el-form-item>
                        <el-form-item label="执行结果" required>
                          <el-row :gutter="20" type="flex" justify="space-between">
                            <el-col :span="8">
                              <el-form-item :prop="'partsList.' + index + '.taskList.' + idx + '.outcome'" :rules="taskListRules.outcome">
                                <el-select v-model="task.outcome" style="width: 100%" placeholder="请选择执行结果" clearable>
                                  <el-option v-for="(item, index) in menuOptions" :key="index" :label="item.name" :value="item.name"/>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="4">
                              <el-form-item :prop="'partsList.' + index + '.taskList.' + idx + '.termOne'" :rules="taskListRules.termOne">
                                <el-select v-model="task.termOne" style="width: 100%" placeholder="请选择" clearable>
                                  <el-option v-for="(item, index) in menuOptions" :key="index" :label="item.name" :value="item.name"/>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="4">
                              <el-form-item :prop="'partsList.' + index + '.taskList.' + idx + '.valueOne'" :rules="taskListRules.valueOne">
                                <el-input v-model="task.valueOne" placeholder="数值"/>
                              </el-form-item>
                            </el-col>
                            <el-col :span="4">
                              <el-form-item :prop="'partsList.' + index + '.taskList.' + idx + '.termTwo'" :rules="taskListRules.termTwo">
                                <el-select v-model="task.termTwo" style="width: 100%" placeholder="请选择" clearable>
                                  <el-option v-for="(item, index) in menuOptions" :key="index" :label="item.name" :value="item.name"/>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="4">
                              <el-form-item :prop="'partsList.' + index + '.taskList.' + idx + '.valueTwo'" :rules="taskListRules.valueTwo">
                                <el-input v-model="task.valueTwo" placeholder="数值"/>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form-item>
                        <el-row :gutter="20">
                          <el-col :span="12">
                            <el-form-item label="选择备件" :prop="'partsList.' + index + '.taskList.' + idx + '.spare'" :rules="taskListRules.spare">
                              <el-select v-model="task.spare" style="width: 100%" placeholder="请选择" clearable>
                                <el-option v-for="(item, index) in menuOptions" :key="index" :label="item.name" :value="item.name"/>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="备件数量" :prop="'partsList.' + index + '.taskList.' + idx + '.quantity'" :rules="taskListRules.quantity">
                              <el-input-number v-model="task.quantity" :min="0" />
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                      <i class="inter el-icon-delete"  v-if="item.taskList.length > 1" @click="deleteInterItems(task, idx)"></i>
                    </el-row>
                  </el-card>
                  <el-button type="primary" icon="el-icon-plus" @click="addInterItems(item, index)" plain style="margin-top: 10px;width: 100%">添加任务项</el-button>
                </el-col>
                <i class="outer el-icon-delete" v-if="form.partsList.length > 1" @click="deleteOuterItems(item, index)"></i>
              </el-row>
            </el-card>
            <!--添加外层内容-->
            <el-button type="primary" plain icon="el-icon-plus" @click="addOuterItems" style="margin-top: 10px;width: 100%">添加部位 & 任务项</el-button>
          </el-form>
</template>

Script 部分：

  • 定义了嵌套的表单数据结构，包括设备名称、模板类型、设备部位及任务项等。
  • addInterItems 方法用于动态添加任务项，addOuterItems 方法用于添加设备部位。
  • deleteInterItems 和 deleteOuterItems 用于删除任务项和设备部位。
  • 表单校验规则通过 rules 和 taskListRules 等实现。
<script>
export default {
   
  name: 'Template',
  components: {
   
    ImageUpload
  },
  data() {
   
    return {
   
      form: {
   
        equipmentName: undefined,
        templateType: undefined,
        partsList: [
          {
   
            location: undefined,
            image: undefined,
            taskList: [
              {
   
                taskName: undefined,
                outcome: undefined,
                termOne: undefined,
                valueOne: undefined,
                termTwo: undefined,
                valueTwo: undefined,
                spare: undefined,
                quantity: 0
              }
            ]
          }
        ]
      },
      rules: {
    ... }, // 表单校验规则省略
      partsListRules: {
    ... },
      taskListRules: {
    ... },
    }
  },
  methods: {
   
    addInterItems(item, index) {
   
      item.taskList.push({
   
        taskName: undefined,
        outcome: undefined,
        termOne: undefined,
        valueOne: undefined,
        termTwo: undefined,
        valueTwo: undefined,
        spare: undefined,
        quantity: 0
      });
    },
    deleteInterItems(task, idx) {
   
      this.form.partsList[idx].taskList.splice(task, 1);
    },
    addOuterItems() {
   
      this.form.partsList.push({
   
        location: undefined,
        image: undefined,
        taskList: [
          {
   
            taskName: undefined,
            outcome: undefined,
export default {
   
  name: 'Template',
  components: {
   
    ImageUpload
  },
  data() {
   
    return {
   
      // 表单参数
      form: {
   
        equipmentName: undefined, // 设备名称
        templateType: undefined, // 模板类型
        partsList: [
          {
   
            location: undefined, // 设备部位
            image: undefined, // 图片
            taskList: [
              {
   
                taskName: undefined, // 任务名称
                outcome: undefined, // 执行结果
                termOne: undefined, // 条件1
                valueOne: undefined, // 条件1的值
                termTwo: undefined, // 条件2
                valueTwo: undefined, // 条件2的值
                spare: undefined, // 备件
                previous: undefined, // 前值
                after: undefined, // 后值
                quantity: 0 // 备件数量
              }
            ]
          }
        ]
      },
      // 表单校验
      rules: {
   
        equipmentName: [
          {
    required: true, message: '设备名称不能为空', trigger: 'blur' },
          {
    max: 30, message: '设备名称不能超过30个字', trigger: 'blur' }
        ],
        templateType: [
          {
    required: true, message: '模板类型不能为空', trigger: 'blur' },
          {
    max: 30, message: '模板类型不能超过30个字', trigger: 'blur' }
        ]
      },
      partsListRules: {
   
        location: [
          {
    required: true, message: '设备部位不能为空', trigger: 'blur' },
          {
    max: 30, message: '设备部位不能超过30个字', trigger: 'blur' }
        ],
        image: [
          {
    required: true, message: '图片不能为空', trigger: 'blur' }
        ]
      },
      taskListRules: {
   
        taskName: [
          {
    required: true, message: '任务名称不能为空', trigger: 'blur' },
          {
    max: 30, message: '任务名称不能超过30个字', trigger: 'blur' }
        ],
        outcome: [
          {
    required: true, message: '执行结果不能为空', trigger: 'blur' },
          {
    max: 30, message: '执行结果不能超过30个字', trigger: 'blur' }
        ],
        termOne: [
          {
    required: true, message: '条件1不能为空', trigger: 'blur' },
          {
    max: 30, message: '条件1不能超过30个字', trigger: 'blur' }
        ],
        valueOne: [
          {
    required: true, message: '条件1的值不能为空', trigger: 'blur' },
          {
    max: 30, message: '条件1的值不能超过30个字', trigger: 'blur' }
        ],
        termTwo: [
          {
    required: true, message: '条件2不能为空', trigger: 'blur' },
          {
    max: 30, message: '条件2不能超过30个字', trigger: 'blur' }
        ],
        valueTwo: [
          {
    required: true, message: '条件2的值不能为空', trigger: 'blur' },
          {
    max: 30, message: '条件2的值不能超过30个字', trigger: 'blur' }
        ],
        spare: [
          {
    required: true, message: '备件不能为空', trigger: 'blur' },
          {
    max: 30, message: '备件不能超过30个字', trigger: 'blur' }
        ],
        previous: [
          {
    required: true, message: '前值不能为空', trigger: 'blur' },
          {
    max: 30, message: '前值不能超过30个字', trigger: 'blur' }
        ],
        after: [
          {
    required: true, message: '后值不能为空', trigger: 'blur' },
          {
    max: 30, message: '后值不能超过30个字', trigger: 'blur' }
        ],
        quantity: [
          {
    required: true, message: '备件数量不能为空', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
   
      /** 添加任务项操作 */
    addInterItems(item, index) {
   
      console.log(item, index)
      item.taskList.push({
   
        taskName: undefined, // 任务名称
        outcome: undefined, // 执行结果
        termOne: undefined, // 条件1
        valueOne: undefined, // 条件1的值
        termTwo: undefined, // 条件2
        valueTwo: undefined, // 条件2的值
        spare: undefined, // 备件
        previous: undefined, // 前值
        after: undefined, // 后值
        quantity: 0 // 备件数量
      })
    },
    /** 删除任务项操作 */
    deleteInterItems(task, idx) {
   
      console.log(task, idx)
      this.form.partsList[idx].taskList.splice(task, 1)
    },
    /** 添加部位&任务项操作 */
    addOuterItems() {
   
      this.form.partsList.push({
   
        location: undefined,
        image: undefined,
        taskList: [
          {
   
            taskName: undefined, // 任务名称
            outcome: undefined, // 执行结果
            termOne: undefined, // 条件1
            valueOne: undefined, // 条件1的值
            termTwo: undefined, // 条件2
            valueTwo: undefined, // 条件2的值
            spare: undefined, // 备件
            previous: undefined, // 前值
            after: undefined, // 后值
            quantity: 0 // 备件数量
          }
        ]
      })
    },
    /** 删除部位&任务项操作 */
    deleteOuterItems(item, index) {
   
      console.log(item, index)
      this.form.partsList.splice(index, 1)
    },
  }
}
</script>

总结：

  • 该表单动态管理设备及其任务列表，允许用户灵活地添加或删除嵌套表单项。
  • 使用 Element UI 提供的表单组件，保证了良好的用户体验和表单验证功能。
  • 通过嵌套表单项、动态数据结构、校验规则相结合，实现了复杂表单的可扩展性。
文章标签：
JavaScript
UED
关键词：
表单VUE.js
vue表单VUE.js
elementui表单VUE.js
嵌套VUE.js
vue elementui VUE.js
chnjames
目录
相关文章
34789737
|
6月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
581 2
哇塞女孩
|
5月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
479 137
rvblio6ca4cug
|
8月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
611 1
34789737
|
8月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
420 0
谢妹纸
|
9月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
1017 0
小宋1021
|
11月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
1282 4
我们是幸福一家人
|
9月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
470 82
34789737
|
10月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
1368 78
游客tsrksm3mlhq4y
|
11月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
游客tsrksm3mlhq4y
447 57
34789737
|
9月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
620 17