Table 表格

antv 的 table 组件进行封装

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

Usage

示例

<template>
  <div class="p-4">
    <BasicTable
      title="基础示例"
      titleHelpMessage="温馨提醒"
      :columns="columns"
      :dataSource="data"
      :canResize="canResize"
      :loading="loading"
      :striped="striped"
      :bordered="border"
      :pagination="{ pageSize: 20 }"
    >
      <template #toolbar>
        <a-button type="primary"> 操作按钮 </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  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(),
      };
    },
  });
</script>

template 示例

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

<template>
  <div class="p-4">
    <BasicTable
      :canResize="false"
      title="RefTable示例"
      titleHelpMessage="使用Ref调用表格内方法"
      ref="tableRef"
      :api="api"
      :columns="columns"
      rowKey="id"
      :rowSelection="{ type: 'checkbox' }"
    />
  </div>
</template>
<script lang="ts">
  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<Nullable<TableActionType>>(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,
      };
    },
  });
</script>

BasicColumn 和 tableAction 通过权限和业务控制显示隐藏的示例

<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
              auth: 'other', // 根据权限控制是否显示: 无权限,不显示
            },
            {
              label: '删除',
              icon: 'ic:outline-delete-outline',
              onClick: handleDelete.bind(null, record),
              auth: 'super', // 根据权限控制是否显示: 有权限,会显示
            },
          ]"
          :dropDownActions="[
            {
              label: '启用',
              popConfirm: {
                title: '是否启用?',
                confirm: handleOpen.bind(null, record),
              },
              ifShow: (_action) => {
                return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
              },
            },
            {
              label: '禁用',
              popConfirm: {
                title: '是否禁用?',
                confirm: handleOpen.bind(null, record),
              },
              ifShow: () => {
                return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
              },
            },
            {
              label: '同时控制',
              popConfirm: {
                title: '是否动态显示?',
                confirm: handleOpen.bind(null, record),
              },
              auth: 'super', // 同时根据权限和业务控制是否显示
              ifShow: () => {
                return true; // 根据业务控制是否显示
              },
            },
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  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',
          slots: { customRender: '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,
      };
    },
  });
</script>

useTable

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

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

<template>
  <BasicTable @register="registerTable" />
</template>
<script lang="ts">
  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,
      };
    },
  });
</script>

Usage

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

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

register

register 用于注册 useTable,如果需要使用useTable提供的 api,必须将 register 传入组件的 onRegister

<template>
  <BasicTable @register="register" />
</template>
<script>
  export default defineComponent({
    components: { BasicForm },
    setup() {
      const [register] = useTable();
      return { register };
    },
  });
</script>

Methods

setProps

类型:(props: Partial<BasicTableProps>) => void

说明: 用于设置表格参数

reload

类型:(opt?: FetchParams) => Promise<void>

说明: 刷新表格

redoHeight

类型:() => void

说明: 重新计算表格高度

setLoading

类型:(loading: boolean) => void

说明: 设置表格 loading 状态

getDataSource

获取表格数据

类型:<T = Recordable>() => T[]

说明: 获取表格数据

getRawDataSource

获取后端接口原始数据

类型:<T = Recordable>() => T

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

getColumns

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

说明: 获取表格数据

setColumns

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

说明: 设置表头数据

setTableData

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

说明: 设置表格数据

setPagination

类型:(info: Partial<PaginationProps>) => void

说明: 设置分页信息

deleteSelectRowByKey

类型:(key: string) => void

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

getSelectRowKeys

类型:() => string[]

说明: 获取选中行的 keys

getSelectRows

类型:<T = Recordable>() => T[]

说明: 获取选中行的 rows

clearSelectedRowKeys

类型:() => void

说明: 清空选中行

setSelectedRowKeys

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

说明: 设置选中行

getPaginationRef

类型:() => PaginationProps | boolean

说明: 获取当前分页信息

getShowPagination

类型:() => boolean

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

setShowPagination

类型:(show: boolean) => Promise<void>

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

getRowSelection

类型:() => TableRowSelection<Recordable>

说明: 获取勾选框信息

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
  • 注意:defaultExpandAllRowsdefaultExpandedRowKeys 属性在 basicTable 中不受支持,并且在antv table v2.2.0 之后也被移除。
