element实现table当前行可编辑、保存
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;" :cell-style="changeColor" :header-cell-style="changeHeaderColor" :row-style="changRowColor" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column class="td-th" label="行政区划" width="120"> <template slot-scope="scope"> <el-input v-model="scope.row.date" :disabled="isEditObj[scope.$index].a"></el-input> </template> </el-table-column> <el-table-column prop="address" label="问题类型"> <template slot-scope="scope"> <el-input v-model="scope.row.name" :disabled="isEditObj[scope.$index].a"></el-input> </template> </el-table-column> <el-table-column prop="address" label="操作" width="282px"> <template slot-scope="scope"> <div v-show="isEditObj[scope.$index].a"> <el-button type="text" icon="el-icon-s-claim" size="small" @click="editUserInfo(scope.$index)">编辑 </el-button> | <el-button type="text" icon="el-icon-edit-outline" size="small" @click="details">详情 </el-button> | <el-button type="text" icon="el-icon-delete" size="small">删除</el-button> </div> <div v-show="!isEditObj[scope.$index].a"> <el-button type="text" icon="el-icon-s-claim" size="small" @click="checkEditUserInfo(scope.$index)">保存 </el-button> | <el-button type="text" icon="el-icon-edit-outline" size="small" @click="cancelEditUserInfo(scope.$index)">取消 </el-button> </div> </template> </el-table-column> </el-table>
2、设置:isEditObj: [],
3、
mounted() { for (let i in this.tableData) { let a = "edit"+i; this.isEditObj.push({ a:true }); } },
4、
editUserInfo(index) { this.isEditObj[index].a = false; },
checkEditUserInfo(index) { //编辑用户信息
this.isEditObj[index].a = true;
},
cancelEditUserInfo(index) {
this.isEditObj[index].a = true;
}