配置params

<!-- html部分：-->

<template>
  <div>
    <div style="margin-bottom: 15px;">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
      .....
        <el-breadcrumb-item> </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-container>
      <el-main style="padding-left: 0;padding-top: 0;margin-top: 10px">
        <div>
          <h3>新建监控插件&nbsp;</h3>
          <el-form ref="addform" :model="addform" v-loading="sformLoading" >
            <el-form-item prop="name" label="插件名称:"  label-width="35%" style="width: 75%">
              <el-input v-model="addform.name" ></el-input>
            </el-form-item>

            <el-form-item prop="scriptPath" label="插件服务器路径:"  label-width="35%" style="width: 75%" >
              <el-input placeholder="填写插件所在服务器绝对路径，后续支持直接上传插件" v-model="addform.scriptPath"></el-input>
            </el-form-item>

              <el-form-item prop="scriptType" label="插件类型:"  label-width="35%" style="width: 75%">
                <el-select v-model="addform.scriptType" style="width: 200px" >
                  <el-option
                    v-for="item in scriptTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

            <el-form-item prop="desc" label="插件描述:"  label-width="35%" style="width: 75%">
              <el-input placeholder="支持html样式" type="textarea" :rows="3" v-model="addform.desc" ></el-input>
            </el-form-item>

            <el-row  v-for="(param, index) in addform.params" :key="index" style="margin-top: 30px;" type="flex" :gutter="20">
              <el-col :span="15" :offset="4">
                <el-card class="box-card" >
                  <div slot="header" class="clearfix">
                    <span>插件配置{{index}}</span>
                    <el-button @click.prevent="removeDemo(param)" style="color: red;float: right; padding: 3px 0" type="text">删除</el-button>
                    <!--        <el-button @click=" " style="float: right; padding: 3px 0;margin-right: 10px" type="text">编辑</el-button>      -->
                  </div>

                  <el-form class="card-box" :model="param"  ref="showAddForm" label-width="125px"
                           style="margin: 0 auto;width: 100%;" >

                    <el-form-item prop="key" label="参数名:" style="width: 80%" >
                      <el-input placeholder="参数key，如“ringid“" v-model="param.key" size="small" width="50%" ></el-input>
                    </el-form-item>

                    <el-form-item prop="desc" label="描述:" style="width: 80%">
                      <el-input placeholder="支持html样式" type="textarea" :rows="3" v-model="param.desc" size="small" width="50%" ></el-input>
                    </el-form-item>

                    <el-form-item prop="placeholder" label="参数示例:" style="width: 80%">
                      <el-input placeholder="用于参数输入框阴影显示，即html的placeholder标签" type="textarea" :rows="3" v-model="param.placeholder" size="small" width="50%" ></el-input>
                    </el-form-item>

                    <el-form-item prop="required" label="是否必填:" style="width: 90%">
                      <el-radio-group v-model="param.required">
                        <el-radio :label="0">非必填</el-radio>
                        <el-radio :label="1">必填</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item prop="status" label="类型:" style="width: 80%">
                      <el-radio-group v-model="param.type" class="el-radio" >
                        <el-radio :label="0" >普通文本</el-radio>
                        <el-radio :label="1" >上传文件</el-radio>
                        <el-radio :label="2" >单选文本框</el-radio>
                        <el-radio :label="3" >多选文本框</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <div v-for="(item, index2) in param.valueConfig" :key="index2" v-if="param.type == 3 || param.type == 2" v-show="index2>-1">
                      <el-row>
                        <el-col :span="11">
                            <el-form-item  label="name:"  :prop="'valueConfig.' + index2 +'.name'" >
                              <el-input v-model="item.name" size="small" width="200px" ></el-input>
                          </el-form-item>
                        </el-col>

                        <el-col :span="11">
                          <el-form-item :prop="'valueConfig.' + index2 +'.value'" label="value:" >
                            <el-input v-model="item.value" size="small" width="220px" ></el-input>
                            <span v-if="param.type == 3 ||param.type == 2">

                      <el-button @click.prevent="remove(index, index2)" icon="el-icon-delete" v-show="index2>0" type="text" >删除</el-button>
                    </span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>

                    <el-form-item v-if="param.type == 3 || param.type == 2">
                      <el-button class="el-icon-plus" style="width: 100px;cursor: pointer; border: 1px dashed  #dcdfe6" size="small"
                                 @click="addDomain(index)" plain>增加
                      </el-button>
                    </el-form-item>

                  </el-form>
                </el-card>

              </el-col>
            </el-row>

            <el-row style="margin-top: 30px;" type="flex" :gutter="24">
              <el-col :span="12" :offset="4">
                <div style="margin-top: 20px">
                  <el-button class="el-icon-plus" style="width: 300px;cursor: pointer; border: 1.5px dashed  #dcdfe6" size="small"
                             @click="AddConfig" plain>增加新配置
                  </el-button>
                </div>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center" style="margin-top: 30px" >
              <el-button type="primary" @click="editDataInfo('addform')" :loading="submitLoading" size="large">保存
              </el-button>
              <el-button @click="backList" size="large">取 消</el-button>
            </el-row>

          </el-form>

        </div>
      </el-main>
    </el-container>

  </div>
