循环添加Dom

以vue-elementUI为例:

          <el-col :span="20">
            <el-form-item label="详细信息" required>
              <el-row class="gray-style">
                <el-col :span="20">
                  <div class="detail-style">
                    <span>信息名:</span>
                    <span>信息值:</span>
                  </div>
                </el-col>
                <el-col :span="20" style="max-height: 149px;overflow-y: auto">
                  <div class="detail-style" v-for="(item,index) in form.msgDescs" :key="index">
                    <el-input style="margin: 5px" v-model="item.msgKey"  @keyup.native="btKeyUp" show-word-limit maxlength="10" placeholder="长度10个汉字以内"  clearable/>
                    <el-input style="margin: 5px" v-model="item.msgValue" show-word-limit maxlength="20" @keyup.native="btKeyUp" placeholder="长度30个汉字以内（支持id转译）" clearable/>
                    <el-button type="text" @click="deleteItem(item)">删除</el-button>
                  </div>
                </el-col>
              </el-row>
              <el-row class="gray-style">
                  <el-button type="text" @click="addFn"><i class="el-icon-plus" />添加一条</el-button>
              </el-row>
            </el-form-item>
          </el-col>

data() {
    return {
      id: this.$route.params.id,
      form: {
        id: null,
        msgDescs: [{msgKey: null, msgValue: null,id:0}],// 详细信息
    }
  },
  methods: {
  // 只能输入汉字、英文、数字
    btKeyUp(e) {
      e.target.value = specialChar(e.target.value)
    },
  // 删除详细信息单条
    deleteItem(item) {
      this.form.msgDescs = this.form.msgDescs.filter(i => i.id !== item.id);
    },
  // 添加dom操作
    addFn() {
      const id = (last(this.form.msgDescs).id + 1) || 0;
      this.form.msgDescs = [
        ...this.form.msgDescs,
        { id,msgKey: null, msgValue: null }
      ];
    },
}

效果如下：

image.png