vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2  element表格渲染

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

作者:巨蟹座守护骑士

这篇文章主要介绍了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" rel="external nofollow" 
                    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;
    }
}

到此这篇关于vue2使用 element表格展开功能渲染子表格的方式的文章就介绍到这了,更多相关vue2 element表格渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文