yongdeng-admin/src/views/runData/components/boilerData/index.vue

<template>
  <div class="boilerData container-app">
    <vxe-grid v-bind="gridOptions">
      <template #operate="{ row }">
        <vxe-button type="text" status="primary">权限</vxe-button>
      </template>
    </vxe-grid>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { VxeGridProps } from 'vxe-table';
import { tableCloumn } from './constants';

const tableData = [
  {
    id: '1001',
    boilerName: '1号锅炉',
    boilerRoomName: '冠城锅炉房',
    channel1: '12.5',
    channel2: '112.5',
    channel3: '19.5',
    channel4: '15',
    channel5: '12',
    channel6: '18',
  },
  {
    id: '1002',
    boilerName: '1号锅炉',
    boilerRoomName: '冠城锅炉房',
    channel1: '12.5',
    channel2: '112.5',
    channel3: '19.5',
    channel4: '15',
    channel5: '12',
    channel6: '18',
  },
  {
    id: '1003',
    boilerName: '1号锅炉',
    boilerRoomName: '冠城锅炉房',
    channel1: '12.5',
    channel2: '112.5',
    channel3: '19.5',
    channel4: '15',
    channel5: '12',
    channel6: '18',
  },
];

const gridOptions = reactive<VxeGridProps>({
  id: 'toolbar_demo_1',
  border: true,
  stripe: true,
  align: 'center',
  height: '100%',
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  columns: tableCloumn,
  data: [],
  toolbarConfig: {
    custom: true,
    // custom: {
    //   icon: 'vxe-icon-menu',
    // },
  },
});
const init = () => {};
defineExpose({ init });
</script>
<style lang="less" scoped>
:deep(.t-button.t-size-s) {
  font: var(--td-font-body-medium);
}
.boilerData {
  padding: 15px;
  height: 78vh;
}
</style>