diet-web-ui/projects/cdk/src/ingredient/ingredient-meals/ingredient-meals.component.html

<div>
    <div class="mb-3">
        <nz-space>
            <button *nzSpaceItem nz-button nzType="primary" (click)="shopDishForm()">
                添加菜品
            </button>
            <button *nzSpaceItem nz-button>
                清空本餐
            </button>
        </nz-space>
    </div>
    <nz-table nzTemplateMode [nzBordered]="true" nzSize="small">
        <thead>
            <tr>
                <th colSpan="2"></th>

                <th [colSpan]="5">
                    重量/克
                </th>

            </tr>
            <tr>

                <th [rowSpan]="2">
                    菜品
                </th>
                <th [rowSpan]="2">
                    食材
                </th>
                <th>
                    轻体力(体重过低)
                </th>
                <th>
                    轻体力(正常体重)
                </th>
                <th>
                    休息(超重/肥胖)
                </th>
                <th>
                    轻体力(体重过低)
                </th>
                <th>
                    轻体力(正常体重)
                </th>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td [rowSpan]="2">
                    <div class="flex justify-between">
                        <span>
                            番茄煎蛋面
                        </span>
                        <button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="dishOptions">
                            <i nz-icon nzType="more"></i>
                        </button>
                        <nz-dropdown-menu #dishOptions="nzDropdownMenu">
                            <ul nz-menu nzSelectable class=" w-20">
                                <li nz-menu-item>编辑</li>
                                <li nz-menu-item nzDanger>删除</li>
                            </ul>
                        </nz-dropdown-menu>
                    </div>
                </td>
                <td>

                    <div class="flex justify-between">
                        <span>
                            番茄
                        </span>
                        <button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="foodOptions">
                            <i nz-icon nzType="more"></i>
                        </button>
                        <nz-dropdown-menu #foodOptions="nzDropdownMenu">
                            <ul nz-menu nzSelectable class="w-100">
                                <li nz-menu-item>设置价格</li>
                                <li nz-menu-item nzDanger>删除</li>
                            </ul>
                        </nz-dropdown-menu>
                    </div>
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>

                <td>

                    <div class="flex justify-between">
                        <span>
                            面条
                        </span>
                        <button nz-button nzType="text">
                            <i nz-icon nzType="more"></i>
                        </button>
                    </div>
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td [rowSpan]="4">

                    <div class="flex justify-between">
                        <span>
                            鸡蛋青菜面
                        </span>
                        <button nz-button nzType="text">
                            <i nz-icon nzType="more"></i>
                        </button>
                    </div>
                </td>
                <td>
                    <div class="flex justify-between">
                        <span>
                            食用油
                        </span>
                        <button nz-button nzType="text">
                            <i nz-icon nzType="more"></i>
                        </button>
                    </div>
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>

                    <div class="flex justify-between">
                        <span>
                            小白菜[青菜]
                        </span>
                        <button nz-button nzType="text">
                            <i nz-icon nzType="more"></i>
                        </button>
                    </div>
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>

                    <div class="flex justify-between">
                        <span>
                            鸡蛋(均值)
                        </span>
                        <button nz-button nzType="text">
                            <i nz-icon nzType="more"></i>
                        </button>
                    </div>
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>

                    <div class="flex justify-between">
                        <span>
                            面条(均值)
                        </span>
                        <button nz-button nzType="text">
                            <i nz-icon nzType="more"></i>
                        </button>
                    </div>
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>