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

更新時間：2024年01月23日 11:36:25 作者：巨蟹座守護騎士

這篇文章主要介紹了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="創(chuàng)建時間" prop="createtime" />
    <el-table-column align="center" label="成交時間" prop="bargain_time" />
    <el-table-column align="center" label="成交狀態(tài)">
        <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表格渲染內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: