循环出来的select选择时互不影响；页面文本框显示初始化的值，编辑时回显编辑值，但不影响初始值。只有最后确认才能调用接口，将初始值更改为编辑值

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/89329179

1、思路：将初始值 rawData 拿到后，自动以一个变量 saveDataTwo= 初始值；页面进行循环saveDataTwo，将里面需要回显的value值取出来赋值给自定义的变量 saveDataTre

2、在取消编辑时： saveDataTre = saveDataTwo；

3、确定编辑时： saveDataTwo = saveDataTre

4、最后确定全部编辑完成时调用接口前将传的参数赋值也就是将初始值进行赋值 this.rawData =

this.sendContents

<template>
    <div>
        <el-table :data="sendContents">
            <el-table-column>
                <template slot-scope="scope">
                    <span @click="showAlert(scope.$index,scope.row)">{{scope.row}}</span>      
                    <span v-if="scope.row == ''"> - </span>         
                </template>
            </el-table-column>
        </el-table>
        <!-- dialog -->
        <el-dialog :visible.sync="dialogShow" :close-on-click-modal="false" 
:before-close="AddCancel">
            <el-table :data="saveDataTwo">
                <el-table-column>
                    <template slot-scope="scope">
                        <span>{{scope.row}}</span><br>
                        <span>关键词：{{scope.row.key}}</span>
<!-- 这里动态绑定的scope.row.fileds 是我自己自定义添加上去的，所以在最后不管是取消编辑还是确定                
           编辑的时候都要将scope.row.fileds 删掉或-->
                        <el-select class="selectStyle" v-model="scope.row.fileds" 
                                 placeholder="插入自定义字段" 
                                    filterable blur 
                                    @change="insertField(scope.$index,scope.row.fileds)">
                            <el-option v-for="(item,value) in options" :key="value" 
                                :label="item.label" :value="item.lable">
                            </el-option>
                        </el-select>
                        <br><br>
                        <textarea name="" id="" cols="60" rows="5" v- 
                             model="saveDataTre[scope.$index]"></textarea>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddCancel">取 消</el-button>
                <el-button type="primary" @click="AddSure">确 定</el-button>
            </span>
        </el-dialog>
        <el-button @click="editSure">
            确定
        </el-button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dialogShow:false,
            options:[
                {value:1,lable:'mobile'},{value:2,lable:'name'},{value:3,lable:'phone'},{value:4,lable:'email'}
            ],
            rawData:[//初始数据 项目中应该是ajax获取去的数据
                [{key:'keyword',value:'${mobile}'}],
                [{key:'remark',value:''},{key:'color',value:'${name}'}],
                [],
                [{key:'hellow',value:'${date}'},{key:'scoll',value:'${email}'}],
                [{key:'keyword',value:''}],
               
            ],
            sendContents:[],//为了不改变原始数据，将原始数据暂时装一下
            saveDataTwo:[],//大数组里面的小数组
            saveDataTre:[],//小数组里面的{}中value的拼接值
        }
    },
    mounted(){
        this.sendContents = this.rawData;//将初始值赋值给自定义的变量
    },
    methods:{
        insertField(index,label){
            console.log(index,label);
            this.saveDataTre[index] += '${'+this.saveDataTwo[index].fileds +'}'
        },
        showAlert(index,row){
            this.dialogShow = true; 
            this.saveDataTwo = row;
            for(let i of row){
                this.saveDataTre.push(i.value)
            }
        },
AddCancel(){
    for(let [index,item] of this.saveDataTwo.entries()){
        //取消编辑时赋值
        this.saveDataTre[index] = item.value;
    }
    this.saveDataTwo.forEach(item=>{//方法一使用 in 判断{}中是否有指定属性值
        if('fileds' in item == true){
        // item.fields_id = '' //item{}中的fields_id 赋值为空
        delete item.fileds //删掉item{}中的fields_id
        }
        })  
        this.dialogShow = false; 
        this.saveDataTre = [];//点击取消的时候将文本框中的内容清空
},
        AddSure(){
//暂时确定编辑时赋值      
            for(let [index,item] of this.saveDataTwo.entries()){
                item.value = this.saveDataTre[index]
            }
            this.saveDataTwo.forEach(item=>{
//方法二使用{}的属性hasOwnProperty()判断对象中是否有属性值 
		        if(item.hasOwnProperty("fileds") == true){
				    // item.fields_id = '' //item{}中的fields_id 赋值为空
					delete item.fileds //删掉item{}中的fields_id
				}
			})
            this.dialogShow = false;
            this.saveDataTre = [];//点击确定的时候将文本框中的内容清空
        },
        editSure(){
//只有最后点击确定时候才会更改初始值
          this.rawData = this.sendContents;
            console.log(this.rawData)
          //ajax....
        },
    }
}
</script>

初始化页面状态图1 点击出现弹窗，在效果中以点击第四个为例，对应显示value