element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作

简介: element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作

前言


说实话,在家里的工作效率一点都不如公司的高,这两天完善了下系统中一个复杂表单的操作,大致实现的是这样的功能:


  • 一个设备下是可以添加多个采集类型的


  • 每个采集类型下面可以添加多个元素个数


  • 根据元素个数不同,来添加其他信息


由于内容有点多,所以我分了三篇来整理,分别是:


  1. element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作


  1. element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现


  1. element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现



实现效果图如下:

a60b886a31b4c5490a4d9696d6d4e7b2.png



有些地方打码了,不过不影响整个效果的展示。这个写起来还是有点复杂的,尤其是在回显内容的时候,费了不少周折,下面来分享一下这块儿功能的实现。




实现思路


  •    声明一个变量,用来存放采集数据的个数。


  •    通过v-for循环,展示页面中有多少个采集数据的表单个数。


  •    点击最下面新增的按钮时,会添加一个采集数据的表单,所以这块儿内容我们得动态操作,我这边的方法是,v-model="xxx[index]"的方式实现,index用来区分当前是第几个,在后面取值的时候也方便。


  •    继续身边一个formList变量,作为下面表格的表单,也是根据元素个数来循环的


  •    注意:凡是在循环中的,v-model都不可以一样,否则会造成数值错乱的情况(多个表单中的值一样)



实现展示多个采集数据表单


html代码:

