element-plus的Table 表格之树形数据与懒加载

🔮 欢迎点赞 👍٩( ´︶` )( ´︶` )۶ 收藏 🌟留言 💌 欢迎讨论！💕
🔮 本文由 【第四人称Alice】 原创，首发于 CSDN ✨✨✨
🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！💭

声明：博主的项目是vue3+ts，node版本18.18.2 

总结一下最近写的基础版树形表格的懒加载，本次实例的应用中，和后端同事沟通返回指定字段isChildren，让子节点表格绑定字段和父节点表格绑定字段能够灵活处理，同时还修改了表格的样式。

<template>
    <div class="app-container">        
        <el-table row-key="id" @expand-change="handleLineChange" :row-style="tableRowStyle" :header-cell-style="tableHeaderColor" ref="pageTable" :cell-style="cellStyle" :data="invoicingItemsList" lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <!-- <el-table-column label="序号" type="index" class-name="column" width="50" align="center" /> -->
            <el-table-column label="id号" align="center" class-name="column" :show-overflow-tooltip="true" prop="id">
                <template #default="{ row }">
                    <span v-if="row.isChildren"></span>
                    <span v-else>{{ row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="合同" align="center" class-name="column" width="130" :show-overflow-tooltip="true" prop="contractNo" />
            <el-table-column label="项目" align="center" class-name="column" :show-overflow-tooltip="true" prop="projectCode" />
            <el-table-column label="金额" align="center" class-name="column" :show-overflow-tooltip="true">
                <template #default="scope">
                    <span>{{ Number.isFinite(scope.row.projectPrice) ? (scope.row.projectPrice > 0 ? scope.row.projectPrice : scope.row.projectPrice.toFixed(2)) : "" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="统计" align="center" class-name="column" :show-overflow-tooltip="true">
                <template #default="{ row }">
                    <span v-if="!row.isChildren">{{ row.countMonth.slice(0, 7) }}</span>
                    <!-- <span>{{ scope.row.countMonth.slice(0, 7) }}</span> -->
                </template>
            </el-table-column>
            <el-table-column label="开票" align="center" class-name="column" :show-overflow-tooltip="true">
                <template #default="scope">
                    <span>{{ scope.row.invoicePrice > 0 ? scope.row.invoicePrice : scope.row.invoicePrice.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="收款" align="center" class-name="column" :show-overflow-tooltip="true">
                <template #default="scope">
                    <span>{{ scope.row.notReceiptPrice > 0 ? scope.row.notReceiptPrice : scope.row.notReceiptPrice.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" class-name="column" :show-overflow-tooltip="true">
                <template #default="{ row }">
                    <span v-if="row.isChildren">{{ row.invoiceStatus == 0 ? "未开票" : row.invoiceStatus == 1 ? "已开票" : "驳回" }}</span>
                    <span v-else>{{ row.status == 0 ? "未开票" : row.status == 1 ? "部分开票" : "全额开票" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" class-name="column" :show-overflow-tooltip="true" prop="createBy" />
            <el-table-column label="创建时间" width="140" align="center" class-name="column" :show-overflow-tooltip="true" prop="createTime" />
            <el-table-column label="操作" v-if="actionFlag" align="center" width="238" class-name="small-padding column fixed-width">
                <template #default="{ row }">
                    <template v-if="row.isChildren">
                        <div style="display: flex; width: 238px">
                            <el-button style="width: 70px; margin: 0 2px 2px 0" color="#479ef2" size="small" v-if="row.invoiceStatus == 2 && userStore.name == row.createBy" plain @click="altApplySubmit(row.id)" :icon="EditPen">编辑修改</el-button>
                            <el-button style="width: 70px; margin: 0 2px 2px 0" color="#479ef2" size="small" v-if="row.invoiceStatus == 2" plain @click="resubmitApplyInvoice(row.id)" :icon="EditPen">重新提交</el-button>
                            <el-button style="width: 70px; margin: 0 2px 2px 0" :icon="Delete" color="#ff5258" size="small" v-if="row.receiptStatus != 1" plain @click="delApply(row.id)">开票作废</el-button>
                        </div>
                    </template>
                </template>
            </el-table-column>
        </el-table>
            <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script setup lang="ts">
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    contractNo: "",
    status: "",
});
const total = ref<number>(0);
// 查询项目列表
const getList = () => {
    invoicingItemsList.value = [];
    loading.value = true;
    getInvProjectList(queryParams.value).then((res: any) => {
        if (res.data.code == 200) {
            invoicingItemsList.value = res.data.rows;
            total.value = parseInt(res.data.total);
            setTimeout(() => {
                loading.value = false;
            }, 200);
        }
    });
};
// 修改表格头部样式
const tableHeaderColor = {
    background: "#4b5357 !important",
    color: "#fff",
};
//修改表格斑马纹背景色
const tableRowStyle = (row: any) => {
    return row.rowIndex % 2 === 0 ? { background: "#596064" } : { background: "#4b5357" };
};
//修改指定列的字体颜色
const cellStyle = ({ columnIndex }: any) => {
    if (columnIndex == 6) {
        return { color: "#3de472" };
    } else if (columnIndex == 7) {
        return { color: "#d07a80" };
    } else if (columnIndex == 9 || columnIndex == 11) {
        return { color: "#d0d376" };
        // 3de472
    } else if (columnIndex == 10) {
        return { color: "#4cb58c" };
    }
};
// 操作栏Flag
let actionFlag = ref<boolean>(false);
// 用于记录展开的父节点ID
const expandedParents = ref(new Set());
const handleLineChange = (row: any, expanded: any) => {
    if (expanded) {
        // 节点展开，添加到集合中
        expandedParents.value.add(row.id);
    } else {
        // 节点关闭，从集合中移除
        expandedParents.value.delete(row.id);
    }
    // 检查是否所有父节点都关闭,控制操作行的展示
    actionFlag.value = !(expandedParents.value.size === 0);
};
// 父节点id
let contractId = ref<any>();
const loadMap = new Map();
//调取子节点接口，（根据实际情况调用接口）
const load = (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
    contractId.value = row.id; //存储父节点,方便子节点做局部刷新功能
    loadMap.set(row.id, { row, treeNode, resolve });
    getApplyChildList({ contractId: row.id }).then((res: any) => {
        if (res.data.length > 0) {
            resolve(res.data);
        }
    });
};

//调用修改借口后，局部更新子节点数据
const submitAlterInvoicePrice = () => {
    altApply({ id: altPriceId.value, invoicePrice: invoicePrice.value }).then((res: any) => {
        if (res.code == 200) {
            ElMessage({
                message: res.msg,
                type: "success",
            });
            // 尝试查询改为局部更新子节点，根据父节点id
            const { row, treeNode, resolve } = loadMap.get(contractId.value);
            load(row, treeNode, resolve);
            altOpenFlag.value = false;
        }
    });
};

const delApply = (id: any) => {};
const resubmitApplyInvoice = (id: any) => {}



</script>

参考地址：Table 表格 | Element Plus