当前位置: 首页 > news >正文

elementUI如何动态增减表单项

设置prop的字段::prop="configs.${i}.platform"

<template><el-dialogtitle="编辑配置":close-on-click-modal="false":before-close="beforeClose":visible.sync="visible"v-if="visible"class="abow_dialog"><el-form:model="dataForm":rules="dataRule"ref="dataForm"@keyup.enter.native="dataFormSubmit()"label-width="140px"><el-form-item label="医院名称" prop="hospname"><el-inputv-model="dataForm.hospname"placeholder="输入医院名称"disabled></el-input></el-form-item><el-form-item label="互联网医院名称" prop="internetHospname"><el-inputv-model="dataForm.internetHospname"placeholder="输入互联网医院名称"></el-input></el-form-item><el-form-item label="数据来源" prop="internetBuilder"><el-selectv-model="dataForm.internetBuilder"placeholder="请选择数据来源"><el-option label="纳里" value="1"></el-option><el-option label="院方" value="2"></el-option><el-option label="自建" value="3"></el-option></el-select></el-form-item><div v-for="(item, i) in dataForm.configs" :key="i" class="area1"><!-- <div>序列{{ i + 1 }}</div> --><el-form-itemlabel="发布平台":prop="`configs.${i}.platform`":rules="{required: true,message: '发布平台不能为空',trigger: 'blur',}"><el-selectv-model="item.platform"placeholder="请选择发布平台"><el-optionv-for="itemC in channelList":key="itemC.typeKey":label="itemC.typeValue":value="itemC.typeKey"></el-option></el-select><!-- 增加 --><el-buttontype="primary"icon="el-icon-plus"size="small"v-show="i == 0"@click="addGLSetting"class="addDelBtn"></el-button><el-button@click="deleteGLSetting(item, i)"type="danger"size="small"icon="el-icon-minus"v-show="i == 0"></el-button><!-- 删除 --><el-button@click="deleteGLSetting(item, i)"type="danger"size="small"icon="el-icon-minus"class="addDelBtn"v-show="i != 0"></el-button></el-form-item><el-form-item label="应用类别" :prop="`configs.${i}.jumpType`"><el-select v-model="item.jumpType" placeholder="请选择"><el-optionv-for="item1 in appTypeList":key="item1.typeKey":label="item1.typeValue":value="item1.typeKey"></el-option></el-select></el-form-item><el-form-itemlabel="小程序appId":prop="`configs.${i}.jumpMiniId`"v-if="item.jumpType === '3'"><el-inputv-model="item.jumpMiniId"placeholder="输入小程序appId"></el-input></el-form-item><el-form-item label="跳转地址" :prop="`configs.${i}.jumpH5Url`"><el-inputv-model="item.jumpH5Url"placeholder="输入跳转地址"></el-input></el-form-item><el-form-item label="排序" :prop="`configs.${i}.sort`"><el-input v-model.number="item.sort"></el-input></el-form-item><el-form-item label="状态" :prop="`configs.${i}.status`"><el-selectv-model="item.status"placeholder="请选择是否有效"clearable><el-optionv-for="item2 in effective":key="item2.typeKey":label="item2.typeValue":value="item2.typeKey"></el-option></el-select></el-form-item></div><el-form-item><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="dataFormSubmit()">保存</el-button></el-form-item></el-form></el-dialog>
</template>
http://www.xdnf.cn/news/458191.html

相关文章:

  • 【Trae插件】从0到1,搭建一个能够伪装成网页内容的小说阅读Chrome插件
  • 交叉编译源码的方式移植ffmpeg-rockchip
  • 【学习心得】WSL2安装Ubuntu22.04
  • 前端npm的核心作用与使用详解
  • 【kafka】基本命令
  • Node.js 循环依赖问题详解:原理、案例与解决方案
  • 【hadoop】Kafka 安装部署
  • “傅里叶变换算法”来检测纸箱变形的简单示例
  • Android Coli 3 ImageView load two suit Bitmap thumb and formal,Kotlin(七)
  • MySQL 8.0 OCP 1Z0-908 101-110题
  • 【Conda】环境应用至JupyterLab
  • 使用java -jar命令指定VM参数-D运行jar包报错问题
  • 游戏引擎学习第281天:在房间之间为摄像机添加动画效果
  • 【虚幻引擎】UE5独立游戏开发全流程(商业级架构)
  • 什么是路由器环回接口?
  • 专项智能练习(加强题型)
  • OpenCV图像旋转原理及示例
  • IOS CSS3 right transformX 动画卡顿 回弹
  • 生产级编排AI工作流套件:Flyte全面使用指南 — Core concepts Tasks
  • day21:零基础学嵌入式之数据结构
  • X-R1:训练医疗推理大模型
  • AD 规则的导入与导出
  • W1R3S: 1.0.1靶场
  • 10.2 LangChain v0.3全面解析:模块化架构+多代理系统如何实现效率飙升500%
  • 团队项目培训
  • 题解:P12207 [蓝桥杯 2023 国 Python B] 划分
  • 编译OpenSSL时报错,Can‘t locate IPC/Cmd.pm in @INC perl环境
  • JVM方法区核心技术解析:从方法区到执行引擎
  • 什么是 NB-IoT ?窄带IoT 应用
  • 铜墙铁壁 - 服务网格的安全之道 (Istio 实例)