el-table 简单的行内编辑,单行可编辑
el-table 简单的行内编辑,单行新增修改删除,单行可编辑
·
<div class="btns" style="margin-bottom: 2vh;">
<el-button type="primary" icon="el-icon-plus" size="small" @click="addRow()">新 增</el-button>
</div>
<el-table :data="dataList" class="table-fixed" style="width: 100%">
<el-table-column prop="columnTest" label="示例字段" width="130">
<template slot-scope="scope">
<el-input v-model="scope.row.columnTest" :disabled="!(scope.row.isEdit || scope.row.isAdd)" />
</template>
</el-table-column>
<el-table-column prop="capitalAmount" align="center" label="操作" width="120">
<template slot-scope="scope">
<el-button @click="save(scope.row)" v-show="scope.row.isAdd" type="text" size="small" icon="el-icon-edit">保存(新增)</el-button>
<el-button @click="deleteRow(scope.$index)" v-show="scope.row.isAdd" type="text" size="small" icon="el-icon-delete">取消(新增)</el-button>
<el-button @click="update(scope.row)" v-show="scope.row.isEdit" type="text" size="small" icon="el-icon-edit">保存(修改)</el-button>
<el-button @click="cancel(scope.row)" v-show="scope.row.isEdit" type="text" size="small" icon="el-icon-delete">取消(修改)</el-button>
<el-button @click="edit(scope.row)" v-show="!scope.row.isEdit && !scope.row.isAdd" type="text" size="small" icon="el-icon-edit">编辑</el-button>
</template>
</el-table-column>
</el-table>
细分位表格上面的新增(新增空白行)按钮、行内的保存,取消,编辑等按钮。
点击新增->新增行,行可编辑(行内按钮 保存(新增),取消(新增)) ,点取消,删除行
点击新增->新增行,行可编辑(行内按钮 保存(新增),取消(新增)) ,点保存,执行新增逻辑,按钮变为编辑,行不可编辑
点编辑 -> 行可编辑 (行内按钮 保存(修改),取消(修改)),点取消,删除行,按钮变为编辑,行不可编辑
点保存,执行修改逻辑,按钮变为编辑,行不可编辑
需要给dataList绑定 isEdit,isAdd属性,已实现以上功能
data() {
return {
dataList:[]
}
addRow() {
let row = {
isEdit : false,
isAdd : true
}
this.dataList.push(row)
},
//新增取消 - 删除行
deleteRow(index) {
this.dataList.splice(index, 1)
},
//修改取消
cancel(row) {
row.isEdit = false
},
edit(row) {
row.isEdit = true
},
save(row) {
row.isEdit = false
row.isAdd = false
//保存逻辑
},
update(row) {
row.isEdit = false
//修改逻辑
},
更多推荐
已为社区贡献1条内容
所有评论(0)