el-table 父子数据层级嵌套表格

xml 复制代码

<template>
    <el-table
        ref="multipleTable"
        :data="tableData"
        :height="800"
        border
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children' }"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
    >
        <el-table-column type="selection" width="50" />
        <el-table-column label="" width="1" fixed="left">
            <template slot-scope="scope">
                <div v-if="scope.row.isParent" class="fixed-cell">
                    <div class="parent-cell"><span class="f-color">父级名称：</span>{{ scope.row.name }}</div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="" width="1">
            <template slot-scope="scope">
                <div v-if="scope.row.isParent" class="fixed-cell">
                    <div class="parent-cell"><span class="f-color">父级名称：</span>{{ scope.row.name }}</div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="名称" min-width="120">
            <template slot-scope="scope">
                <div v-if="!scope.row.isParent">
                    {{ scope.row.name }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="owner" label="负责人" min-width="120"></el-table-column>
        <el-table-column prop="count" label="数量" min-width="100" align="center"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="180"></el-table-column>
        <el-table-column prop="owner" label="负责人" min-width="120"></el-table-column>
        <el-table-column prop="count" label="数量" min-width="100" align="center"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="180"></el-table-column>
        <el-table-column prop="owner" label="负责人" min-width="120"></el-table-column>
        <el-table-column prop="count" label="数量" min-width="100" align="center"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="180"></el-table-column>
        <el-table-column prop="owner" label="负责人" min-width="120"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="180"></el-table-column>
        <el-table-column prop="owner" label="负责人" min-width="120"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="180"></el-table-column>
        <el-table-column prop="owner" label="负责人" min-width="120"></el-table-column>
        <el-table-column label="操作" fixed="right" width="100" class-name="operation">
            <template slot-scope="scope">
                <div v-if="scope.row.isParent">
                    <el-button type="text">操作</el-button>
                    <el-button type="text">操作</el-button>
                </div>
                <div v-else>
                    <el-button type="text">操作</el-button>
                    <el-button type="text">操作</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    name: "父级Aadasdsadsadasdsadsadsdsaddsads",
                    owner: "",
                    count: "",
                    updatedAt: "",
                    isParent: true,
                    children: [
                        { id: 11, name: "子级A-1", owner: "Tom", count: 10, updatedAt: "2025-08-01" },
                        { id: 12, name: "子级A-2", owner: "Jerry", count: 8, updatedAt: "2025-08-02" },
                    ],
                },
                {
                    id: 2,
                    name: "父级B",
                    owner: "",
                    count: "",
                    updatedAt: "",
                    isParent: true,
                    children: [{ id: 21, name: "子级B-1", owner: "Alice", count: 12, updatedAt: "2025-08-03" }],
                },
            ],
            fixedParentWidths: {}, // 存父级固定列宽
        };
    },
    mounted() {},
    methods: {
        handleSelectionChange(data) {},
        tableRowClassName({ row, rowIndex }) {
            if (row.isParent) {
                return "row-class";
            } else {
                return "";
            }
        },
    },
};
</script>
<style src="../../../styles/nestedTable.scss" lang="scss" scoped></style>

css部分：

css 复制代码

::v-deep .expanded {
    position: relative;
}

::v-deep .expanded .el-table__cell {
    position: static;
}

::v-deep .expanded .el-checkbox {
    display: block !important;
    position: absolute;
    z-index: 1000;
    top: 4px;
    left: 10px;
}

::v-deep .el-table__header-wrapper .el-checkbox {
    display: block !important;
}

::v-deep .el-table__fixed-header-wrapper .el-checkbox {
    display: block !important;
}

::v-deep .el-table-column--selection .cell::before {
    display: none;
}

::v-deep .cell .el-checkbox {
    display: none;
}

::v-deep .el-table--border .el-table__cell {
    border-right: none;
}

::v-deep .expanded .el-icon-arrow-right {
    display: none;
}

.fixed-cell {
    position: absolute;
    min-height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    z-index: 999;
    padding: 4px 4px 4px 40px;

    .parent-cell {
        display: inline-block;
        padding: 0 20px 0 0;
        line-height: 20px;
    }
}