el-table单元格新增、编辑、删除功能

<template>
<div class="box">
<el-button
class="addBtn"
type="primary "
@click="addRow"
size="small"
style="margin-bottom:10px;"
>增加</el-button
>
<el-table
:data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
"
border
class="el-table"
style="width: 100%;"
>
<el-table-column align="center" type="index" label="序号" width="80">
</el-table-column>
<el-table-column prop="sort" label="配置分类">
<template slot-scope="scope">
<el-input
@click="detail"
v-model="scope.row.sort"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column prop="name" label="指标名称">
<template slot-scope="scope">
<el-input
@click="detail"
v-model="scope.row.name"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="depart" label="所属部门">
<template slot-scope="scope">
<el-input
v-model="scope.row.depart"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="creator" label="创建者">
<template slot-scope="scope">
<el-input
v-model="scope.row.creator"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="createDate" label="创建时间">
<template slot-scope="scope">
<el-input
v-model="scope.row.createDate"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="updater" label="更新者">
<template slot-scope="scope">
<el-input
v-model="scope.row.updater"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="updaterDate" label="更新时间">
<template slot-scope="scope">
<el-input
v-model="scope.row.updaterDate"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button
v-if="scope.row.edit"
type="success"
size="mini"
@click="confirmEdit(scope.row)"
style="margin-left:0px;"
>保存
</el-button>

<el-button
v-if="scope.row.edit"
class="cancel-btn"
size="mini"
type="warning"
@click="cancelEdit(scope.$index, scope.row)"
style="margin-left:0px;"
>取消
</el-button>
<el-button
v-else
type="primary"
size="mini"
@click="startEdit(scope.row)"
style="margin-left:0px;"
>编辑
</el-button>
<el-button
@click="handleDelete(scope.$index, tableData)"
type="danger"
size="mini"
style="margin-left:0px;"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
align="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="tableData.length"
>
</el-pagination>
</div>
</template>

<script>
import data from "./data/index.js";
export default {
mixins: [data],
methods: {
// 增加行
addRow() {
let newLine = {
sort: this.sort,
name: this.name,
depart: this.depart,
creator: this.creator,
createDate: this.createDate,
updater: this.updater,
updaterDate: this.updaterDate,
edit: true, // 新增时处于可编辑状态，所以按钮是保存和取消
disabled: true // 打开编辑状态
};
this.tableData.unshift(newLine); // 移到第一行
},

// 编辑
startEdit(row) {
row.edit = !row.edit;
row.disabled = true;
},

// 保存
confirmEdit(row) {
//row.originalValue = row.address;
if (row.sort == null || row.name == null) {
this.$message({
message: "请输入分类名称与指标名称!",
type: "warning"
});
return false;
}
row.edit = false;
row.disabled = false;
//调取Api接口地址
//成功后
this.$message({
message: "修改成功!",
type: "success"
});
//失败后
// this.$message({
// message: "修改失败",
// type: "warning"
// });
// let name = this.params.name;
// const p = { ...row, name };
//
// // 调用更新方法
// updateXXXXx(p);
// this.$message({
// message: "已修改!",
// type: "success"
// });
// row.disabled = false;
// if (row.id === undefined) {
// // 重新加载该页面
// }
},

// 取消
cancelEdit(index, row) {
if (row.sort == null || row.name == null) {
return false;
}
//row.address = row.originalValue;
row.edit = false;
row.disabled = false;

if (row.id === undefined) {
debugger;
// 重新加载该页面
location.reload();
}
this.$message({
message: "已取消修改!",
type: "warning"
});
},
//删除
handleDelete(index, row) {
row.splice(index, 1);
this.$message({
message: "已删除!",
type: "success"
});
},
//表格分页
//列表分页
handleSizeChange(val) {
this.currentPage = 1;
this.pageSize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
},
//指标点击事件
detail() {
this.$router.push({ path: "/targetWarn/detail" });
}
}
};
</script>

<style scoped>
.box {
padding: 20px;
}
.box .addBtn {
float: right;
}
</style>