循序el-form-item并push一行新的

 

      <el-col>
          <el-form-item label="添加层级(性质)" style="color:blue;">
            <div @click="addItem">
              <i class="el-icon-edit"></i>
              <span>添加层级</span>
            </div>
          </el-form-item>
      </el-col>

 

 思路：所有需要循环的el-form-item用一个大的el-col包裹起来，在el-col上面循环数组

<el-col class="hierlist" v-for="(item, index) in dataForm.datalist" :key="item.index">
          <el-form-item prop="baseLevels">
            <span>等级:</span>
            <el-select
              style="width: 180px;"
              v-model="item.baseLevels"
              placeholder="请选择"
            >
              <el-option v-for="i in baseLeve" :key="i.levelId" :label="i.name" :value="i.levelId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="projectLevels">
            <span>层级名称:</span>
            <el-input
              style="width: 230px;"
              size="small"
              v-model="item.projectLevels"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="sort">
            <span>排序:</span>
            <el-input
              style="width: 80px; margin-right: 10px;"
              size="small"
              v-model="item.sort"
              placeholder="请输入"
            />
            <el-button type="text" size="small" @click="removeItem(item,index)">删除</el-button>
          </el-form-item>
   </el-col>

//data
     dataForm: {
        name:"",
        intro:"",
        datalist: [{ baseLevels: "", projectLevels: "",sort:""}]
      },
      baseLeve: [
        {
          levelId: 1,
          name: "全国"
        },
        {
          levelId: 2,
          name: "省级"
        },
        {
          levelId: 3,
          name: "理事、市级代理（一级）"
        },
        {
          levelId: 4,
          name: "区县级独家代理（二级）"
        },
        {
          levelId: 5,
          name: "单位机构、学校、青少年活动中心、个人工作室（三级）"
        }
      ],

//addItem方法----添加层级
  addItem() {
      this.dataForm.datalist.push({});
  },

//removeItem方法----删除添加的层级
  removeItem(item, index) {
     this.datalist.dataForm.splice(index, 1);
  }

//css
<style scoped>
.hierlist {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  float: right;
  flex-wrap: wrap;
}
</style>