elementUI vue 动态渲染未知个输入框,并做未知个输入框的表单验证,动态新增删除输入框

30 篇文章 0 订阅
13 篇文章 0 订阅

//接口返回的数据结构
"data": {
		"basicInfo": {
		  xxx
		},
		"directionList": [
			{
				"customId": "",
				"paramValue": "",
			}
		],
	},
<div v-for="(item,index) in formData.directionList" class="direction">
              <div class="header">定向配置</div>
              <div class="content">
                <el-form-item :prop="`directionList.${index}.customId`" label="用户群" :rules="rules.directionList.customId">
                  <el-select v-model="formData.directionList[index].customId" size="mini">
                    <el-option v-for="(item,index) in userGroupList" :key="index" :value="item.basic.id" :label="item.basic.name" />
                  </el-select>
                </el-form-item>
                <el-form-item :prop="`directionList.${index}.paramValue`" label="下发值" :rules="rules.directionList.paramValue">
                  <el-input
                    v-model="formData.directionList[index].paramValue"
                    size="mini"
                  />
                </el-form-item>
              </div>
              <div class="deleteBtn"><i class="el-icon-delete" @click="deleteDirection(index)" />删除定向配置</div>
              <div><el-button type="primary" icon="el-icon-plus" size="mini" @click="addDirection">添加定向配置</el-button></div>
            </div>



//data
data(){
    return{
        formData: {
        basicInfo: {
          appId: '',
          paramKey: '',
          paramName: '',
          paramType: '',
          targetAppIds: []
        },
        directionList: [] // customId: '', paramValue: ''
      },
    }
}


//rules
rules:{
     directionList: {
          customId: [
            { required: true, message: '请选择用户群', trigger: 'change' }
          ],
          paramValue: [
            { required: true, message: '请输入下发值', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                this.validateFn(this.formData.basicInfo.paramType, { rule, value, callback })
              },
              trigger: 'blur'
            }
          ]
        }
}


//保存表单,提交的directionList参数为 
directionList: this.formData.directionList

//get回显数据,直接塞到formdata
getForm(id).then(res => {
          this.formData = res.data
        })


//删除动态的input
deleteDirection(index) {
      this.formData.directionList.splice(index, 1)
    },


//动态添加input
addDirection() {
      this.formData.directionList.push({
        customId: '',
        paramValue: ''
      })
    },

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值