element实现table当前行可编辑、保存
发布时间:2020-12-13 22:43:17 所属栏目:Linux 来源:网络整理
导读: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-tab
<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) { //编辑用户信息 cancelEditUserInfo(index) { this.isEditObj[index].a = true;} (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |