由於表格由后台返回的數據，根據不同的類型，顯示不同的方式，
第一種方法：針對select，使用@change和$forceUpdate 來解決（無法解決input是動態生成的v-model的問題，可以使用下面的第二種方式）
<el-table-column v-for="(icolm,icolx) in icm.temColumn" :key="icolx" :prop="icolm.key" :label="icolm.name" :width="icolm.width" > <template slot-scope="scope"> <div v-if="icolm.key !='isflag'&&icolm.key !='role'">{{scope.row[icolm.key]}}</div> <div v-if="icolm.anthorkey &&icolm.anthorkey.indexOf('%select')>-1">{{renderColoumSelect(scope.row,icolm.anthorkey,'%select')}}</div> <!-- 是否的操作 --> <div v-if="icolm.key =='isflag'"> <el-radio-group v-if="opetype=='approval'" v-model="scope.row.isflag" disabled @change=radioChange(arguments,icm.datalists,scope.$index)> <el-radio label="1">是</el-radio> <el-radio label="2">否</el-radio> </el-radio-group> <div v-else> {{scope.row[icolm.key]=="1"?"是":"否"}} </div> </div> <!-- 對應的角色 --> <div v-if="icolm.key =='role'">{{roleObj[scope.row[icolm.key]]}}</div> </template>
</el-table-column>
由於表格的列是動態生成的，vue是監聽不到嵌套中的雙向綁定的值，所以，當我再頁面上切換單選或者是下拉的時候，頁面不會發生變化
這時需要進行強制刷新數據
/**
* arg - 表示radio變化時的默認參數
* item - 表示當前表格的data數據
* index - 當前修改的數據的索引
*/
radioChange(arg,item,index){ this.$set(item,index,item[index]); this.$forceUpdate() },
第二種方法（簡單快捷，一步到位）
一般情況是，我們的這個select和input等表單是放在v-for中，循環lists列表，v-model綁定的是循環出來的值
在我們動態新增了或者修改了lists，我們可以
let copy_data =JSON.parse(JSON.stringify(this.lists)); this.lists = []; this.lists= copy_data;
這里要注意，如果你的lists 是一個多維對象的話，使用數組的concat，slice或者Object.assign都不是深克隆
一定要使用對 對象進行深克隆的方式來進行對列表進行重新賦值
這種方式直接解決了所有動態生成的v-model的問題，也不需要對列表進行$set
第三種情況（上面兩種情況都不行 - 具體為啥我也不知道）
使用場景：依然是最上面的那個表格，新增一個編輯列頭的功能
使用$set,forceUpdate,以及重新賦值都不能更新視圖，后台打印數據是更新過的
為了實現更新inpput中的值，只能每次@input事件中，進行更新循環的key值，
<el-table-column v-for="(icolm,icolx) in icm.temColumn" :key="icolm.sign" :prop="icolm.key" :label="icolm.name" :width="icolm.width" min-width="140"> <template slot="header"> <div v-if="icolm.key =='role'"> {{icolm.name}} </div> <div v-else> <el-input v-model="icolm.name" style="width:78%;" @input="changeColumnName(index,icx,icolx)" @change="changeColumnName(index,icx,icolx)"> </el-input> <i class="el-icon-remove c-error m-r-l-10 c-p" title="移除當前列" @click="operateTable('deleteCol',index,icx,icolm.key)"></i> </div> </template> <template slot-scope="scope"> 1111 </template> </el-table-column>
changeColumnName(index,icx,icolx){ let this_ = this; this.$forceUpdate(); this.editableTabs[index].tableLists[icx].temColumn.forEach(item=>{ item.sign = generateMixed(6); }); this.$set(this.editableTabs[index].tableLists[icx].temColumn,icolx,this.editableTabs[index].tableLists[icx].temColumn[icolx]) },
這樣就可以實現 input輸入
缺點：一次只能輸入一個，因為列表進行了刷新，很不方便使用