如何实现el-form-item里的循环项在没有点击确认前不同步在页面上

el-form-item里的循环条件每次编辑操作时都会同步展示在页面上（在没有点击保存的情况下），而且点击取消按钮后还会展示在页面上，如何实现点击确认才展示

代码如下

<template>
  <div>
    <el-table :data="tableData">
        <el-table-column label="tags" prop="tags">
            <template slot-scope="scope">
                <el-tag v-for="item in scope.row.tags" :key="item.index">{{ item.key + item.value }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="handleUpdate(scope.row)">操作</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="title" :visible.sync="open">
        <el-form :model="form" ref="form">
            <el-form-item label="tags" prop="tags">
                <el-button @click="addInput">添加</el-button>
                <div v-for="(item,index) in form.tags" :key="index">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-input v-model="item.key" placeholder="请输入key"></el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="item.value" placeholder="请输入value"></el-input>
                        </el-col>
                        <el-col :span="7" style="float: right">
                            <el-button @click="removeInput(index)">删除</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="submitForm">确认</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
            open:false,
            form:{},
            input1:'',
            input2:'',
            tableData:[
                {
                    tags:[
                        {key:'cpu',value:''}
                    ]
                },
                {
                    tags:[]
                }
            ]
        }
    },
    methods:{
        addInput() {
            this.form.tags.push({key:'',value:''})
        },
        removeInput(index) {
            this.form.tags.splice(index, 1); 
        },
        handleUpdate(row){
            this.open = true
            this.form = {...row}
            console.log(this.form)
        },
        submitForm(){
            console.log(this.form)
        }
    }
}
</script>

数据绑定用v-bind单向绑定；只有在赋值后才会在输入框内显示出来

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7450406
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：el-form：一行el-form-item内多个输入框的校验---【一个表单校验内的多个校验写法】
• 除此之外, 这篇博客: 怎么在el-form-item的后面加提示信息中的 解决方案： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 直接上代码：

          <el-form-item label="按占有时长计费" :label-width="formLabelWidth" prop="ownTimeFlag">
            <template slot="label">
              <span>按占有时长计费
                <el-tooltip class="item" effect="dark" placement="right">
                  <i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i>
                  <div slot="content">
                    <p>是否按占有时长计费(后付费生效)：</p>
                    <p>选择是：计量数据大于0，将会忽略计量数据与公式的计算，直接计算整个时段(计量周期)费用。如：按日月结选择是，用1秒也按1天计费。</p>
                    <p>选择否：计量数据与配置的公式进行计算。</p>
                  </div>
                </el-tooltip>
              </span>
            </template>
            <el-radio-group v-model="createOrEditeForm.ownTimeFlag">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
  

  效果如下：