基础表格 ​

<template>
  <TableGenerator ref="RefTableGenerator" v-bind="{ ...tableAttrs }">
    <template #operation="scope">
      <el-button type="primary">Primary</el-button>
    </template>
  </TableGenerator>
</template>

<script lang="tsx" setup>
// import { TableGenerator } from 'element-plus-generator/lib/index.ts'
import { TableGenerator } from 'element-plus-generator'
import type { TableAttrs, RefTableGenerator } from 'element-plus-generator/lib/type'
import { ref, onMounted } from 'vue'

const RefTableGenerator = ref<RefTableGenerator>()
const tableAttrs = ref<TableAttrs>({
  loading: false,
  data: [],
  tableOption: [
    {
      prop: 'date',
      label: 'Date',
      width: '180'
    }, {
      prop: 'name',
      label: 'Name',
      width: '180'
    }, {
      prop: 'address',
      label: 'Address',
    },
  ]
})

function getTableData() {
  tableAttrs.value.loading = true
  setTimeout(() => {
    tableAttrs.value.data = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]
    tableAttrs.value.loading = false
  }, 1000);
}

getTableData()

onMounted(() => {
  console.log(RefTableGenerator.value());
})
</script>