vue+element-ui 修改动态生成的表格（el-table）中的数据

客户又提需求了（/微笑）
不管需求是啥，为难我就是无理取闹，哼！
原本就是动态生成的el-table表格，里面的数据还要修改。意味着要修改的字段名都是动态的，我需要动态的声明input框绑定的变量，其实本来以为就那么回事儿，就跟以前做得差不了太多，结果搞了一天！！！虽然是实现了，但至今没弄明白我遇到的问题是怎么肥四。

<!--显示数据表格-->
 <div class="table_common_container lsz_content-load active-table" style="height: 100%">
      <el-table v-show="show_table" border :data="data_list" v-loading="loading" element-loading-text="loading"  @selection-change="handleSelect" height="100%" >
        <el-table-column prop="selected" type="selection" width="40" v-model="multipleSelection">
        </el-table-column>
        <el-table-column v-for="(item,index) in table_labels" :label="item" width="200" :prop="table_props[index]" :key="index" show-overflow-tooltip></el-table-column>
      </el-table>

      <el-table v-show="!show_table" border :data="null_arr" v-loading="loading" element-loading-text="loading" height="100%" >
        <el-table-column v-for="(item,index) in null_arr" :label="item" width="200" :prop="table_props[index]" :key="index" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

<!--编辑弹框-->
    <el-dialog :title="$t('search_data.action.update')" v-if="is_change_data" :visible.sync="is_change_data"  width="450px">
      <div>
        <el-form :model="change_data" ref="change_data" label-width="120px" :rules="rules">
          <el-form-item  v-for="(item,index) in table_labels" :key="index" :label="item" prop="type_code" style="width: 95%;display: inline-block;" >
            <el-input  v-model="cloneMultipleSelection[0][change_props[index]]"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmChange">{{$t('button.confirm')}}</el-button>
            <el-button @click="reset(change_data)">{{$t('button.cancel')}}</el-button>
        </span>
    </el-dialog>

用了el-table自带的CheckBox来实现选中表格中的数据进而实现修改。
将选中的行的数据存入multipleSelection(是一个对象数组)
原本想像之前项目中实现修改一样，将修改的数据绑定在一个对象change_data中，然后change_data先赋值为multipleSelection[0]里相应的值，我甚至用了深拷贝先将multipleSelection赋值给另一个变量cloneMultipleSelection，为了在修改的时候不会影响multipleSelection，但我发现事情并没有那么简单。

//这里是给编辑页面获取原始值的代码
this.is_change_data=true
this.cloneMultipleSelection=this.deepClone(this.multipleSelection)
this.change_props=this.deepClone(this.table_props)
console.log(this.cloneMultipleSelection[0])
for(let item in this.cloneMultipleSelection[0]){
this.change_data[item]=this.cloneMultipleSelection[0][item]

//深拷贝方法
 deepClone(obj){
            var o;
            // 如果  他是对象object的话  , 因为null,object,array  也是'object';
            if (typeof obj === 'object') {
              // 如果  他是空的话
              if (obj === null) {
                o = null;
              } else {
                // 如果  他是数组arr的话
                //console.log(obj instanceof Array)
                if (obj instanceof Array) {
                  o = [];
                  for (var i = 0, len = obj.length; i < len; i++) {
                    o.push(this.deepClone(obj[ i ]));
                  }
                } else { // 如果  他是对象object的话
                  o = {};
                  for (var j in obj) {
                    o[ j ] = this.deepClone(obj[ j ]);
                  }
                }
              }
            } else {
              o = obj;
            }
            return o;
        },

<el-dialog :title="$t('search_data.action.update')" v-if="is_change_data" :visible.sync="is_change_data"  width="450px">
<!--我只要在这里不加v-if，数据表格就无法正常显示数据。我的数据显示都是之前做得妥妥的，没任何毛病-->


 <el-form-item  v-for="(item,index) in table_labels" :key="index" :label="item" prop="type_code" style="width: 95%;display: inline-block;" >
            <el-input  v-model="cloneMultipleSelection[0][change_props[index]]" autocomplete="off"></el-input>
</el-form-item>
<!--然后这里v-model改为v-model="change_data[change_props[index]]"表格就可以正常显示数据，但是！！！修改数据的时候，input框的值不能修改！人间迷惑-->

然后el-dialog的显示隐藏好像必须要通过:visible.sync来实现，所以我用了v-if，还用了:visible.sync