属性类型默认值可选值说明版本
clickToRowSelectbooleantrue-点击行是否选中 checkbox 或者 radio。需要开启
sortFn(sortInfo: SorterResult<any>) => any--自定义排序方法。见下方全局配置说明
filterFn(sortInfo: Partial<Recordable<string[]>>) => any--自定义过滤方法。见下方全局配置说明
showTableSettingbooleanfalse-显示表格设置工具
tableSettingTableSetting--表格设置工具配置,见下方 TableSetting
stripedbooleantrue-斑马纹
insetbooleanfalse-取消表格的默认 padding
autoCreateKeybooleantrue-是否自动生成 key
showSummarybooleanfalse-是否显示合计行
summaryDataany[]--自定义合计数据。如果有则显示该数据
emptyDataIsShowTablebooleantrue-在启用搜索表单的前提下,是否在表格没有数据的时候显示表格
summaryFunc(...arg) => any[]--计算合计行的方法
canRowDragbooleanfalse-是否可拖拽行排序
canColDragbooleanfalse-是否可拖拽列
isTreeTablebooleanfalse-是否树表
api(...arg: any) => Promise<any>--请求接口,可以直接将src/api内的函数直接传入
beforeFetch(T)=>T--请求之前对参数进行处理
afterFetch(T)=>T--请求之后对返回值进行处理
handleSearchInfoFn(T)=>T--开启表单后,在请求之前处理搜索条件参数
fetchSettingFetchSetting--接口请求配置,可以配置请求的字段和响应的字段名,见下方全局配置说明
immediatebooleantrue-组件加载后是否立即请求接口,在 api 有传的情况下,如果为 false,需要自行使用 reload 加载表格数据
searchInfoany--额外的请求参数
useSearchFormbooleanfalse-使用搜索表单
formConfigany--表单配置,参考表单组件的 Props
columnsany--表单列信息 BasicColumn[]
showIndexColumnbooleanture-是否显示序号列
indexColumnPropsany--序号列配置 BasicColumn
actionColumnany--表格右侧操作列配置 BasicColumn
ellipsisbooleantrue-文本超过宽度是否显示...
canResizebooleantrue-是否可以自适应高度(如果置于 PageWrapper 组件内,请勿启用 PageWrapper 的 fixedHeight 属性,二者不可同时使用)
clearSelectOnPageChangebooleanfalse-切换页码是否重置勾选状态
resizeHeightOffsetnumber0-表格自适应高度计算结果会减去这个值
rowSelectionany--选择列配置
titlestring--表格标题
titleHelpMessagestring | string[]--表格标题右侧温馨提醒
maxHeightnumber--表格最大高度,超出会显示滚动条
dataSourceany[]--表格数据,非 api 加载情况
borderedbooleanfalse-是否显示表格边框
paginationany--分页信息配置,为 false 不显示分页
loadingbooleanfalse-表格 loading 状态
scrollany--参考官方文档 scroll
beforeEditSubmit({record: Recordable,index: number,key: string | number,value: any}) => Promise<any>--单元格编辑状态提交回调,返回 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--对应编辑组件的 props
editRule((text: string, record: Recordable) => Promise<string>)--对应编辑组件的表单校验
editValueMap(value: any) => string--对应单元格值枚举
onEditRow()=>void--触发行编辑
formatCellFormat--单元格格式化
authRoleEnumRoleEnum[]stringstring[]--根据权限编码来控制当前列是否显示
ifShowboolean | ((action: ActionItem) => boolean)--根据业务状态来控制当前列是否显示

EditComponentType

export type ComponentType =
  | 'Input'
  | 'InputNumber'
  | 'Select'
  | 'ApiSelect'
  | 'Checkbox'
  | 'Switch'
  | 'DatePicker' // v2.5.0 以上
  | 'TimePicker'; // v2.5.0 以上

CellFormat

export type CellFormat =
  | string
  | ((text: string, record: Recordable, index: number) => string | number)
  | Map<string | number, any>;

事件

温馨提醒

除以下事件外,官方文档内的 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 组件

字段调整组件

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

值得注意的是

序号列勾选列是在 table 的 props 中定义的,对应的字段分别是showIndexColumnrowSelection。因此在动态改变表格列配置的时候,建议使用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.0
showBadgebooleantruetrue/false简单模式下是否显示计数 Badge2.5.0
marginnumber4-常规模式下的图片间距2.5.0
srcPrefixstring--在每一个图片 src 前插入的内容2.5.0

全局配置

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