vue+element ui动态增加表单项并支持删除

yyh123456hhh

已于 2023-07-04 15:11:18 修改

阅读量1.7k

点赞数 4

分类专栏： VUE 文章标签： vue.js ui javascript 前端

于 2023-07-03 10:44:13 首次发布

本文链接：https://blog.csdn.net/yyh123456hhh/article/details/131481954

版权

需求：点击加号动态添加表单项站点和通道，当站点和通道有多个时允许删除，只有一个时不能删除，删除按钮隐藏

先来看看效果吧

默认初始效果：

点击加号动态新增表单项后：

上代码：

<template>
 <div class="select-site-ipc" v-for="(item,index) in alarmRuleForm.alarmSourceArray" 
  :key=index>
       <div class="site-box">
         <el-form-item class="site-item" :prop="'alarmSourceArray.' + index + '.siteId'" :rules="[{ required:true,message:$translate('errorCode.33042'), trigger: 'change' }]">
            <el-select
              ref='sceneSelect