108 lines
3.4 KiB
TypeScript
108 lines
3.4 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
|
||
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'
|
||
| 'renderFormatter'
|
||
| 'customRender'
|
||
// 默认值
|
||
default?: any
|
||
// 操作按钮组
|
||
buttons?: OptButton[]
|
||
// 自定义数据:比如渲染为Tag时,可以指定不同值时的Tag的Type属性 { open: 'success', close: 'info' }
|
||
custom?: any
|
||
// 值替换数据,如{open: '开'}
|
||
replaceValue?: any
|
||
effect?: 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
|
||
type: ButtonType
|
||
icon: string
|
||
popconfirm?: Partial<Mutable<PopconfirmProps>>
|
||
disabledTip?: boolean
|
||
// 自定义点击事件
|
||
click?: (row: TableRow, field: TableColumn) => void
|
||
|
||
// 按钮是否禁用，请返回布尔值
|
||
disabled?: (row: TableRow, field: TableColumn) => boolean
|
||
showDisabled?: (row: TableRow, field: TableColumn) => boolean
|
||
// 自定义el-button属性
|
||
attr?: Partial<Mutable<ButtonProps>>
|
||
}
|
||
}
|