vue2使用 element表格展开功能渲染子表格

?默认样式

修改后?

?样式2

<el-table :data="needDataFollow" border style="width: 100%">
    <el-table-column align="center" label="序号" type="index" width="80" />
    <el-table-column align="center" label="计算方向" prop="direction" />
    <el-table-column align="center" label="需求内容" prop="demand_content" />
    <el-table-column align="center" label="文档/附件">
        <template #default="scope">
            <div class="img">
                <a v-for="(item, index) in scope.row.report" :key="index" :href="item.url"
                    target="_blank">
                    {{ item.name }}
                </a>
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" label="创建时间" prop="createtime" />
    <el-table-column align="center" label="成交时间" prop="bargain_time" />
    <el-table-column align="center" label="成交状态">
        <template #default="scope">
            {{ scope.row.is_bargain === 1 ? '未成交' : '已成交' }}
        </template>
    </el-table-column>
    <el-table-column align="center" label="编辑需求">
        <template #default="scope">
            <img v-if="scope.row.is_bargain == 1" alt="编辑" src="../../assets/edit_icon.png"
                style="cursor: pointer" @click="getNeedEdit(scope.row.id)">
            <span v-else>需求已成交不可修改</span>
        </template>
    </el-table-column>
    <el-table-column align="center" label="添加报价">
        <template #default="scope">
            <el-icon color="red" size="25px"
                @click="get_quotation(scope.row.id, 0, scope.row.direction)">
                <CirclePlusFilled />
            </el-icon>
        </template>
    </el-table-column>
    <el-table-column type="expand" width="140" label="查看报价">
        <template #default="scopes">
            <el-form label-position="right" inline class="demo-table-expand">
                <el-table :data="scopes.row.tea" border
                    style="width:calc(100% - 80px);float:right" id="child_tab">
                    <el-table-column align="center" label="报价编号" prop="number"
                        width="180" />
                    <el-table-column align="center" label="计算老师" prop="teacher_name" />
                    <el-table-column align="center" label="报价" prop="tea_money" />
                    <el-table-column align="center" label="周期" prop="cycle" />
                    <el-table-column align="center" flex label="报价单" width="140">
                        <template #default="scope">
                            <el-button :disabled="scope.row.amount_price == '0.00'"
                                type="success">生成报价单</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="修改报价">
                        <template #default="scope">
                            <el-button type="success"
                                @click="get_quotation(scope.row.id, 1)"
                                :disabled="scopes.row.is_bargain == 2">
                                修改报价
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </template>
    </el-table-column>
</el-table>

模拟数据

needDataFollow: [
            {
                "bargain_time": "",
                "id": 7,
                "direction": "项目",
                "demand_content": "777",
                "report": [],
                "is_bargain": 1,
                "createtime": "2024-01-16",
                "tea": [
                    {
                        "id": 6,
                        "teacher_id": "555",
                        "teacher_name": "名字",
                        "cycle": "10",
                        "tea_money": "10.00",
                        "number": "PHAD-BJ-20240116-01"
                    }
                ]
            },
]

修改默认样式?

// 父表格颜色
/deep/.el-table th.el-table__cell {
    background: #596980 !important;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
}
// 子表格颜色
#child_tab {
    /deep/ th {
        background-color: #f0f2fd !important;
        color: #000 !important;
    }
}

// 展开向右边
/deep/ .el-table__expand-icon {
    color: #29b4ff;
    font-size: 15px;

    &::before {
        content: "展开";
    }

    .el-icon svg {
        transform: rotate(0deg);
        transition: 0.3s;
    }
}

// 收起向下边
/deep/ .el-table__expand-icon--expanded {
    transform: rotate(0);

    &::before {
        content: "收起";
    }

    .el-icon svg {
        transform: rotate(90deg);
        transition: 0.3s;
    }
}