WholeProcessPlatform/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue

<!-- DataTable.vue -->
<template>
    <div class="data-table-container">
        <a-table :columns="columns" :data-source="tableData" :pagination="false" size="middle" :customRow="customRow"
            bordered class="custom-table">
        </a-table>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';

// 定义组件名
defineOptions({
    name: 'DataTable'
});

// 表格列配置
const columns: ColumnsType = [
    {
        title: '基地名称',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        width: 114.19,
        align: 'left'
    },
    {
        title: '装机容量(万kW)',
        key: 'capacity',
        align: 'center',
        children: [
            {
                title: '总计',
                dataIndex: 'total',
                key: 'total',
                width: 76.64,
                align: 'center'
            },
            {
                title: '已建',
                dataIndex: 'built',
                key: 'built',
                width: 76.64,
                align: 'center'
            },
            {
                title: '在建',
                dataIndex: 'building',
                key: 'building',
                width: 68.25,
                align: 'center'
            },
            {
                title: '未建',
                dataIndex: 'unbuilt',
                key: 'unbuilt',
                // width: 76,
                align: 'center'
            },
        ]
    }
];

// 表格数据
const tableData = ref([
    {
        key: '1',
        name: '金沙江干流',
        total: '7952.00',
        built: '6370.00',
        building: '902.00',
        unbuilt: '680.00'
    },
    {
        key: '2',
        name: '雅砻江干流',
        total: '2773.65',
        built: '1920.00',
        building: '492.00',
        unbuilt: '361.65'
    },
    {
        key: '3',
        name: '大渡河干流',
        total: '2689.65',
        built: '1925.65',
        building: '534.00',
        unbuilt: '230.00'
    },
    {
        key: '4',
        name: '乌江干流',
        total: '1181.36',
        built: '1133.36',
        building: '48.00',
        unbuilt: '0.00'
    },
    {
        key: '5',
        name: '长江上游干流',
        total: '3212.65',
        built: '2523.65',
        building: '0.00',
        unbuilt: '689.00'
    },
    {
        key: '6',
        name: '湘西',
        total: '1054.32',
        built: '959.30',
        building: '38.52',
        unbuilt: '56.65'
    },
    {
        key: '7',
        name: '黄河上游干流',
        total: '2794.59',
        built: '1749.89',
        building: '0.00',
        unbuilt: '1044.65'
    },
    {
        key: '8',
        name: '黄河中游干流',
        total: '835.65',
        built: '401.65',
        building: '0.00',
        unbuilt: '434.00'
    },
    {
        key: '9',
        name: '南盘江 - 红水河',
        total: '1271.00',
        built: '1271.00',
        building: '0.00',
        unbuilt: '0.00'
    },
    {
        key: '10',
        name: '东北',
        total: '1331.95',
        built: '749.05',
        building: '0.00',
        unbuilt: '582.90'
    },
    {
        key: '11',
        name: '澜沧江干流',
        total: '2535.00',
        built: '2275.00',
        building: '260.00',
        unbuilt: '0.00'
    },
    {
        key: '12',
        name: '怒江干流',
        total: '3138.00',
        built: '0.00',
        building: '102.00',
        unbuilt: '3036.00'
    },
    {
        key: '13',
        name: '闽浙赣',
        total: '962.08',
        built: '920.68',
        building: '0.00',
        unbuilt: '41.40'
    },
    {
        key: '14',
        name: '其他',
        total: '7460.57',
        built: '7273.27',
        building: '121.90',
        unbuilt: '65.40'
    },
    {
        key: '15',
        name: '总计',
        total: '7460.57',
        built: '7273.27',
        building: '121.90',
        unbuilt: '65.40'
    }
]);

// 自定义行样式
const customRow = (record: any, index: number) => {
    return {
        style: {
            backgroundColor: index % 2 === 1 ? '#fafafa' : '#ffffff'
        }
    };
};

// 页面加载时执行的逻辑
onMounted(() => {

});
</script>

<style lang="scss" scoped>
.data-table-container {
    // padding: 0;
    background: #fff;
    padding: 16px 0px;
    width: 100%;
}

.custom-table {
    :deep(.ant-table) {
        font-size: 14px;
        // border: 1px solid #d5e2ed;
        border-top: 1px solid #d5e2ed;

        .ant-table-thead {
            >tr {
                >th {
                    background-color: #e5eff8 !important;
                    color: #2f6b98;
                    // font-weight: 600;
                    // border: 1px solid #d5e2ed!important;
                    padding: 0px 6px;
                    text-align: center;
                    font-weight: 600;
                    line-height: 31px;

                    &:first-child {
                        background-color: #e5eff8 !important;
                        text-align: left;
                    }
                }

                &:first-child {
                    >th {
                        background-color: #e5eff8 !important;

                        &:first-child {
                            background-color: #e5eff8 !important;
                        }
                    }
                }
            }
        }

        .ant-table-tbody {
            >tr {
                >td {
                    // border: 1px solid #d5e2ed;
                    padding: 0px 6px !important;
                    text-align: center;
                    overflow-wrap: break-word;
                    line-height: 33px;

                    &:first-child {
                        text-align: left;
                        // font-weight: 500;
                    }
                }

                &:hover {
                    background-color: #e6f7ff !important;
                }
            }
        }

        // 移除默认的 footer 单元格样式
        .ant-table-footer::before {
            display: none;
        }
    }
}

:deep() {
    .ant-table-bordered .ant-table-tbody>tr>td {
        border-bottom: 1px solid #d5e2ed !important;
        border-inline-end: 1px solid #d5e2ed !important;
    }

    .ant-table-container {
        border-inline-start: 1px solid #d5e2ed !important;
    }

    .ant-table-wrapper .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr:not(:last-child)>th {
        border-bottom: 1px solid #d5e2ed !important;
    }

    .ant-table-wrapper .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th {
        border-inline-end: 1px solid #d5e2ed !important;
    }

    .ant-table-wrapper .ant-table-thead>tr>th {
        border-bottom: 1px solid #d5e2ed00 !important;
    }

}
</style>