Vue 3,element table表格动态添加

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

效果图

代码实现

html 复制代码

<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>

html 复制代码

// 表尾合计
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
            }
        })
    }

}