windLifecontrolPro/src/components/generatingCapacityComponent/table.vue

<template>
    <div class="warn-table" ref="tableRef" :style="{ height: typeof height === 'string' ? height : height + 'px' }">
        <div class="tableData_tit">
            <p :style="theme? 'color:#5473E8':'color:#979797'">{{tableName}}</p>
            <el-divider />
            <!-- <img :src="CSV_C" alt=""> -->
            <svg t="1711515837802" class="icon" viewBox="0 -120 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2706" width="35" height="35">
                <path
                    d="M249.856 389.12v-178.176c0-45.056 36.864-81.92 81.92-81.92h456.704l163.84 167.936v337.92c0 12.288-8.192 20.48-20.48 20.48s-20.48-8.192-20.48-20.48V337.92h-102.4c-34.816 0-61.44-26.624-61.44-61.44v-106.496h-415.744c-22.528 0-40.96 18.432-40.96 40.96v178.176h456.704c22.528 0 40.96 18.432 40.96 40.96v286.72c0 22.528-18.432 40.96-40.96 40.96h-456.704v61.44c0 22.528 18.432 40.96 40.96 40.96h538.624c22.528 0 40.96-18.432 40.96-40.96v-61.44c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48v61.44c0 45.056-36.864 81.92-81.92 81.92h-538.624c-45.056 0-81.92-36.864-81.92-81.92v-61.44h-137.216c-22.528 0-40.96-18.432-40.96-40.96v-286.72c0-22.528 18.432-40.96 40.96-40.96h137.216z m538.624-202.752v90.112c0 10.24 8.192 20.48 20.48 20.48h86.016l-106.496-110.592z m-473.088 350.208c-14.336-38.912-40.96-57.344-83.968-59.392-59.392 4.096-90.112 36.864-94.208 102.4 2.048 65.536 34.816 100.352 94.208 102.4 47.104 0 77.824-22.528 88.064-67.584l-36.864-12.288c-4.096 32.768-22.528 47.104-49.152 47.104-34.816-2.048-53.248-26.624-55.296-71.68 2.048-45.056 20.48-67.584 55.296-69.632 24.576 2.048 40.96 14.336 47.104 36.864l34.816-8.192z m26.624 79.872c10.24 45.056 38.912 65.536 90.112 65.536s75.776-20.48 77.824-59.392c0-24.576-14.336-40.96-40.96-53.248l-36.864-12.288c-28.672-6.144-43.008-16.384-40.96-28.672 2.048-16.384 14.336-22.528 34.816-24.576 24.576 0 38.912 10.24 43.008 32.768l36.864-8.192c-6.144-36.864-34.816-57.344-81.92-55.296-45.056 2.048-69.632 20.48-71.68 53.248-2.048 28.672 16.384 47.104 57.344 57.344 10.24 2.048 20.48 4.096 30.72 8.192 22.528 6.144 32.768 16.384 30.72 30.72-2.048 18.432-14.336 26.624-38.912 28.672-28.672 0-47.104-14.336-51.2-45.056l-38.912 10.24z m380.928-137.216h-40.96l-49.152 145.408c-4.096 12.288-6.144 18.432-6.144 20.48 0-4.096-2.048-10.24-6.144-20.48l-51.2-147.456h-40.96l77.824 198.656h43.008l73.728-196.608z"
                    fill="#5473E8" p-id="2707"></path>
            </svg>
            <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!tableId">数据导出</el-button> -->
        </div>
        <el-table :data="data" size="small" v-loading="loading" :max-height="tableHeight" :style="{ width: '100%'}">
            <el-table-column align="center" show-overflow-tooltip v-for="(item,index) in column" :key="index"
                :prop="item.prop" :label="item.label" sortable resizable :min-width="item.width? item.width : 70" />
            <template #empty>
                <div class="nodata">
                    <img :src="nodata" alt="">
                    <p class="nodataText">暂无数据，敬请期待</p>
                </div>
            </template>
        </el-table>
    </div>
</template>
<script>
    // import CSV_C from '@/assets/menuImg/CSV_C.png'
    import nodata from '@/assets/images/noData.png'
    export default {
        props: {
            data: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            column: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            height: {
                type: String,
                default: () => {
                    return '';
                },
            },
            loading: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
            tableId: {
                type: String,
                default: () => {
                    return '';
                },
            },
            tableName: {
                type: String,
                default: () => {
                    return '';
                },
            },
            theme: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
        },
        data() {
            return {
                // CSV_C: CSV_C,
                nodata: nodata,
                tableHeight: window.innerHeight - 200 + 'px'
            }
        },
    }
</script>
<style lang="less" scoped>
    .warn-table {


        .tableData_tit {
            display: flex;

            p {
                width: 15%;
                font-size: 16px;
                font-weight: bold;
                margin: 10px;
            }

            .el-divider {
                position: relative;
                top: -3px;
            }

            img {
                width: 30px;
                height: 30px;
                position: relative;
                top: 5px;
            }
        }


        .el-table__empty-block {
            .el-table__empty-text {

                img {
                    margin-top: 20px;
                }

                .nodataText {
                    line-height: 30px;
                    position: relative;
                    top: -10px;
                    font-size: 14px;
                }
            }
        }
    }
</style>