<template>
    <div :style="height" class="mt10">
        <vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
            <vxe-column type="seq" title="序号"></vxe-column>
            <vxe-column field="a" title="终端名称"></vxe-column>
            <vxe-column field="b" title="所属电站"></vxe-column>
            <vxe-column field="c" title="完整性"></vxe-column>
            <vxe-column field="d" title="在线率"></vxe-column>
            <vxe-column field="e" title="合格率"></vxe-column>
        </vxe-table>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const tableData = ref([
    {
        a: '025875',
        b: '测试变电站1',
        c: '60',
        d: '95',
        e: '66'
    },
    {
        a: '025876',
        b: '测试变电站2',
        c: '60',
        d: '95',
        e: '66'
    }
])
const height = mainHeight(360, 3)

const info = () => {}
onMounted(() => {
    info()
})
</script>
<style lang="scss" scoped>
// :deep(.vxe-header--row) {
//     background: #071de2 !important;
//     color: #fff !important;
// }

/*调整表格 单元格背景颜色*/
:deep(.vxe-table .vxe-table--body-wrapper, .vxe-table .vxe-table--footer-wrapper) {
    background: #ffffff00 !important;
}
:deep(.vxe-table--render-wrapper) {
    background-color: #ffffff00 !important;
}
:deep(.vxe-table--body .vxe-body--row) {
    background-color:#ffffff2e !important;
}

:deep(.vxe-table--render-default .vxe-table--body-wrapper table) {
    background-color: #00000000 !important;
    color: #fff;
}
:deep(
        .vxe-table--render-default.border--full .vxe-body--column,
        .vxe-table--render-default.border--full .vxe-footer--column,
        .vxe-table--render-default.border--full .vxe-header--column,

    ) {
    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4);
}
:deep(

        .vxe-table--render-default.border--full .vxe-header--column
    ) {
    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4) !important;
}
:deep(.vxe-table--render-default .vxe-table--border-line){
    border: var(--vxe-table-border-width) solid #00fff4;
}
:deep(.vxe-header--row) {
    background: var(--el-color-primary);
    color:#fff;
}
</style>
