Meri Plus表格 Table
基础表格
普通表格
奇偶行变色
显示值格式化 Formatter
表头说明
表头注释自定义图标
禁用表格中的复选框并 hover 文字提示
表格文字朝向
tooltip 渲染方式
showHeaderCheckbox 隐藏头部的复选框
表格大小
表头配置
自定义内容单元格
自定义行样式
自定义空字符串
禁用全选 Checkbox
自定义内容行
自定义列宽
保存拖拽后的列宽以及表头显示隐藏的设置
自定义列宽（有分割线的情况）
固定列
多选操作
列设置展开收起全选
设置列必须显示
树形表格
普通树形表格
普通树形表格整体展开收起
普通树形表格滚动至对应行
普通树形表格复选不联动
自定义单元格样式
自定义行树形表格
已选择项弹窗
可配置功能
合并单元格表格
多层级表头
多层级表头合并数据行
多层级表头多选弹窗
API
Table Attr
| 名称 | 类型 | 可选值/示例 | 默认值 | 说明 |
|---|---|---|---|---|
| checkbox | Boolean | false | 表格允许复选 | |
| evenColor | Boolean | false | 是否开启奇偶行变色 | |
| setting | Boolean | false | 设置对应的列展示 | |
| columns | Column[] | 例如：{dataIndex:"1",title:"标题"} | {} | 列信息 |
| dataSource | Row | 例如：{id:"1"} | {} | 节点唯一标识 |
| size | string | medium / small | medium | 表格尺寸 |
| colunmMinWidth | number | 100 | 89 | 最小宽 |
| mergeMethod | (row: Row, col: Column, rowIndex: number, colIndex: number,isCheckbox:boolean) => { rowspan: number,colspan: number} | undefined | 合并行的回调 | |
| columnLine | Boolean | true/ false | false | 是否显示列的竖线 |
| resizable | Boolean | true/ false | false | 是否可以通过设置面板拖拽列的排序（合并表头的情况下无效） |
| disableSelectAll | Boolean | true/ false | false | 禁用全选 CheckBox |
| rowClassName | (row: Row, rowIndex: number) => string | undefined | 自定义行样式 | |
| activeRows | String[] | 例如：["id-1"] | undefined | 需要高亮显示的行 |
| treeLinkage | Boolean | true/ false | true | 树形表格复选的时候是否联动（默认上下级联动） |
| emptyText | String | "--" | "" | 当值不为空时，单元格 null/undefined/空字符串，自动转为传入值 |
| cellClassNameFn | (row: Row, col: Column) => string[] | undefined | 单元格 Td 的样式类回调 | |
| cellIdFn | (row: Row, col: Column) => string | undefined | 单元格 Td 的 Id 回调 | |
| cellStyleFn | (row: Row, col: Column) => object | undefined | 单元格 Td 的内联样式回调 | |
| tooltipPosition | string | absolute/fixed | undefined | tooltip 的渲染方式 |
| showHeaderCheckbox | boolean | true/ false | true | checkbox 设置为 true 的是否，该属性可以控制是否隐藏头部的复选框 |
| settingAllExpand | boolean | true/ false | false | 列设置弹窗中是否出现全部展开的复选框 |
| settingConfirmText | string | "" | "确定" | 列设置弹窗中确定按钮的文本 |
| settingCancelText | string | "" | "取消" | 列设置弹窗中取消按钮的文本 |
| disableSelectAllText | string | "" | "" | disableSelectAll 设置为 true 时，hover 显示的提示文字 |
| lastStageGray | Boolean | true/ false | fales | 将树形表格中，层级为非顶级节点的最末级行底色修改为--gray-50 |
Column Attr
| 名称 | 类型 | 可选值/示例 | 默认值 | 说明 |
|---|---|---|---|---|
| title | string | （必填）列头显示文字 | ||
| dataIndex | string | （必填）列数据在数据项中对应的 Key | ||
| sorter | boolean | false | 是否的进行排序 | |
| sortOrder | string | ascend|descend|default | default | 默认排序顺序 |
| fixed | string|boolean | left \ center \ right \ true \ false | false | 列是否固定,可选 true(等效于 left) 'left' 'right' |
| resizable | boolean | false | false | 是否可拖动调整宽度，此时 |
| children | Column[] | [] | [] | 子列，合并表头时进行使用 |
| desc | string | false | 描述信息 | |
| descIcon | string | false | 描述信息的图标 | |
| onlyShow | boolean | true/ false | false | 强制显示，不可通过设置弹窗取消选中 |
| checked | string | checked/ uncheck / notNull | uncheck | 当前列是否显示，可以通过设置弹窗进行修改 |
| align | string | 'left' / 'right' / 'center' | left | 文字对其方式 |
| ellipsis | boolean | true/ false | false | 超过宽度将自动省略。 |
| width | number | 0 | 列宽度 | |
| minWidth | number | 89 | 拖动列最小宽度，会受到表格自动调整分配宽度影响 | |
| maxWidth | number | 拖动列最大宽度 | ||
| weight | number | 1 | 按照权重进行列宽度进行划分(相对于其他列的宽度进行比较，weight 和 width 同时设置时，weight 优先级更高，默认为 1) | |
| sortCallBack | (col: Column, state: SortOrder, rows: Row[]) => Row[] | 当前列的排序方法（只需要排序相同级，树形菜单会进行递归调用） | ||
| formatter | (row: Row, col: Column, rowIndex: number, colIndex: number) => string | 表格体中每个单元格中显示的文本获取回调函数,入参包括行信息，列信息，返回值必须为字符串。并将文本渲染到单元格中 | ||
| textNotEllipsis | boolean | true/ false | false | 开启后表格 body 内部的对应列不会进行超出省略。 |
| onlyShowText | string | "" | "" | onlyShow 设置为 true 时，hover 提示的文字 |
Row Attr
| 名称 | 类型 | 可选值/示例 | 默认值 | 说明 |
|---|---|---|---|---|
| id | string | （必填）当前行 Id | ||
| children | Row[] | 树形表格使用 | ||
| checked | boolean | false | 当前行是否被选中(设置复现框的时候可以附加默认值) | |
| disable | boolean | false | 当前行是否被禁用选中(设置复现框的时候可以附加默认值) | |
| checkbox | boolean | false | 在第一列的表格中显示复选框（树形菜单使用） | |
| open | boolean | true \ false | false | 当前行是否展开（树形菜单使用） |
| loading | boolean | true \ false | false | 用于是否在远程加载数据，修改当前加载的状态 |
| slot | boolean | true \ false | true | 是否通过 row:slot 插槽对该行信息的渲染 |
| children | Column[] | [] | [] | 子行，树形菜单使用 |
| checkDisableTip | string | "" | "" | disable 为 true 时，hover 显示的提示文字 |
| [propName: string] | any | false | 在 Colum 的 dataIndex 都必须包含在该行信息中（合并表头的单元格最末级列的 dataIndex 必须包含在当前的表格中） |
Slots
| 名称 | 类型 | 可选值/示例 | 默认值 | 说明 |
|---|---|---|---|---|
| tooltip | ({checkeds:Row[]}) => Vnode | null | 选中后头部弹窗的插槽 | |
| col.dataIndex | (Row) => Vnode | null | 表格数据中 col.dataIndex 对应列的渲染插槽 | |
| row | ({ Row, Index })=>Vnode | null | 当 Row.slot 为 true 时会通过该插槽进行渲染 | |
| nodata | ()=>Vnode | null | 通过 nodata 插槽自定义暂无数据时的配图 |
Event
| 名称 | 类型 | 可选值/示例 | 默认值 | 说明 |
|---|---|---|---|---|
| checkedChange | ({items:Row[],selecteds:Row[]}) => void | null | items 当前操作的行，以及影响的行例如：树形菜单取消选中第二级会把第一级和其子集都返回，selecteds 当前列表已经选中的行 | |
| sortChange | ({col:Column,state:string}) => void | null | 排序点击事件 | |
| rowClick | (e: Event, row: Row) => void | null | 行点击事件 | |
| expandChange | (e: Event, openState:boolean,row: Row) => void | false | 树形展开收起的回调 | |
| tableSetCancel | (columns: Column[]) => void | 表格列设置弹窗确定回调 | ||
| tableSetSumit | (columns: Column[]) => void | 表格列设置弹窗取消回调 | ||
| tableSetReset | (columns: Column[]) => void | 表格列设置弹窗重置回调 |
Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| resetScrollbar | 恢复滚动条的位置 | () => void |
| refScrollbar | 滚动条的 ref 对象 | Ref<HTMLDivElement> |
| scrollToById | 将表格内容滚动至对应行 | (id:string)=>void |