admin-govern/types/table.d.ts

import Table from '@/components/table/index.vue'
import { Component } from 'vue'
import type { VxeColumnProps, VxeTableInstance } from 'vxe-table'
import type { PopconfirmProps, ButtonType, ButtonProps } from 'element-plus'
import { Mutable } from 'element-plus/es/utils'

declare global {
    interface CnTable {
        ref: VxeTableInstance | null
        data: TableRow[] | any
        allData: TableRow[] | any
        allFlag: Boolean
        // 前端分页数据
        webPagingData: TableRow[][]
        // 表格加载状态
        loading: boolean
        // 当前选中行
        selection: TableRow[]
        // 表格列定义
        column: TableColumn[]
        // 数据总量
        total: number
        params: {
            pageNum: number
            pageSize: number
            [key: string]: any
        }
        loadCallback: (() => void) | null
        resetCallback: (() => void) | null
        beforeSearchFun: (() => void) | null
        height: string
        publicHeight: number
    }

    /* 表格行 */
    interface TableRow extends anyObj {
        children?: TableRow[]
    }

    /* 表格列 */
    interface TableColumn extends VxeColumnProps {
        render?:
            | 'icon'
            | 'switch'
            | 'image'
            | 'tag'
            | 'datetime'
            | 'color'
            | 'buttons'
            | 'slot'
            | 'customTemplate'
            | 'customRender'
        // 默认值
        default?: any
        // 操作按钮组
        buttons?: OptButton[]
        // 自定义数据:比如渲染为Tag时,可以指定不同值时的Tag的Type属性 { open: 'success', close: 'info' }
        custom?: any
        // 值替换数据,如{open: '开'}
        replaceValue?: any
        // 时间格式化
        timeFormat?: string
         // 开关控制
         onChangeField?: (row: TableRow, value: any) => void
         activeValue?: string
         inactiveValue?: string
         activeText?: string
         inactiveText?: string
        // 自定义组件/函数渲染
        customRender?: string | Component
        // 使用了 render 属性时,渲染前对字段值的预处理方法，请返回新值
        renderFormatter?: (row: TableRow, field: TableColumn, value: any, column: any, index: number) => any
        // 自定义渲染模板，方法可返回jsx内容
        customTemplate?: (
            row: TableRow,
            field: TableColumn,
            value: any,
            column: VxeColumnProps,
            index: number
        ) => string
        children?: TableColumn[]
    }

    /* 表格右侧操作按钮 */
    interface OptButton {
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮,basicButton=普通按钮
        render: 'tipButton' | 'confirmButton' | 'moveButton' | 'basicButton'
        name?: string
        title?: string
        text?: string
        class?: string
        loading?: string
        type: ButtonType
        icon: string
        popconfirm?: Partial<Mutable<PopconfirmProps>>
        disabledTip?: boolean
        // 自定义点击事件
        click?: (row: TableRow, field: TableColumn) => void
        // 按钮是否禁用，请返回布尔值
        disabled?: (row: TableRow, field: TableColumn) => boolean
        // 自定义el-button属性
        attr?: Partial<Mutable<ButtonProps>>
    }
}