客户又提需求了（/微笑）
不管需求是啥，为难我就是无理取闹，哼！
原本就是动态生成的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