????????el-table實現(xiàn)表格動態(tài)新增/插入/刪除表格行，可編輯單元格

效果圖

文章來源地址http://www.zghlxwxcb.cn/news/detail-804759.html

代碼實現(xiàn)?

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

// 表格的動態(tài)添加
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 != '') { // 這個刪除是針對已經(jīng)保存到數(shù)據(jù)庫的數(shù)據(jù)
        row.uuid = ''
        row.puuid = ''
        row.assessmentType = ''
        row.assessmentItem = ''
        row.assessmentScore = ''
        row.remark = ''
        list.splice(index, 1)
        ElMessage({ message: '刪除成功' })
    } else {
        hasmembers.forEach((item, i) => { // 暫未保存的數(shù)據(jù)進(jìn)行刪除
            if (row.uuid == '' && row.tid == item.tid) {
                list.splice(i, 1);
                ElMessage({ message: '刪除成功' })
                return
            }
        })
    }

}

到了這里，關(guān)于Vue 3,element table表格動態(tài)添加的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！