</template>

//js部分：

<script>
import {jiekou} from "......";

export default {
  data() {
    return {
      valueConfig: [{
        value:'',
        name:''
      }],
      editConfigView:false,
      formLoading:false,
      sformLoading:false,
      submitLoading:false,
      saveAddLoading:false,
      pid: this.$route.query.pid,
      userDataInfo: {
        key:'',
        filename:null,
        desc:'',
        placeholder:'',
        required: null,
        type: null,
        valueConfig:[],
        value:'',
        label:''
      },
      scriptTypes:[ {id: 1, name:'python3插件'},{id: 2, name:'jar插件'}],
      addform: {
        name:'',
        scriptPath:'',
        scriptType:'',
        desc:'',
        params: [
          {
            key:'',
            desc:'',
            placeholder:'',
            filename:null,
            required: null,
            type: null,
            valueConfig:[],
            value:'',
            label:''
          },
        ]
      },

    };
  },

  methods: {
    addDomain(index) {
      // console.log(this.addform.params)
      this.addform.params[index].valueConfig.push({
        value:'', //需要动态添加的表单项
        name:'',     //需要动态添加的表单项
      })
      // if(this.addHotConfig.valueConfig === undefined) {
      //  this.addHotConfig.valueConfig = []
      // }
    },

    backList() {
      this.$router.push({
        path: 'monitor_plugin'
      })
    },

    AddConfig() {
      this.addform.params.push({
        key:'',
        desc:'',
        placeholder:'',
        required: null,
        type: null,
        valueConfig:[],
        value:'',
        label:'',
        filename:null
      })//需要动态添加的表单项
    },

    removeDemo(param) {
      var index = this.addform.params.indexOf(param)
      if (index !== -1) {
        this.addform.params.splice(index, 1)
      }
    },

    remove(index, index2) {
      this.addform.params[index].valueConfig.splice(index2, 1)
    },

    editDataInfo(formName,check) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (check == 0) {
            this.submitLoading = true;
          }
          this.contentColor = "";
          this.contentResult = "";
          let param = Object.assign({}, this.addform);
          jiekou(param).then(resp => {
            if (resp.retcode === '0000') {
              if (check == 1) {
                if (resp.desc.indexOf("成功") >= 0) {
                  this.contentColor = "color:green;";
                  this.contentResult = "检查通过";
                } else {
                  this.contentColor = "color:red;";
                  this.contentResult = resp.desc;
                }
              } else {
                this.$message.success('保存成功');
                this.submitLoading = false;
                this.$router.replace({path: 'monitor_plugin'});
              }
            }
          }).catch(res => {
            this.submitLoading = false;
          });
        }
      });
    },

  }
}
</script>

效果图：