526互联

element表格合并单元格+上移下移

发布时间 2024-01-09 10:27:38作者: SangFall
// template
<el-table :data="tableData" :span-method="tableSpanMethod" size="small" border style="width: 100%">
    <el-table-column label="排序" align="center" width="150">
        <template slot-scope="scope">
            <el-button @click="moveUp(scope.$index, tableData)" v-if="scope.$index > 0" type="text" size="small">上移</el-button>
            <el-button @click="moveDown(scope.$index, tableData)" v-if="isHasMoveDownBtn(scope.$index, tableData)" type="text" size="small">下移</el-button>
        </template>
    </el-table-column>
    <el-table-column prop="className" label="班级" align="center"></el-table-column>
    <el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
    <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
            <el-button @click="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
        </template>
    </el-table-column>
</el-table>

// script
data() {
    return {
        // 表格数据
        tableData: [
            { id: 1, classId: 11, className: '一年(一)班', studentId: 1, studentName: '叶凡' },
            { id: 2, classId: 11, className: '一年(一)班', studentId: 2, studentName: '姬紫月' },
            { id: 3, classId: 23, className: '二年(三)班', studentId: 1, studentName: '灭生老人' },
            { id: 4, classId: 34, className: '三年(四)班', studentId: 1, studentName: '王林' },
            { id: 5, classId: 34, className: '三年(四)班', studentId: 2, studentName: '李慕婉' },
            { id: 6, classId: 34, className: '三年(四)班', studentId: 3, studentName: '李倩梅' },
        ],
        tableSpanArr: [], // 表格需要合并的行数
        tablePos: 0, // 表格合并索引
    }
}

// methods
// 获取tableData数据
getTableData() {
    this.$axios.post({ url: 'xxx' }).then(res => {
        this.tableData = res.list || [];
        this.getTableSpanArr(this.tableData); // 表格合并行数
    });
},

// 表格删除
deleteRow(index, rows) {
    this.$confirm('确定删除该班级或学生信息？', '删除信息', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        rows.splice(index, 1);
        this.getTableSpanArr(rows); // 表格合并行数
    }).catch(() => {});
}

// 判断是否出现下移按钮(可以把classId换成需要比较的字段名)
isHasMoveDownBtn(index, rows) {
    const currentRowLength = this.tableData.filter(item => item.classId === this.tableData[index].classId).length;
    return (index + currentRowLength) < rows.length;
},

// 表格上移(可以把classId换成需要比较的字段名)
moveUp(index, rows) {
    if (index > 0) {
        const upRowClassId = this.tableData[index - 1].classId;
        const upRow = this.tableData.filter(item => item.classId === upRowClassId);
        const upRowLen = upRow.length;

        const currentRowLength = this.tableData.filter(item => item.classId === this.tableData[index].classId).length;

        this.tableData.splice(index - upRowLen, upRowLen);
        this.tableData.splice(index - upRowLen + currentRowLength, 0, ...upRow);
        this.getTableSpanArr(this.tableData); // 表格合并行数
    }
},

// 表格下移(可以把classId换成需要比较的字段名)
moveDown(index, rows) {
    const currentRowLength = this.tableData.filter(item => item.classId === this.tableData[index].classId).length;
    if ((index + currentRowLength) < rows.length) {
        const downRowClassId = this.tableData[index + currentRowLength].classId;
        const downRow = this.tableData.filter(item => item.classId === downRowClassId);
        const downRowLen = downRow.length;

        this.tableData.splice(index + currentRowLength, downRowLen);
        this.tableData.splice(index, 0, ...downRow);
        this.getTableSpanArr(this.tableData); // 表格合并行数
    }
}

// 表格合并行
tableSpanMethod({ row, column, rowIndex, columnIndex }) {
    // columnIndex < 2 表示合并表格前两项
    if (columnIndex < 2) {
        const _row = this.tableSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
            rowspan: _row,
            colspan: _col,
        };
    }
},

// 表格合并行数--接口data处理(合并classId相同的项--可以把classId换成需要比较的字段名)
getTableSpanArr(data) {
    this.tableSpanArr = [];
    this.tablePos = 0;
    for(let i = 0; i < data.length; i++) {
        if (i == 0) {
            this.tableSpanArr.push(1);
            this.tablePos = 0;
        } else {
            // 判断当前项classId是否与上一项classId相同(可以把classId换成需要比较的字段名)
            if (data[i].classId == data[i - 1].classId) {
                this.tableSpanArr[this.tablePos] += 1;
                this.tableSpanArr.push(0);
            } else {
                this.tableSpanArr.push(1);
                this.tablePos = i;
            }
        }
    }
}