mky-vent-base/src/views/vent/monitorManager/comment/warnAnalysis.vue

<template>
    <div class="warnAnalysis">
        <div class="warn-tag">
            <a-tag color="pink" v-for="(item, index) in tagList" :key="index">{{ item.title }}</a-tag>
        </div>
        <div class="warn-content">
            <a-table :columns="analysisColumns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"
                :pagination="pagination" >
                <template #bodyCell="{ column, text }"></template>

            </a-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {analysisColumns} from './comment.data'

let tagList = ref([
    { title: '测试1' },
    { title: '测试2' },
    { title: '测试3' },
    { title: '测试4' },
    { title: '测试5' },
    { title: '测试6' },
])
let pagination = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 总条目数，后端返回
    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
    showSizeChanger: true, // 是否可改变每页显示条数
    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
  });
let tableData=ref<any[]>([])
</script>

<style lang="less" scoped>
.warnAnalysis {
    position: relative;
    width: 100%;
    height: 100%;

    .warn-tag {
        height: 30px;
        margin: 10px;
        text-align: center;
    }

    .warn-content {
        margin: 10px;
    }
}

::v-deep .zxm-tag {
    font-size: 14px;
    padding: 0px 20px;
    line-height: 28px;
    background: linear-gradient(#2cd1ff55, #1eb0ff55);
    border-color: #74e9fe;
    color: #fff;
}
</style>