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

最新推荐文章于 2024-04-26 10:14:46 发布

Do_It_Better

最新推荐文章于 2024-04-26 10:14:46 发布

阅读量1.2k

点赞数 1

分类专栏：功能实现 js vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/chose_doit/article/details/125711894

版权

功能实现同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

vue

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: ''
      })
    },