table.vue 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!-- -->
  2. <template>
  3. <div class="y-tabs">
  4. 123456
  5. <el-table :data="tableData">
  6. <template>
  7. <el-table-column v-for="(item, index) in tableColumns" :key="index" v-bind="item" v-slot="scope">
  8. <slot :name="item.prop" :row="scope.row">{{ scope.row.prop }}</slot>
  9. </el-table-column>
  10. </template>
  11. </el-table>
  12. <Pagination layout="total, sizes, prev, pager, next, jumper" :pageable="pageable"
  13. :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" />
  14. </div>
  15. </template>
  16. <script setup lang="ts">
  17. import { ref, CSSProperties } from "vue";
  18. import { useTable } from '@/hooks/useTable'
  19. import { TableProps } from 'element-plus'
  20. import { ColumnProps } from './interface/index'
  21. interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
  22. columns: ColumnProps[] // 列配置项
  23. requestApi: (params: any) => Promise<any> // 请求表格数据的api ==> 必传
  24. dataCallback?: (data: any) => any // 返回数据的回调函数,可以对数据进行处理 ==> 非必传
  25. title?: string // 表格标题,目前只在打印的时候用到 ==> 非必传
  26. pagination?: boolean // 是否需要分页组件 ==> 非必传(默认为true)
  27. layout?: string
  28. initParam?: any // 初始化请求参数 ==> 非必传(默认为{})
  29. border?: boolean // 是否带有纵向边框 ==> 非必传(默认为true)
  30. toolButton?: boolean // 是否显示表格功能按钮 ==> 非必传(默认为true)
  31. selectId?: string // 当表格数据多选时,所指定的 id ==> 非必传(默认为 id)
  32. displayHeader?: boolean // 是否隐藏头部
  33. rowClick?: (row: any, column: any, event: any) => void // 点击行
  34. selectionChange?: (row: any) => void // 选择函数
  35. getRowKey?: ((row: any) => string) | string // 用于优化select勾选框
  36. tableRowClassName?: (data: any) => CSSProperties
  37. }
  38. // 接受父组件参数,配置默认值
  39. const props = withDefaults(defineProps<ProTableProps>(), {
  40. columns: () => [],//渲染表格
  41. pagination: true,//是否显示分页
  42. layout: 'total, sizes, prev, pager, next, jumper',
  43. initParam: {},//请求参数
  44. border: false,
  45. toolButton: true,
  46. selectId: 'id',
  47. searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
  48. })
  49. // 表格操作 Hooks
  50. const { tableData, getTableList, pageable, handleSizeChange, handleCurrentChange } = useTable(
  51. props.requestApi,
  52. props.initParam,
  53. props.pagination,
  54. props.dataCallback
  55. )
  56. getTableList()
  57. // 接收 columns 并设置为响应式
  58. const tableColumns = ref<ColumnProps[]>(props.columns)
  59. </script>
  60. <style lang="scss">
  61. .y-tabs {
  62. background: var(--y-card-background);
  63. border-radius: var(--y-radius);
  64. margin-bottom: var(--y-margin);
  65. padding: var(--y-padding);
  66. &-headers {
  67. border-bottom: var(--y-border);
  68. box-sizing: border-box;
  69. padding: var(--y-padding);
  70. }
  71. &-item {
  72. padding: var(--y-padding);
  73. }
  74. }
  75. </style>