Cold_putoutstorage_web/src/components/tableCustom.vue

<!--  -->
<template>
    <div class="y-tabs">
        <el-table v-loading="loading" :data="tableData" @row-click="props.rowClick"
            @selection-change="props.selectionChange" :row-key="props.getRowKey"
            :row-style="tableRowClassName">
            <!-- 默认插槽 -->
            <slot></slot>
            <template v-for="item in tableColumns" :key="item">
                <!-- selection || index -->
                <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'"
                    v-if="item.type == 'selection' || item.type == 'index'" :show-overflow-tooltip="true"></el-table-column>
                <!-- <el-table-column v-bind="item" v-slot="scope">
                    {{ scope.row.prop }}
                </el-table-column> -->

                <!-- 普通渲染 -->
                <el-table-column v-bind="item" :align="item.align ?? 'left'" :show-overflow-tooltip="true"
                    v-if="!item.type && item.prop && item.name !== item.prop" v-slot="scope">
                    <div v-if="item.prop == 'T_wait_audit'" style="color: red;">
                        {{ scope.row[item.prop] == true ? '待审核' : '' }}
                    </div>
                    <el-tooltip v-if="item.ellipsis" effect="dark" :content="scope.row[item.prop]" placement="bottom">
                        {{ scope.row[item.prop] }}
                    </el-tooltip>
                    <slot v-if="item.fixed" :name="item.fixed" :row="scope.row"></slot>
                </el-table-column>

                <!-- 自定义slot 可以显示一些tab等等-->
                <el-table-column v-bind="item" :align="item.align ?? 'left'" :show-overflow-tooltip="true"
                    v-if="!item.type && item.prop && item.name === item.prop" v-slot="scope">
                    <slot :name="item.prop" :row="scope.row"></slot>
                </el-table-column>
            </template>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination v-model:current-page="pageable.pageNum" v-model:page-size="pageable.pageNum"
         :layout="props.layout" :total="pageable.total" style="margin-top: 50px;"
         @size-change="handleSizeChange" @current-change="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, 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, loading, 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-top: var(--y-margin);

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

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