Table 表格

2024-07-14 17:12| 来源: 网络整理| 查看: 265

# Table 表格

对 antv 的 table 组件进行封装

如果文档内没有，可以尝试在在线示例内寻找

# Usage# 示例操作按钮 import { defineComponent, ref } from 'vue'; import { BasicTable } from '/@/components/Table'; import { getBasicColumns, getBasicData } from './tableData'; export default defineComponent({ components: { BasicTable }, setup() { return { columns: getBasicColumns(), data: getBasicData(), }; }, }); # template 示例

所有可调用函数见下方 Methods 说明

import { defineComponent, ref, unref } from 'vue'; import { BasicTable, TableActionType } from '/@/components/Table'; import { getBasicColumns, getBasicShortColumns } from './tableData'; import { demoListApi } from '/@/api/demo/table'; export default defineComponent({ components: { BasicTable }, setup() { const tableRef = ref(null); function getTableAction() { const tableAction = unref(tableRef); if (!tableAction) { throw new Error('tableAction is null'); } return tableAction; } function changeLoading() { getTableAction().setLoading(true); setTimeout(() => { getTableAction().setLoading(false); }, 1000); } return { tableRef, api: demoListApi, columns: getBasicColumns(), changeLoading, }; }, }); # BasicColumn 和 tableAction 通过权限和业务控制显示隐藏的示例 import { defineComponent } from 'vue'; import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table'; import { demoListApi } from '/@/api/demo/table'; const columns: BasicColumn[] = [ { title: '姓名', dataIndex: 'name', auth: 'test', // 根据权限控制是否显示: 无权限，不显示 }, { title: '地址', dataIndex: 'address', auth: 'super', // 同时根据权限控制是否显示 ifShow: (_column) => { return true; // 根据业务控制是否显示 }, }, ]; export default defineComponent({ components: { BasicTable, TableAction }, setup() { const [registerTable] = useTable({ title: 'TableAction组件及固定列示例', api: demoListApi, columns: columns, bordered: true, actionColumn: { width: 250, title: 'Action', dataIndex: 'action', }, }); function handleEdit(record: Recordable) { console.log('点击了编辑', record); } function handleDelete(record: Recordable) { console.log('点击了删除', record); } function handleOpen(record: Recordable) { console.log('点击了启用', record); } return { registerTable, handleEdit, handleDelete, handleOpen, }; }, }); # useTable

使用组件自带的 useTable 可以方便使用表单

下面是一个使用简单表格的示例，

import { defineComponent } from 'vue'; import { BasicTable, useTable } from '/@/components/Table'; import { getBasicColumns, getBasicShortColumns } from './tableData'; import { demoListApi } from '/@/api/demo/table'; export default defineComponent({ components: { BasicTable }, setup() { const [ registerTable, { setLoading, }, ] = useTable({ api: demoListApi, columns: getBasicColumns(), }); function changeLoading() { setLoading(true); setTimeout(() => { setLoading(false); }, 1000); } } return { registerTable, changeLoading, }; }, }); # Usage

用于调用 Table 内部方法及 table 参数配置

// 表格的props也可以直接注册到useTable内部 const [register, methods] = useTable(props);

export default defineComponent({ components: { BasicForm }, setup() { const [register] = useTable(); return { register }; }, }); # Methods

setProps

类型：(props: Partial) => void

说明: 用于设置表格参数

reload

类型：(opt?: FetchParams) => Promise

说明: 刷新表格

redoHeight

类型：() => void

说明: 重新计算表格高度

setLoading

类型：(loading: boolean) => void

说明: 设置表格 loading 状态

getDataSource

获取表格数据

类型：() => T[]

说明: 获取表格数据

getRawDataSource

获取后端接口原始数据

类型：() => T

说明: 获取后端接口原始数据

getColumns

类型：(opt?: GetColumnsParams) => BasicColumn[]

说明: 获取表格数据

setColumns

类型：(columns: BasicColumn[] | string[]) => void

说明: 设置表头数据

setTableData

类型：(values: T[]) => void

说明: 设置表格数据

setPagination

类型：(info: Partial) => void

说明: 设置分页信息

deleteSelectRowByKey

类型：(key: string) => void

说明: 根据 key 删除取消选中行

getSelectRowKeys

类型：() => string[]

说明: 获取选中行的 keys

getSelectRows

类型：() => T[]

说明: 获取选中行的 rows

clearSelectedRowKeys

类型：() => void

说明: 清空选中行

setSelectedRowKeys

类型：(rowKeys: string[] | number[]) => void

说明: 设置选中行

getPaginationRef

类型：() => PaginationProps | boolean

说明: 获取当前分页信息

getShowPagination

类型：() => boolean

说明: 获取当前是否显示分页

setShowPagination

类型：(show: boolean) => Promise

说明: 设置当前是否显示分页

getRowSelection

类型：() => TableRowSelection

说明: 获取勾选框信息

updateTableData

类型：(index: number, key: string, value: any)=>void

说明: 更新表格数据

updateTableDataRecord

类型： (rowKey: string | number, record: Recordable) => Recordable | void

