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

巨蟹座守护骑士

已于 2024-01-16 19:44:38 修改

阅读量1.1k

点赞数 16

分类专栏： vue2 文章标签：前端 javascript 开发语言

于 2024-01-16 19:31:17 首次发布

本文链接：https://blog.csdn.net/weixin_70563937/article/details/135633062

版权

vue2 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文详细描述了如何使用ElementUI中的el-table组件进行样式修改，包括列定义、链接、模板和状态指示，以及报价单的生成与修改功能。

摘要由CSDN通过智能技术生成

默认样式

修改后

样式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;
    }
}