a-table 是开发中经常用到的组件，对于 V3 版本做了一些升级和修正，不熟悉的同学可以参考这篇文章的代码，搞定常用的 table attribute。 V3版本官方升级提醒：Table 废弃了 column.slots, 新增 v-slot:bodyCell、v-slot:headerCell，自定义单元格，新增 column.customFilterDropdown v-slot:customFilterDropdown，自定义筛选菜单，新增了 v-slot:customFilterIcon 自定义筛选按钮，但 column.slots 还可用（实际测试2.X版本也会出现控制台警告，上一篇文章已经说过），我们会在下一个大版本时移除。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 Table 参数 说明 类型 默认值 版本 bodyCell 个性化单元格 v-slot:bodyCell=“{text, record, index, column}” - 3.0 bordered 是否展示外边框和列边框 boolean false childrenColumnName 指定树形结构的列名 string children columns 表格列的配置描述，具体项见下表 array - components 覆盖默认的 table 元素 object - customFilterDropdown 自定义筛选菜单，需要配合 column.customFilterDropdown 使用 v-slot:customFilterDropdown=“FilterDropdownProps” - 3.0 customFilterIcon 自定义筛选图标 v-slot:customFilterIcon=“{filtered, column}” - 3.0 customHeaderRow 设置头部行属性 Function(columns, index) - customRow 设置行属性 Function(record, index) - dataSource 数据数组 object[] defaultExpandAllRows 初始时，是否展开所有行 boolean false defaultExpandedRowKeys 默认展开的行 string[] - emptyText 自定义空数据时的显示内容 v-slot:emptyText - 3.0 expandedRowKeys(v-model) 展开的行，控制属性 string[] - expandedRowRender 额外的展开行 Function(record, index, indent, expanded):VNode | v-slot:expandedRowRender=“{record, index, indent, expanded}” - expandFixed 控制展开图标是否固定，可选 true left right boolean | string false 3.0 expandIcon 自定义展开图标 Function(props):VNode | v-slot:expandIcon=“props” - expandRowByClick 通过点击行来展开子行 boolean false footer 表格尾部 Function(currentPageData)|v-slot:footer=“currentPageData” getPopupContainer 设置表格内各类浮层的渲染节点，如筛选菜单 (triggerNode) => HTMLElement () => TableHtmlElement 1.5.0 headerCell 个性化头部单元格 v-slot:headerCell=“{title, column}” - 3.0 indentSize 展示树形数据时，每层缩进的宽度，以 px 为单位 number 15 loading 页面是否加载中 boolean|object false locale 默认文案设置，目前包括排序、过滤、空数据文案 object filterConfirm: 确定 filterReset: 重置 emptyText: 暂无数据 pagination 分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页 object rowClassName 表格行的类名 Function(record, index):string - rowExpandable 设置是否允许行展开 (record) => boolean - 3.0 rowKey 表格行 key 的取值，可以是字符串或一个函数 string|Function(record):string ‘key’ rowSelection 列表项是否可选择，配置项 object null scroll 表格是否可滚动，也可以指定滚动区域的宽、高，配置项 object - showExpandColumn 设置是否展示行展开列 boolean true 3.0 showHeader 是否显示表头 boolean true showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 boolean | Tooltip props true 3.0 size 表格大小 default | middle | small default sortDirections 支持的排序方式，取值为 ascend descend Array [ascend, descend] sticky 设置粘性头部和滚动条 boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement} - 3.0 summary 总结栏 v-slot:summary - 3.0 tableLayout 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局 - | ‘auto’ | ‘fixed’ 无 固定表头/列或使用了 column.ellipsis 时，默认值为 fixed 1.5.0 title 表格标题 Function(currentPageData)|v-slot:title=“currentPageData” transformCellText 数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 ConfigProvider 全局统一配置 Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode | string | number 类型 - 1.5.4 事件 事件名称 说明 回调参数 change 分页、排序、筛选变化时触发 Function(pagination, filters, sorter, { currentDataSource }) expand 点击展开图标时触发 Function(expanded, record) expandedRowsChange 展开的行变化时触发 Function(expandedRows) resizeColumn 拖动列时触发 Function(width, column) Column 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 参数 说明 类型 默认值 版本 align 设置列的对齐方式 left | right | center left colSpan 表头列合并,设置为 0 时，不渲染 number customCell 设置单元格属性 Function(record, rowIndex, column) - column add from 3.0 customFilterDropdown 启用 v-slot:customFilterDropdown，优先级低于 filterDropdown boolean false 3.0 customHeaderCell 设置头部单元格属性 Function(column) - customRender 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 Function({text, record, index, column}) {} - dataIndex 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 string | string[] - defaultFilteredValue 默认筛选值 string[] - 1.5.0 defaultSortOrder 默认排序顺序 ascend | descend - ellipsis 超过宽度将自动省略，暂不支持和排序筛选一起使用。 设置为 true 或 { showTitle?: boolean } 时，表格布局将变成 tableLayout=“fixed”。 boolean | { showTitle?: boolean } false 3.0 filterDropdown 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 VNode - filterDropdownVisible 用于控制自定义筛选菜单是否可见 boolean - filtered 标识数据是否经过过滤，筛选图标会高亮 boolean false filteredValue 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 string[] - filterIcon 自定义 filter 图标。 VNode | ({filtered: boolean, column: Column}) => vNode false filterMode 指定筛选菜单的用户界面 ‘menu’ | ‘tree’ ‘menu’ 3.0 filterMultiple 是否多选 boolean true filters 表头的筛选菜单项 object[] - filterSearch 筛选菜单项是否可搜索 Boolean false 3.0 fixed 列是否固定，可选 true(等效于 left) ‘left’ ‘right’ boolean|string false key Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性 string - maxWidth 拖动列最大宽度，会受到表格自动调整分配宽度影响 number - 3.0 minWidth 拖动列最小宽度，会受到表格自动调整分配宽度影响 number 50 3.0 resizable 是否可拖动调整宽度，此时 width 必须是 number 类型 boolean - 3.0 responsive 响应式 breakpoint 配置列表。未设置则始终可见。 Breakpoint[] - 3.0 showSorterTooltip 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 showSorterTooltip boolean | Tooltip props true sortDirections 支持的排序方式，取值为 ‘ascend’ ‘descend’ Array [‘ascend’, ‘descend’] 1.5.0 sorter 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true Function|boolean - sortOrder 排序的受控属性，外界可用此控制列的排序，可设置为 ‘ascend’ ‘descend’ false boolean|string - title 列头显示文字 string - width 列宽度 string|number - onFilter 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为filter事件使用 Function - onFilterDropdownVisibleChange 自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为filterDropdownVisibleChange事件使用 function(visible) {} - rowSelection 选择功能的配置。 参数 说明 类型 默认值 版本 checkStrictly checkable 状态下节点选择完全受控（父子数据选中状态不再关联） boolean true 3.0 columnTitle 自定义列表选择框标题 string|VNode - columnWidth 自定义列表选择框宽度 string|number - fixed 把选择框列固定在左边 boolean - getCheckboxProps 选择框的默认属性配置 Function(record) - hideDefaultSelections 去掉『全选』『反选』两个默认选项 boolean false hideSelectAll 隐藏全选勾选框与自定义选择项 boolean false 3.0 preserveSelectedRowKeys 当数据被删除时仍然保留选项的 key boolean - 3.0 selectedRowKeys 指定选中项的 key 数组，需要和 onChange 进行配合 string[] [] selections 自定义选择项 配置项, 设为 true 时使用默认选择项 object[] | boolean true type 多选/单选，checkbox or radio string checkbox onChange 选中项发生变化时的回调 Function(selectedRowKeys, selectedRows) - onSelect 用户手动选择/取消选择某列的回调 Function(record, selected, selectedRows, nativeEvent) - onSelectAll 用户手动选择/取消选择所有列的回调 Function(selected, selectedRows, changeRows) - onSelectInvert 用户手动选择反选的回调 Function(selectedRows) - onSelectNone 用户清空选择的回调 function() - 3.0 scroll 参数 说明 类型 默认值 scrollToFirstRowOnChange 当分页、排序、筛选变化后是否滚动到表格顶部 boolean - x 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 ‘max-content’ string | number | true - y 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 string | number - selection 自定义选择配置项 参数 说明 类型 默认值 key Vue 需要的 key 建议设置 string - – – – – text 选择项显示的文字 string VNode – – – – onSelect 选择项点击回调 Function(changeableRowKeys) -