<div v-for="(item,index) in attribute" v-if="index < checkList.length">
          <el-row :gutter="10" style="margin-top: 20px;">
            <el-row>
              <el-col :span="12"><span style="font-size: 15px;font-weight: 600;margin: 5px 0 0 30px;">采集数据</span></el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-col :span="8">
                <el-form-item
                  label="采集数据类型:"
                  prop="checkList"
                  :rules="[
                    {
                      required: true,
                      message: '请选择采集数据类型',
                      trigger: 'blur',
                    },
                  ]">
                  <el-select v-model="deviceDataCheck[index]" @change="deviceDataCheckChange($event,[index])" placeholder="请选择采集数据类型">
                    <el-option
                      v-for="item in checkList"
                      :key="item.dictKey"
                      :label="item.dictValue"
                      :value="item.dictKey"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="固定:"
                  prop=""
                  :rules="[
                    {
                      required: false,
                      message: '示例:100或者250',
                      trigger: 'blur',
                    },
                  ]">
                  <el-input-number style="width: 80%;" :min="1" v-model="samplingFrequency[index]" placeholder="示例:100" :step="1"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="类别式:"
                  prop="schemeOfDataSourceType"
                  :rules="[
                    {
                      required: true,
                      message: '大于或等于1的整数',
                      trigger: 'blur',
                    },
                  ]">
                  <el-select v-model="schemeOfDataSourceType[index]" placeholder="请选择 类别描述方式">
                    <el-option
                      v-for="item in schemeOfDataSourceTypeList"
                      :key="item.dictKey"
                      :label="item.dictValue"
                      :value="item.dictKey"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            <el-col :span="8">
                <el-form-item label="数据元素个数:" prop="countOfCompound" :rules="[{
                  required: false,
                  message: '大于或等于1的整数',
                  trigger: 'blur',}]">
                  <el-input-number style="width: 80%;"
                                   :disabled="isCountOfComw[index]" :min="1" v-model="countOfCompound[index]"
                                   @change="handleChange($event,[index])" placeholder="示例:1" controls-position="right"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="测量:"
                  prop="measurePeriodExist"
                  :rules="[
                    {
                      required: true,
                      message: '请选择',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-select
                    v-model="measurePeriodst[index]"
                    @change="forceUpdateChange"
                    placeholder="请选择">
                    <el-option
                      v-for="item in measurePeriod"
                      :key="item.dictKey"
                      :label="item.dictValue"
                      :value="item.dictKey"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="countOfCompound[index] != null" :span="24" style="margin-bottom: 30px">
                <el-col :span="24" style="margin-bottom: 0px">
                  <el-col style="text-align: center;line-height: 40px;border: 1px solid #dcdfe6;margin-bottom: 0px;" :span="3">序号</el-col>
                  <el-col style="text-align: center;line-height: 40px;border: 1px solid #dcdfe6;margin-bottom: 0px;":span="5">采集数据类型</el-col>
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="4">类别</el-col>
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="4"
                  >单位</el-col
                  >
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="3"
                  >类型</el-col
                  >
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="5"
                  >类型</el-col
                  >
                </el-col>
          <el-divider></el-divider>
        </div>


页面中有多少采集数据的表单取决于,点了多少下新增的按钮,默认只有一个,点一下新增按钮就多加一个 ,所以此时我们需要声明一个用来记录采集数据个数的变量。在data中声明:

attribute: [1],


然后在method中写新增的点击事件:

//新增采集数据属性按钮
    addAttribute(){
      //小于采集数据类型的话可以加
      if(this.attribute.length<this.checkList.length){
        this.attribute.push(this.attribute.length+1);
      }
    },


checkList的值是采集数据类型的下拉,先声明在使用,代码如下:

checkList: [],


mounted中构造checkList集合:

//采集数据类型
    getDictionary({ code: "deviceData" }).then((res) => {
      this.checkList = res.data.data;
      let arr = [];
      for(let i = 0; i < this.checkList.length; i++) {
        arr[i] = true;
      }
      this.isCountOfCompoundShow = [arr];
    });


注意此处加了个判断,当时考虑的是,采集数据不可以无限新增,取决于采集数据下面的采集数据类型下拉,下拉中有多少个值,就可以新加多少个,为了直观展示,可以看看下面的图:

17ccefa0e4b0652111296c940c66bd30.png


现在我们就实现了,点击新增按钮时,动态的添加一个采集数据表单,默认之后一个,最多只能添加采集数据类型下拉框中的个数。




根据元素个数,动态生成表格


因为下面表格中的行数是由上面元素个数来决定的,所以需要编写元素个数数字表单的改变事件。此处还有个地方需要验证,即上面采集数据类型如果不写的话,下面元素个数是禁用状态,无法操作。


html代码

<el-row>
            <el-col :span="8">
                <el-form-item label="数据元素个数:" prop="countOfCompound" :rules="[{
                  required: false,
                  message: '大于或等于1的整数',
                  trigger: 'blur',}]">
                  <el-input-number style="width: 80%;"
                                   :disabled="isCountOfCompoundShow[index]" :min="1" v-model="countOfCompound[index]"
                                   @change="handleChange($event,[index])" placeholder="示例:1" controls-position="right"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="测:"
                  prop="measurePeriodExist"
                  :rules="[
                    {
                      required: true,
                      message: '请选择是',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-select
                    v-model="measurePeriodExist[index]"
                    @change="forceUpdateChange"
                    placeholder="请选择">
                    <el-option
                      v-for="item in measurePeriodExistList"
                      :key="item.dictKey"
                      :label="item.dictValue"
                      :value="item.dictKey"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="countOfCompound[index] != null" :span="24" style="margin-bottom: 30px">
                <el-col :span="24" style="margin-bottom: 0px">
                  <el-col style="text-align: center;line-height: 40px;border: 1px solid #dcdfe6;margin-bottom: 0px;" :span="3">序号</el-col>
                  <el-col style="text-align: center;line-height: 40px;border: 1px solid #dcdfe6;margin-bottom: 0px;":span="5">采集数据类型</el-col>
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="4">数据源各元素类别</el-col>
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="4"
                  >数值单位</el-col
                  >
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="3"
                  >数据类型</el-col
                  >
                  <el-col
                    style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                    "
                    :span="5"
                  >度量属性类型</el-col
                  >
                </el-col>
                <!--表格-->
                <el-col v-for="(items, indexL) in formList[index]" :key="indexL" :span="24" style="margin-bottom: 0px; height: 40px">
                  <!-- 序号 -->
                  <el-col style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                      height: 40px;
                    " :span="3">{{ indexL + 1 }}</el-col>
                  <!-- 采集数据类型 -->
                  <el-col style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                      height: 40px;
                    " :span="5"><span v-if="deviceDataCheck[index] == 'hr'">心率</span><span v-if="deviceDataCheck[index] == 'rri'">RRI</span></el-col>
                  <!-- 数据源各元素类别 -->
                  <el-col style="text-align: center;line-height: 40px;border: 1px solid #dcdfe6;margin-bottom: 0px;height: 40px;" :span="4">
                    <el-form-item prop="dataSourceType"
                      :rules="[
                        {
                          required: true,
                          message: '请选择数据源类别',
                          trigger: 'blur',
                        },
                      ]"
                      label-width="0px">
                      <el-select v-model="items.dataSourceType" @change="forceUpdateChange" style="width: 100%" placeholder="请选择数据源各元素类别">
                        <el-option v-for="item in dataSourceTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 数值单位 -->
                  <el-col style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                      height: 40px;
                    " :span="4">
                    <el-form-item
                      prop="unitCode"
                      :rules="[
                        {
                          required: true,
                          message: '请选择数值单位',
                          trigger: 'blur',
                        },
                      ]"
                      label-width="0px"
                    >
                      <el-select
                        v-model="items.unitCode"
                        @change="forceUpdateChange"
                        style="width: 100%"
                        placeholder="请选择 数值单位"
                      >
                        <el-option
                          v-for="item in unitCodeList"
                          :key="item.dictKey"
                          :label="item.dictValue"
                          :value="item.dictKey"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 数据类型 -->
                  <el-col style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                      height: 40px;
                    " :span="3">
                    <el-form-item
                      prop="dataType"
                      :rules="[
                        {
                          required: true,
                          message: '请选择采集数据类型',
                          trigger: 'blur',
                        },
                      ]"
                      label-width="0px"
                    >
                      <el-select
                        v-model="items.dataType"
                        @change="forceUpdateChange"
                        style="width: 100%"
                        placeholder="请选择 数据类型"
                      >
                        <el-option
                          v-for="item in dataTypeList"
                          :key="item.dictKey"
                          :label="item.dictValue"
                          :value="item.dictKey"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 度量属性类型 -->
                  <el-col style="
                      text-align: center;
                      line-height: 40px;
                      border: 1px solid #dcdfe6;
                      margin-bottom: 0px;
                      height: 40px;
                    " :span="5">
                    <el-form-item
                      prop="metricSpec"
                      :rules="[
                        {
                          required: true,
                          message: '请选择度量属性类型',
                          trigger: 'blur',
                        },
                      ]"
                      label-width="0px"
                    >
                      <el-select
                        v-model="items.metricSpec"
                        @change="forceUpdateChange"
                        style="width: 100%"
                        placeholder="请选择 度量属性类型"
                      >
                        <el-option
                          v-for="item in metricSpecList"
                          :key="item.dictKey"
                          :label="item.dictValue"
                          :value="item.dictKey"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-row>


接下来就是元素个数数字表单的改变事件:

 //元素个数的改变事件
    handleChange(value,index) {
      this.formList[index] = [];
      let num = this.formList[index].length;
      for (let i = 0; i < value - num; i++) {
        this.formList[index].push({
          dataSourceType: "",
          unitCode: "",
          dataType: "",
          metricSpec: "",
          //checkType: this.checkList[0].dictValue,
        });
      }
    },

以上内容即可实现静态页面表单的交互。

目录
相关文章
|
2月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
249 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
148 0
|
3月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
153 3
|
4月前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
55 0
|
4月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
123 0
|
26天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
131 3
|
9天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
99 8
|
2月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
78 1