vent-template/src/views/vent/monitorManager/comment/MonitorTable1.vue

<template>
  <div class="monitor-table">
    <!-- <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable> -->
    <!-- <a-table :row-selection="rowSelection" :columns="columns.value" :data-source="dataTableSource" row-key="dataIndex">
      <template #name="{ text }">
        <a>{{ text }}</a>
      </template>
    </a-table> -->
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { computed } from '@vue/reactivity';
  import { debug } from 'console';
  import { defineExpose, toRaw, watch, ref } from 'vue';
  import { BasicColumn } from '/@/components/Table';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';

  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    searchFormSchema: {
      type: Array,
      default: () => [],
    },
    list: {
      type: Function,
      // required: true,
    },
    designScope: {
      type: String,
    },
    title: {
      type: String,
    },
  });
  const dataTableSource = ref([]);
  watch(
    () => props.dataSource,
    (newVal) => {
      const list = [];
      newVal.forEach((item) => {
        list.push(toRaw(item));
      });
      dataTableSource.value = list;
    }
  );
  const columns = getTableHeaderColumns(props.columnsType);

  /**
   * 操作列定义
   * @param record
   */
  function getActions(record) {
    return [
      {
        label: '详情',
        onClick: openDetail.bind(null, record),
      },
    ];
  }

  const rowSelection = {
    onChange: (selectedRowKeys: [], selectedRows: BasicColumn[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    // getCheckboxProps: (record: BasicColumn) => ({
    //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //   name: record.name,
    // }),
  };

  function openDetail(record) {
    record;
  }
</script>

<style scoped lang="less">
  @ventSpace: zxm;
  :deep(.@{ventSpace}-table-body) {
    height: auto !important;
  }
  .monitor-table {
    width: 100%;
  }
</style>