Cold_putoutstorage_web/src/components/table.vue

<!--  -->
<template>
    <div class="y-tabs">
        123456
        <el-table :data="tableData">
            <template>
                <el-table-column v-for="(item, index) in tableColumns" :key="index" v-bind="item" v-slot="scope">
                    <slot :name="item.prop" :row="scope.row">{{ scope.row.prop }}</slot>
                </el-table-column>
            </template>
        </el-table>
        <Pagination layout="total, sizes, prev, pager, next, jumper" :pageable="pageable"
            :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { ref, CSSProperties } from "vue";
import { useTable } from '@/hooks/useTable'

import { TableProps } from 'element-plus'
import { ColumnProps } from './interface/index'
interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
    columns: ColumnProps[] // 列配置项
    requestApi: (params: any) => Promise<any> // 请求表格数据的api ==> 必传
    dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
    title?: string // 表格标题，目前只在打印的时候用到 ==> 非必传
    pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
    layout?: string
    initParam?: any // 初始化请求参数 ==> 非必传（默认为{}）
    border?: boolean // 是否带有纵向边框 ==> 非必传（默认为true）
    toolButton?: boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
    selectId?: string // 当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
    displayHeader?: boolean // 是否隐藏头部
    rowClick?: (row: any, column: any, event: any) => void // 点击行
    selectionChange?: (row: any) => void // 选择函数
    getRowKey?: ((row: any) => string) | string // 用于优化select勾选框
    tableRowClassName?: (data: any) => CSSProperties
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ProTableProps>(), {
    columns: () => [],//渲染表格
    pagination: true,//是否显示分页
    layout: 'total, sizes, prev, pager, next, jumper',
    initParam: {},//请求参数
    border: false,
    toolButton: true,
    selectId: 'id',
    searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
})



// 表格操作 Hooks
const { tableData, getTableList, pageable, handleSizeChange, handleCurrentChange } = useTable(
    props.requestApi, 
    props.initParam, 
    props.pagination, 
    props.dataCallback
)

getTableList()
// 接收 columns 并设置为响应式
const tableColumns = ref<ColumnProps[]>(props.columns)


</script>
<style lang="scss">
.y-tabs {
    background: var(--y-card-background);
    border-radius: var(--y-radius);
    margin-bottom: var(--y-margin);
    padding: var(--y-padding);

    &-headers {
        border-bottom: var(--y-border);
        box-sizing: border-box;
        padding: var(--y-padding);
    }

    &-item {
        padding: var(--y-padding);
    }
}
</style>