Vue 3,element table表格动态添加

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

效果图

代码实现 

// 表尾合计
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 : 3
        const 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 = item
    var 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 = list
    if (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
            }
        })
    }

}