说明：根据唯一的 rowKey 更新指定行的数据.可用于不刷新整个表格而局部更新数据

deleteTableDataRecord

类型： (rowKey: string | number | string[] | number[]) => void

说明：根据唯一的rowKey 动态删除指定行的数据.可用于不刷新整个表格而局部更新数据

insertTableDataRecord

类型： (record: Recordable, index?: number) => Recordable | void

说明：可根据传入的 index 值决定插入数据行的位置，不传则是顺序插入，可用于不刷新整个表格而局部更新数据

getForm

类型：() => FormActionType

说明: 如果开启了搜索区域。可以通过该函数获取表单对象函数进行操作

expandAll

类型：() => void

说明: 展开树形表格

collapseAll

类型：() => void

说明: 折叠树形表格

# Props

温馨提醒

除以下参数外，官方文档内的 props 也都支持，具体可以参考 antv table注意：defaultExpandAllRows、defaultExpandedRowKeys 属性在 basicTable 中不受支持，并且在antv table v2.2.0 之后也被移除。属性类型默认值可选值说明版本clickToRowSelectbooleantrue-点击行是否选中 checkbox 或者 radio。需要开启sortFn(sortInfo: SorterResult) => any--自定义排序方法。见下方全局配置说明filterFn(sortInfo: Partial) => any--自定义过滤方法。见下方全局配置说明showTableSettingbooleanfalse-显示表格设置工具tableSettingTableSetting--表格设置工具配置，见下方 TableSettingstripedbooleantrue-斑马纹insetbooleanfalse-取消表格的默认 paddingautoCreateKeybooleantrue-是否自动生成 keyshowSummarybooleanfalse-是否显示合计行summaryDataany[]--自定义合计数据。如果有则显示该数据emptyDataIsShowTablebooleantrue-在启用搜索表单的前提下，是否在表格没有数据的时候显示表格summaryFunc(...arg) => any[]--计算合计行的方法canRowDragbooleanfalse-是否可拖拽行排序canColDragbooleanfalse-是否可拖拽列isTreeTablebooleanfalse-是否树表api(...arg: any) => Promise--请求接口，可以直接将src/api内的函数直接传入beforeFetch(T)=>T--请求之前对参数进行处理afterFetch(T)=>T--请求之后对返回值进行处理handleSearchInfoFn(T)=>T--开启表单后，在请求之前处理搜索条件参数fetchSettingFetchSetting--接口请求配置，可以配置请求的字段和响应的字段名，见下方全局配置说明immediatebooleantrue-组件加载后是否立即请求接口，在 api 有传的情况下，如果为 false，需要自行使用 reload 加载表格数据searchInfoany--额外的请求参数useSearchFormbooleanfalse-使用搜索表单formConfigany--表单配置，参考表单组件的 Propscolumnsany--表单列信息 BasicColumn[]showIndexColumnbooleanture-是否显示序号列indexColumnPropsany--序号列配置 BasicColumnactionColumnany--表格右侧操作列配置 BasicColumnellipsisbooleantrue-文本超过宽度是否显示...canResizebooleantrue-是否可以自适应高度(如果置于 PageWrapper 组件内，请勿启用 PageWrapper 的 fixedHeight 属性，二者不可同时使用)clearSelectOnPageChangebooleanfalse-切换页码是否重置勾选状态resizeHeightOffsetnumber0-表格自适应高度计算结果会减去这个值rowSelectionany--选择列配置titlestring--表格标题titleHelpMessagestring ｜ string[]--表格标题右侧温馨提醒maxHeightnumber--表格最大高度，超出会显示滚动条dataSourceany[]--表格数据，非 api 加载情况borderedbooleanfalse-是否显示表格边框paginationany--分页信息配置，为 false 不显示分页loadingbooleanfalse-表格 loading 状态scrollany--参考官方文档 scrollbeforeEditSubmit({record: Recordable,index: number,key: string | number,value: any}) => Promise--单元格编辑状态提交回调，返回 false 将阻止单元格提交数据到 table。该回调在行编辑模式下无效。2.7.2# TableSetting{ // 是否显示刷新按钮 redo?: boolean; // 是否显示尺寸调整按钮 size?: boolean; // 是否显示字段调整按钮 setting?: boolean; // 是否显示全屏按钮 fullScreen?: boolean; } # BasicColumn

除参考官方 Column 配置外，扩展以下参数

属性类型默认值可选值说明defaultHiddenbooleanfalse-默认隐藏，可在列配置显示helpMessagestring｜string[]｜VNodeChild｜JSXElement--列头右侧帮助文本editboolean--是否开启单元格编辑editRowboolean--是否开启行编辑editablebooleanfalse-是否处于编辑状态editComponentComponentTypeInput-编辑组件editComponentPropsany--对应编辑组件的 propseditRule((text: string, record: Recordable) => Promise)--对应编辑组件的表单校验editValueMap(value: any) => string--对应单元格值枚举onEditRow（）=>void--触发行编辑formatCellFormat--单元格格式化authRoleEnum ｜ RoleEnum[] ｜ string ｜ string[]--根据权限编码来控制当前列是否显示ifShowboolean ｜ ((action: ActionItem) => boolean)--根据业务状态来控制当前列是否显示# EditComponentTypeexport type ComponentType = | 'Input' | 'InputNumber' | 'Select' | 'ApiSelect' | 'Checkbox' | 'Switch' | 'DatePicker' // v2.5.0 以上 | 'TimePicker'; // v2.5.0 以上 # CellFormatexport type CellFormat = | string | ((text: string, record: Recordable, index: number) => string | number) | Map; # 事件

