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