Setaria Components SchemaTable
此组件基于JsonSchema逻辑来使用的
基础用法
列宽
内容自动换行
内容溢出省略号
单选
多选
排序
自定义格式化内容
固定列
隐藏列
设置原生属性
合并单元格
显示页脚
单元格样式
树形展示
自定义插槽
- 可通过设置
[字段名]插槽来自定义显示，并配合scope.data获取当前行的相关数据 - 可通过
batchControl插槽来自定义表格顶部按钮内容
分页器
- 通过设置
show-page来显示分页功能 - 通过
page-numpage-sizepage-total三个属性来指定当前第几页，一页多少条数据，当前有多少条数据 - 通过
page-sizes来设置分页器中的一页多少条数据
虚拟 Y 轴滚动
操作按钮列
- 通过设置
show-oper来显示分页功能 - 通过
oper-width来控制操作列的宽度 - 通过
oper-max-display-count来设置操作列中按钮可显示多少按钮 - 通过
oper-buttons来返回自定义按钮中的内容
列设置功能
- 通过
show-column-setting属性开启列设置-显示功能 - 通过
column-setting-draggable属性开启列设置-调整列顺序功能 - 通过
table-id属性来指定当前表格唯一 ID 后，可开启以上设置的localStorage缓存功能
SchemaTable API
SchemaTable Attributes
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| schema | 表格（表单）项描述 | Object | — | 是 |
| ui-schema | 表格（表单）项 UI 相关描述 | Object | — | 否 |
| data | 表格值 | Array | — | 是 |
| column-width | 列宽 | String,Number | — | 否 |
| border | 是否带有边框 | Boolean | true | 否 |
| table-id | 表格 ID，主要用于对表格的配置进行缓存 | String | — | 否 |
| stripe | 是否带有斑马纹 | Boolean | true | 否 |
| show-overflow | 当内容过长时显示为省略号 | Boolean | — | 否 |
| height | 表格高度 | String,Number | — | 否 |
| max-height | 表格最大高度 | String,Number | — | 否 |
| selection-type | 勾选模式 | String | — | 否 |
| selection-config | 勾选相关配置，具体可查看 radio-config checkbox-config 内容 | Object | — | 否 |
| label-mode | 是否只读模式 | Boolean | true | 否 |
| is-reserve | 是否保留 CheckBox 选中状态 | Boolean | true | 否 |
| virtual-scroll | 是否开启虚拟 Y 轴滚动 | Boolean | false | 否 |
| merge-cells | 合并指定的单元格 | Array | — | 否 |
| show-footer | 是否显示页脚 | Boolean | false | 否 |
| footer-method | 表尾的数据获取方法，返回一个二维数组 | Function | — | 否 |
| row-config | 行配置信息, 可查看 vxe-table 文档 | Object | — | 否 |
| tree-config | 树形模式相关配置，可查看 vxe-table 文档 | Object | — | 否 |
| sort-config | 排序相关配置，可查看 vxe-table 文档 | Object | — | 否 |
| seq-config | 序号相关配置，可查看 vxe-table 文档 | Object | — | 否 |
| seq-column | 是否显示序号列 | Boolean | false | 否 |
| row-class-name | 行附加 className | Function | — | 否 |
| cell-class-name | 单元格附加 className | Function | — | 否 |
| show-page | 是否显示分页功能 | Boolean | false | 否 |
| page-layout | 分页的格式 | string | prev, pager, next, jumper, ->, total | 否 |
| page-num | 分页信息，当前页号 | Number | — | 否 |
| page-size | 分页信息，当前一页多少条 | page | — | 否 |
| page-sizes | 分页信息，分页器 | Array | — | 否 |
| page-total | 分页信息，当前数据共多少条 | Number | — | 否 |
| show-oper | 是否显示操作列 | Boolean | false | 否 |
| oper-width | 操作列的宽度 | Number, String | 120px | 否 |
| oper-max-display-count | 操作列中最多能显示多少个按钮（其他的将放入更多按钮中） | Number, String | 3 | 否 |
| oper-buttons | 操作列自定义按钮 | Function | — | 否 |
| show-column-setting | 是否显示列设置功能 | Boolean | false | 否 |
| column-setting-draggable | 列设置是否开启可拖拽功能 | Boolean | false | 否 |
| row-key | 数据行唯一标识字段 | String | — | 否 |
| show-full-screen | 是否显示全屏 Icon 功能 | Boolean | true | 否 |
SchemaTable Events
| 名称 | 说明 | 类型 |
|---|---|---|
| data-change | 表单项数据值变更触发 | Function |
| selection-change | 勾选项数据值变更触发 | Function |
| selection-all | 勾选所有数据值变更触发 | Function |
| sort-change | 排序项变更触发 | Function |
| page-change | 分页变更触发 | Function |
| cell-click | 单元格被点击时会触发该事件 | Function |
| cell-dbclick | 单元格被双击时会触发该事件 | Function |
| oper-button-click | 操作列按钮被点击时会触发该事件 | Function |
| column-setting-show | 列设置显示时会触发该事件 | Function |
| column-setting-hide | 列设置隐藏时会触发该事件 | Function |
| column-setting-visible-change | 列设置中内容勾选变更时会触发该事件 | Function |
| column-setting-sort-change | 列设置中内容排序变更时会触发该事件 | Function |
SchemaTable Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| setSelection | 设置选中 | Function |
| clearSelection | 手动清空用户的选择 | Function |
| getSelection | 获取用户选中的数据 | Function |
| validate | 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。 | Function |
| validateField | 验证具体的某个字段。 | Function |
| resetFields | 重置该表单项，将其值重置为初始值，并移除校验结果 | Function |
| scrollToField | 滚动到指定的字段 | Function |
| clearValidate | 清理某个字段的表单验证信息。 | Function |
| getTableInstance | 获取底层表格的示例 VxeGrid，一般用于直接操作其内容 | Function |
SchemaTable Slots
| 插槽名 | 说明 |
|---|---|
| [字段名] | 对应表单项自定义插槽 |
| batchControl | 表格顶部批量操作按钮区域插槽 |