element UI —— form表单点击一次添加一行和删除一行(嵌套类型)

element UI —— form表单点击一次添加一行和删除一行(嵌套类型)

1、效果图

2、代码

结构

<el-form :model="form" class="form" ref="ruleForm" :rules="rules" label-width="180px">
    <el-form-item label="任务名称" prop="checkServiceName">
        <el-input v-model="form.checkServiceName" size="small" style="width:220px" clearable  placeholder="请输入检查任务名称"></el-input>
    </el-form-item>
    <el-form-item label="图层配置：" prop="name">
    </el-form-item>
    <el-row
        v-for="(item, index) in form.checkConfig"
        :key="index"
        style="margin-left: 180px;margin-right: 200px;background-color: #ccc;padding-top: 20px;margin-top: -20px;margin-bottom: 10px;"
      >
        <el-col :span="21">
          <el-form
            :rules="rules"
            :inline="true"
            :model="form"
            ref="formA"
            label-width="120px"
          >
            <el-form-item label="产品名称：" >
              <el-select
                v-model="item.catalogName"
                placeholder="产品名称"
                style="width: 16vw"
                @change="changeCatalogName"
              >
                <el-option
                  v-for="item1 in catalogNameList"
                  :key="item1.catalogName"
                  :value="item1.catalogName"
                  >{{ item1.catalogName }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="产品版本：">
              <el-select
                v-model="item.productVersion"
                placeholder="产品版本"
                style="width: 16vw"
                @change="changeProductVersion"
              >
                <el-option
                  v-for="item2 in productVersionList"
                  :key="item2.productVersion"
                  :value="item2.productVersion"
                  >{{ item2.productVersion }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-form>
          <el-row  v-for="(m, n) in item.layerConfig" :key="n">
            <el-form
              :rules="rules"
              :inline="true"
              :model="form"
              ref="form"
              label-width="200px"
            >
              <el-form-item label="图层key：">
                <el-select
                  v-model="m.layerKey"
                  placeholder="图层key"
                  style="width: 11.8vw"
                >
                  <el-option
                    v-for="item3 in layerKeyList"
                    :key="item3.value"
                    :value="item3.layerKey"
                    >{{ item3.layerKey }}</el-option
                  >
                </el-select>
              </el-form-item>
              <el-form-item label="图层id：">
                <el-select
                  v-model="m.layerName"
                  placeholder="图层id"
                  style="width: 11.8vw"
                >
                  <el-option
                    v-for="item4 in layerList"
                    :key="item4.layerName"
                    :value="item4.layerName"
                    >{{ item4.layerName }}</el-option
                  >
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button class="el-icon-circle-plus-outline" style="margin-left:60px;color: #409eff" v-if="n == 0" @click="addLayer(item.layerConfig)"><span style="margin-left:6px">添加图层</span></el-button>
                <el-button class="el-icon-remove-outline"   v-if="n != 0"  @click="delLayer(item.layerConfig,n)" style="color: #f56c6c;width: 120px;margin-left:60px"></el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-col>
        <el-col :span="2">
          <el-button
            class="el-icon-plus"
            v-if="index == 0"
            style=" color: #67c23a;"
            @click="addCatalog"
          ><span style="margin-left:6px">添加产品</span> </el-button>
          <el-button
            class="el-icon-minus icon-font"
            v-if="index != 0"
            style="color: #f56c6c;width: 120px;"
            @click="delCatalog(index)"
          ></el-button>
        </el-col>
   </el-row>
   <el-form-item label="规则号ID" prop="checkRules">
      <el-input v-model="form.checkRules" placeholder="请英文逗号隔开"  rows="2" type="textarea" style="width:50%"></el-input>
   </el-form-item>
   <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="backToList">取消</el-button>
   </el-form-item>
</el-form>

3、数据

<script>
export default {
  data () {
    return {
      catalogNameList: [],
      productVersionList: [],
      layerKeyList: [{
        value: 0,
        layerKey: '图层key1'
      }, {
        value: 1,
        layerKey: '图层key2'
      }],
      layerList: [],
      byLevelList: [],
      form: {
        checkConfig: [{ catalogName: '', productVersion: '', layerConfig: [{ layerKey: '', layerName: '' }] }],
        checkServiceName: '',
        checkType: '',
        optionsA: [{
          value: '选项1',
          label: '黄金糕'
        }],
        optionsB: [{
          value: '选项1',
          label: '黄金糕'
        }],
        desc8: '',
        adminCode: '',
        partitionNames: '',
        checkRules: '',
        taskDesc: ''
      },
      levelParam: 1,
      rules: {
        checkServiceName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        checkRules: [
          { required: true, message: '请输入规则号ID', trigger: 'blur' }
        ]
      }
    }
  },
  watch: { },
  mounted () {
    this.getCVLList()
  },
  methods: {
    onSubmit () {},
    backToList () {
      this.$router.back();
    },
    /**
     * 添加产品
     */
    addCatalog () {
      this.form.checkConfig.push({
        catalogName: '',
        productVersion: '',
        layerConfig: [{ layerKey: '', layerName: '' }]
      });
    },
    /**
     * 删除产品
     * @param {number} index - 当前行产品下标
     */
    delCatalog (index) {
      this.form.checkConfig.splice(index, 1);
    },
    /**
     * 添加图层
     * @param {array} layerConfig - 添加的图层集合
     */
    addLayer (layerConfig) {
      layerConfig.push({
        layerKey: '',
        layerName: ''
      });
    },
    /**
     * 删除图层
     * @param {array} layerConfig - 操作所在图层集合
     * @param {number} n - 当前行图层下标
     */
    delLayer (layerConfig, n) {
      layerConfig.splice(n, 1);
    },
    /**
     *  获取产品信息  名称、版本、图层id
     *  @returns {any}
     */
    getCVLList () {
      ajax.NPGet('check_getCVLList').then(res => {
        this.catalogNameList = res.all
      })
    },
    /**
     * 切换产品名称
     * @param {*} val  选中的产品名称
     */
    changeCatalogName (val) {
      this.catalogNameList.forEach(item => {
        if (item.catalogName === val) {
          this.productVersionList = item.productVersionList
        }
      });
    },
    /**
     * 切换产品版本
     * @param {*} val  选中的产品版本
     */
    changeProductVersion (val) {
      this.productVersionList.forEach(item => {
        if (item.productVersion === val) {
          this.layerList = item.layerList
        }
      })
    }
  }
}
</script>