温馨提醒

除以下事件外，官方文档内的 event 也都支持，具体可以参考 antv table

事件回调参数说明fetch-successFunction({items,total})接口请求成功后触发fetch-errorFunction(error)错误信息selection-changeFunction({keys，rows})勾选事件触发row-clickFunction(record, index, event)行点击触发row-dbClickFunction(record, index, event)行双击触发row-contextmenuFunction(record, index, event)行右键触发row-mouseenterFunction(record, index, event)行移入触发row-mouseleaveFunction(record, index, event)行移出触发edit-endFunction({record, index, key, value})单元格编辑完成触发edit-cancelFunction({record, index, key, value})单元格取消编辑触发edit-row-endFunction()行编辑结束触发edit-changeFunction({column,value,record})单元格编辑组件的 value 发生变化时触发

edit-change 说明

从版本 2.4.2 起，对于 edit-change 事件，record 中的 editValueRefs 装载了当前行的所有编辑组件（如果有的话）的值的 ref 对象，可用于处理同一行中的编辑组件的联动。请看下面的例子

function onEditChange({ column, record }) { // 当同一行的单价或者数量发生变化时，更新合计金额（三个数据均为当前行编辑组件的值） if (column.dataIndex === 'qty' || column.dataIndex === 'price') { const { editValueRefs: { total, qty, price }, } = record; total.value = unref(qty) * unref(price); } } # Slots

温馨提醒

除以下参数外，官方文档内的 slot 也都支持，具体可以参考 antv table

名称说明版本tableTitle表格顶部左侧区域toolbar表格顶部右侧区域expandedRowRender展开行区域headerTop表格顶部区域（标题上方）2.6.1# Form-Slots

当开启 form 表单后。以form-xxxx为前缀的 slot 会被视为 form 的 slot

xxxx 为 form 组件的 slot。具体参考form 组件文档

e.g

form-submitBefore # ColumnSetting 组件

字段调整组件

提供了可视化操作表格每一列的是否展示、位置、固定；包括序号列、勾选列。会响应tableMethods中setColumns和setProps方法的更改内容。

值得注意的是

序号列和勾选列是在 table 的 props 中定义的，对应的字段分别是showIndexColumn、rowSelection。因此在动态改变表格列配置的时候，建议使用setProps方法，并显式地设置这两个字段的值来保证达到预期效果

// ... const [registerTable, { setProps }] = useTable({...}) setProps({ columns: [], // 表格的列配置 BasicColumn[] showIndexColumn: false, // 是否展示序号列 rowSelection: false // 勾选列配置 }) # 内置组件（只能用于表格内部）# TableAction

用于表格右侧操作列渲染

# Props属性类型默认值可选值说明版本actionsActionItem[]--右侧操作列按钮列表dropDownActionsActionItem[]--右侧操作列更多下拉按钮列表stopButtonPropagationbooleanfalsetrue/false是否阻止操作按钮的 click 事件冒泡2.5.0

ActionItem

export interface ActionItem { // 按钮文本 label: string; // 是否禁用 disabled?: boolean; // 按钮颜色 color?: 'success' | 'error' | 'warning'; // 按钮类型 type?: string; // button组件props props?: any; // 按钮图标 icon?: string; // 气泡确认框 popConfirm?: PopConfirm; // 是否显示分隔线，v2.0.0+ divider?: boolean; // 根据权限编码来控制当前列是否显示，v2.4.0+ auth?: RoleEnum | RoleEnum[] | string | string[]; // 根据业务状态来控制当前列是否显示，v2.4.0+ ifShow?: boolean | ((action: ActionItem) => boolean); // 点击回调 onClick?: Fn; // Tooltip配置，2.5.3以上版本支持，可以配置为string，或者完整的tooltip属性 tooltip?: string | TooltipProps; }

有关 TooltipProps 的说明，请参考tooltip

PopConfirm

export interface PopConfirm { title: string; okText?: string; cancelText?: string; confirm: Fn; cancel?: Fn; icon?: string; } # TableImg

用于渲染单元格图片,支持图片预览

# Props属性类型默认值可选值说明版本imgListstring[]--图片地址列表sizenumber--图片大小simpleShowbooleanfalsetrue/false简单显示模式（只显示第一张图片）2.5.0showBadgebooleantruetrue/false简单模式下是否显示计数 Badge2.5.0marginnumber4-常规模式下的图片间距2.5.0srcPrefixstring--在每一个图片 src 前插入的内容2.5.0# 全局配置

在componentsSettings 可以配置全局参数。用于统一整个项目的风格。可以通过 props 传值覆盖

【本文地址】

公司简介

联系我们