vue的table，直接在table上添加行，编辑行。
特别提醒
在网上有些案例中，有些bug，比如，点击编辑之后，虽然属性都设置进去了，但是编辑框不出来，根据经验，摸索出来的解决方案是对主键进行重新设置，比如这里的id重新设置还原之后，即可解决bug。
row.id=row.id+" ";
row.id=row.id.trim();
1、代码
通过在行上添加一个变量来控制是新增，还是编辑，或者是显示。
下面这一段js代码，定义了几个属性
1、start，通过设置start来处理判断
start == 0是新建，start==1是编辑，start=undefined是显示。
2、hasUnSaveItem来判断是否有未保存的编辑项。
3、hasUnSaveItemIndex来判断未保存的编辑项的索引号
//start == 0的时候，新建，start==1的时候编辑
isAddDisplay(row) {
return row.start != undefined && row.start == 0;
},
isEditDisplay(row) {
return row.start != undefined && row.start == 1;
},
isAddOrEditDisplay(row) {
return row.start != undefined && (row.start == 0 || row.start == 1);
},
setAdd(row, index) {
row.start = 0;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
setEdit(row, index) {
row.start = 1;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
quitEdit(row, index){
row.start = undefined;
this.hasUnSaveItem = '';
this.hasUnSaveItemIndex = '';
},
下面是整个页面的完整代码
<template>
<div class="app-container">
<div class="module-title"> 管理页面 </div>
<el-row class="mt20 mb10">
<el-col :span="24" class="toolbar">
<el-button type="primary" @click="handleAdd">添加</el-button>
</el-col>
</el-row>
<el-table class="tablelist" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
<el-table-column width="50" header-align="center">
<template slot-scope="{row,$index}">
<span>{{$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" min-width="120px">
<template slot-scope="scope">
<el-input v-model="vo.name" v-if="isAddOrEditDisplay(scope.row)" style="width:90%;"></el-input>
<span v-else>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="166px" class-name="small-padding fixed-width">
<template slot-scope="{row,$index}">
<el-button type="primary" plain
@click="isAddOrEditDisplay(row)?handleSave(row):handleUpdate(row, $index)"
>{{isAddOrEditDisplay(row)?"保存":"修改"}}</el-button>
<el-button type="danger" plain
@click="isAddOrEditDisplay(row)?handleCancel(row, $index):handleDelete(row)"
>{{isAddOrEditDisplay(row)?"取消":"删除"}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- -->
</div>
</template>
<script>
export default {
name: "GroupUserR",
data() {
return {
// 遮罩层
loading: true,
tempList:[{name:'',start:0}],
list2:[],
hasUnSaveItem:'',//如果有编辑的项未保存，就提示有未保存的项。
hasUnSaveItemIndex:'',//未保存的序号。
vo: {
name:"",
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
// this.getList();
this.loading = false;
},
activated() {
const time = this.$route.query.t;
if (time != null && time != this.uniqueId) {
this.uniqueId = time;
this.resetQuery();
this.getList();
}
},
methods: {
//start == 0的时候，新建，start==1的时候编辑
isAddDisplay(row) {
return row.start != undefined && row.start == 0;
},
isEditDisplay(row) {
return row.start != undefined && row.start == 1;
},
isAddOrEditDisplay(row) {
return row.start != undefined && (row.start == 0 || row.start == 1);
},
setAdd(row, index) {
row.start = 0;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
setEdit(row, index) {
row.start = 1;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
quitEdit(row, index){
row.start = undefined;
this.hasUnSaveItem = '';
this.hasUnSaveItemIndex = '';
},
resetTempList() {
this.tempList=[{name:'',start:0}];
},
resetVo() {
this.vo = {
name:""
};
},
getList() {
this.loading = true;
let _this = this;
getRolePermissions(this.queryParams).then(response => {
if(response.code == 200 && response.data.length > 0) {
_this.list2 = response.data;
});
_this.list = [].concat(_this.list2);
}
this.loading = false;
}).catch(e=>{
this.loading = false;
});
},
/** 新增按钮操作 */
handleAdd() {
if(this.hasUnSaveItem) {
this.msgInfo("有编辑项未保存，请保存后操作。");
return;
}
this.resetVo();
this.resetTempList();
this.list = this.tempList.concat(this.list2);
this.setAdd(this.list[0], 0);
},
/** 保存 */
handleSave(row) {
let _this = this;
let pars = {
id: row.id,
name: _this.vo.name
};
if (!row.id && row.id != undefined) {
updateRolePermission(pars).then(response => {
this.msgSuccess("修改成功");
this.getList();
}).catch(e=>{
this.resetVo();
this.handleDelete(row);
});
} else {
addRolePermission(pars).then(response => {
this.msgSuccess("添加成功");
this.getList();
}).catch(e=>{
this.resetVo();
this.handleDelete(row);
});
}
},
/** 修改按钮操作 */
handleUpdate(row, index) {
if(this.hasUnSaveItem && this.hasUnSaveItemIndex != index) {
this.msgInfo("有编辑项未保存，请保存后操作。");
return;
}
this.setEdit(row, index);
let _this = this;
row.id=row.id+" ";
row.id=row.id.trim();
_this.vo.name = row.name;
},
/** 取消按钮操作 */
handleCancel(row, index) {
this.quitEdit(row, index);
if(row.id) {
row.id=row.id+" ";
row.id=row.id.trim();
} else {
this.list.splice(index, 1);
}
return;
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
if(ids.length == 0) {
this.list = this.list.slice(1);
return;
}
this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delete(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function() {});
},
}
};
</script>
2、效果展示
1、点击添加
image.png
2、填写之后，保存
image.png
3、点击修改
image.png
3.1、填写内容之后，保存
image.png
3.2、点击修改之后，取消
image.png
如果点击修改之后，不保存也不取消，点击添加，根据hasUnSaveItem判断提示
image.png
4、新增，直接取消
image.png
因为是没有id的行，所以直接删除。
image.png
