SZYGM1.0/src/components/table2/index.vue

<template>
  <div class="table2">
    <div
      :class="isStatus || isStatuser ? 'flex' : 'flex-end'"
      class="data-table-btn"
    >
      <div v-if="isStatus || isStatuser" class="vStatus">
        <slot name="header" />
      </div>
      <template v-if="isBtn">
        <template v-if="isAuth">
          <el-button size="default" plain class="btn-white">新增</el-button>
        </template>
      </template>
    </div>
    <el-auto-resizer>
      <template #default="{ height, width }">
        <el-table-v2
          :columns="columns"
          :data="data"
          :width="width"
          :height="height"
          fixed
        />
      </template>
    </el-auto-resizer>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  //是否显示新增按钮
  isBtn: {
    type: Boolean,
    default: true,
  },
  //是否启用权限按钮
  isAuth: {
    type: Boolean,
    default: false,
  },
  //是否显示状态
  isStatus: {
    type: Boolean,
    default: false,
  },
  //是否显示名称
  isStatuser: {
    type: Boolean,
    default: false,
  },
});
const generateColumns = (length = 10, prefix = "column-", props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
  }));

const generateData = (
  columns: ReturnType<typeof generateColumns>,
  length = 200,
  prefix = "row-"
) =>
  Array.from({ length }).map((_, rowIndex) => {
    return columns.reduce(
      (rowData, column, columnIndex) => {
        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
        return rowData;
      },
      {
        id: `${prefix}${rowIndex}`,
        parentId: null,
      }
    );
  });

const columns = generateColumns(10);
const data = generateData(columns, 200);
</script>

<style lang="scss" scoped>
.table2 {
  height: 100%;
  .data-table-btn {
    line-height: 32px;
    margin-bottom: 20px;
  }
}
</style>