vue+element-ui表格合並新增、刪除行

<template>
    <div>
        <el-button type="primary" icon="el-icon-plus" @click.native.prevent="addMaintain(-1)">新增</el-button>

        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%;">
            <el-table-column label="序號" width="80px" align='center'>
                <template slot-scope="scope">
                    <span>{{ scope.$index +1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="oneID" label="oneID" align='center'></el-table-column>
            <el-table-column prop="twoID" label="twoID" align='center'></el-table-column>
            <el-table-column prop="name" label="name" align='center'></el-table-column>
            <el-table-column prop="type" label="協辦人" align='center'></el-table-column>
            <el-table-column fixed="right" label="操作" align='center' width="220">
                <template slot-scope="scope">
                    <el-button type="text" v-if="oneList.some(e => {return e.index + e.length === scope.$index + 1})" @click.native.prevent="addLargeRecords(scope.row)" size="small">新增第二層大類</el-button>
                    <el-button type="text" @click.native.prevent="addRecords(scope.row)" size="small">新增</el-button>
                    <el-button type="text" @click.native.prevent="delRecords(scope.$index, tableData, scope.row)" size="small">刪除</el-button>
                    <el-button type="text" v-if="twoList.some(e => {return e.index + e.length === scope.$index + 1})" @click.native.prevent="delTwoRecords(scope.$index, tableData, scope.row)" size="small">刪除第二大類</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                oneID: 1,
                twoID: 1,
                name: '王小虎'
            }, {
                oneID: 1,
                twoID: 1,
                name: '王小虎'
            }, {
                oneID: 1,
                twoID: 2,
                name: '王小虎'
            }, {
                oneID: 1,
                twoID: 2,
                name: '王小虎'
            }, {
                oneID: 2,
                twoID: 1,
                name: '王小虎'
            }, {
                oneID: 2,
                twoID: 2,
                name: '王小虎'
            }, {
                oneID: 3,
                twoID: 1,
                name: '王小虎'
            }, {
                oneID: 4,
                twoID: 1,
                name: '王小虎'
            }]
        }
    },
    computed: {
        oneList(){
            let iList = [];
            this.tableData.forEach((row, rowIndex) => {
                let eIndex = iList.findIndex(e => { return e.oneID == row.oneID});
                if(eIndex !== -1){
                    iList[eIndex].length += 1;
                } else {
                    iList.push({
                        oneID: row.oneID,
                        length: 1,
                        index: rowIndex
                    })
                }
            })
            return iList
        },
        twoList(){
            let tList = [];
            this.tableData.forEach((row, rowIndex) => {
                let eIndex = tList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`});
                if(eIndex !== -1){
                    tList[eIndex].length += 1;
                } else {
                    tList.push({
                        twoID: `${row.oneID}_${row.twoID}`,
                        length: 1,
                        index: rowIndex
                    })
                }
            })
            return tList
        }
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                // console.log('oneList',row, column, rowIndex, columnIndex,this.oneList)
                let iIndex = this.oneList.findIndex(e => { return e.index == rowIndex});
                if (iIndex !== -1) {
                    return [this.oneList[iIndex].length, 1];
                } else {
                    return [0, 0];
                }
            }
            if (columnIndex === 2) {
                // console.log('oneList',row, column, rowIndex, columnIndex,this.oneList)
                let iIndex = this.twoList.findIndex(e => { return e.index == rowIndex});
                if (iIndex !== -1) {
                    return [this.twoList[iIndex].length, 1];
                } else {
                    return [0, 0];
                }
            }
        },
        // 刪除第二大類
        delTwoRecords(index, rows, row){
            let rIndex = this.twoList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`});
            rows.splice(this.twoList[rIndex].index, this.twoList[rIndex].length);
        },
        delRecords(index, rows, row){
            // rows.splice(index, 1);
            // return

            // 最后一條數據不能刪除，只能清空子級數據
            let rIndex = this.twoList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`});
            if(this.twoList[rIndex].length !== 1){
                rows.splice(index, 1);
            } else {
                rows.splice(index, 1, {
                    oneID: row.oneID,
                    twoID: row.twoID,
                    name: ''
                });
            }
        },
        addMaintain(){
            if(this.tableData.length){
                this.tableData.push({
                    oneID: this.oneList[this.oneList.length - 1].oneID + 1,
                    twoID: 1,
                    name: `外層新增`
                })
            } else {
                this.tableData.push({
                    oneID: 1,
                    twoID: 1,
                    name: `外層新增`
                })
            }
        },
        addLargeRecords(row){
            let rIndex = this.oneList.findIndex(e => { return e.oneID == row.oneID});
            if(rIndex > -1){
                let num = this.oneList[rIndex].index + this.oneList[rIndex].length
                this.tableData.splice(num, 0, {
                    oneID: row.oneID,
                    twoID: row.twoID + 1,
                    name: `新增大類 -- ${num}`
                })
            }
        },
        addRecords(row){
            let rIndex = this.twoList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`});
            if(rIndex > -1){
                let num = this.twoList[rIndex].index + this.twoList[rIndex].length
                this.tableData.splice(num, 0, {
                    oneID: row.oneID,
                    twoID: row.twoID,
                    name: `新增 -- ${num}`
                })
            }
        }
    }
}

</script>