96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
|
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
|
|||
|
|
// 前端分页数据
|
|||
|
|
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
|
|||
|
|
// 自定义组件/函数渲染
|
|||
|
|
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
|
|||
|
|
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>>
|
|||
|
|
}
|
|||
|
|
}
|