83 lines
2.4 KiB
Vue
83 lines
2.4 KiB
Vue
<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>
|