el-table实现表格动态新增/插入/删除表格行，可编辑单元格

效果图

代码实现 

<template><el-table :data="formDate.scoreList4" style="width:100%;height: 96%;" stripe show-summary:summary-method="calculateSummary":header-cell-style="{ textAlign: 'center', borderColor: ' #CCC', background: '#f5f7fa' }":cell-style="{ textAlign: 'center' }"><el-table-column type="index" label="序号" width="120"></el-table-column><el-table-column type="puuid" label="uuid" v-if="false"></el-table-column><el-table-column prop="assessmentType" label="考核类型"><template #default="scope"><el-input v-model="scope.row.assessmentType" style="width:80%" disabled /></template></el-table-column><el-table-column prop="assessmentItem" label="考核项"><template #default="scope"><el-input v-model="scope.row.assessmentItem" style="width:80%" :disabled="!data.view" /></template></el-table-column><el-table-column prop="assessmentScore" label="考核评分" align="center"><template #default="scope"><el-input v-model="scope.row.assessmentScore" style="width:80%" type="number":disabled="!data.view" /></template></el-table-column><el-table-column prop="remark" label="加分扣分原因" align="center"><template #default="scope"><el-input v-model="scope.row.remark" style="width:80%" :disabled="!data.view" /></template></el-table-column><el-table-column label="#" width="80" v-if="data.view"><template #default="scope"><Delete @click="delmembers(scope.$index, scope.row, formDate.scoreList4)"style="width: 1em; height: 1em; margin-right: 8px;color: #f56c6c;" /></template></el-table-column></el-table><div class="button" v-show="data.view"><el-icon @click="addmembers(formDate.scoreList4, '个人成长')" class="add" style="margin-right:7px"><CirclePlusFilled /></el-icon></div>
</template>

// 表尾合计
const calculateSummary = ({ columns, data }) => {const sums = []columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计总分'return}let a = activeList.value == 'first' ? 21 : activeList.value == 'second' ? 12 : activeList.value == 'third' ? 18 : 3const values = data.map((item) => Number(item[column.property]))if (!values.every((value) => Number.isNaN(value)) && index === 3) {sums[index] = a + Number(` ${values.reduce((prev, curr) => {const value = Number(curr)if (!Number.isNaN(value)) {return prev + curr} else {return prev}}, 0)}`)}})return sums
}// 表格的动态添加
const addmembers = (item, options) => {var member = itemvar length = member.length;item.push({tid: parseInt(length),uuid: '',puuid: formDate.uuid,assessmentType: data.points,assessmentItem: options,assessmentScore: '',remark: ''})
}// 表格的删除
const delmembers = (index, row, list) => {var hasmembers = listif (row.uuid != '') { // 这个删除是针对已经保存到数据库的数据row.uuid = ''row.puuid = ''row.assessmentType = ''row.assessmentItem = ''row.assessmentScore = ''row.remark = ''list.splice(index, 1)ElMessage({ message: '删除成功' })} else {hasmembers.forEach((item, i) => { // 暂未保存的数据进行删除if (row.uuid == '' && row.tid == item.tid) {list.splice(i, 1);ElMessage({ message: '删除成功' })return}})}}