vol-table 表格组件
vol-table 表格组件
移动端表格组件，兼容 H5 / App / 微信小程序。通过 direction 切换两种展示：
| direction | 说明 | App 示例入口 |
|---|---|---|
horizontal | 表格形式（表头、列宽、横向滚动、固定列等） | /pages/table/index |
list | 列表表单形式（复用 vol-form-item，可编辑） | /pages/table/list |
自定义页面使用 table 时，请对照本目录文档与示例页。更多配置见 表格组件。
表格形式 horizontal
direction="horizontal" 后以表格形式显示。
| 文档 | 示例页 | 说明 |
|---|---|---|
| 参数属性配置 | — | 组件 props、columns、插槽、事件、方法 |
| 基础表格 | pages/table/base-table | 静态数据、列宽配置、hidden 隐藏列、textInline 换行/省略、宽度自适应 |
| 横向滚动 | pages/table/scroll-table | 多列超出屏幕宽度横向滚动、表头固定、type=date 日期截取 |
| 固定列与操作 | pages/table/fx-table | fixed:left/right 列固定，末列操作按钮右侧吸定 |
| 高度与边距 | pages/table/height-table | height=0 占满剩余高度、height=-1 内容自适应、固定高度及切换 |
| 自动接口绑定数据、分页、绑定数据字典 | pages/table/api-table | url 自动分页无限滚动、bind 字典转换、loadBefore/loadAfter、搜索筛选 |
| 自定义按钮、事件处理 | pages/table/event-table | 自定义按钮、单元格点击事件 |
| 格式化、样式、自定义显示、数据插槽 | pages/table/format-table | formatter、行/列样式、#field 数据插槽 |
| 自定义表头、按钮、内容居中显示 | pages/table/header-table | headerFormatter、#columnHeader、column.align 对齐（center/right） |
| 复选框、行号 | pages/table/ck-table | ck 复选、index 行号、selectable 控制可选、选中/删除/清除 API 与事件 |
| 操作列按钮 | pages/table/action-table | #field 操作列，详情/编辑等按钮 |
| 图片列 | pages/table/img-table | type=img 缩略图展示、多图、点击预览 |
| 完全自定义 | pages/table/custom-h-table | #data 整表自定义渲染，分页/高度仍由框架处理 |
表格列表 list
direction="list" 列表模式：以 vol-form-item 展示行数据，覆盖表单输入/选择/日期/级联/上传/插槽/事件/格式化/计算/布局，以及分页、分组、行内编辑、完全自定义。
| 文档 | 示例页 | 说明 |
|---|---|---|
| 自定义渲染、自定义显示、自定义按钮 | pages/table/list-table | titleField、#header/#title/#field/#extra/#bottom，列须配 slot/titleSlot/extraSlot |
| 表格编辑、下拉、日期选择、输入事件、自定义按钮 | pages/table/list-event | 下拉框、日期选择事件，输入框输入事件，回车事件 |
| 表格编辑、基础输入 | pages/table/list-input | input/password/textarea、数字与区间、必填、只读 |
| 表格编辑、选择类、下拉框 | pages/table/list-select | select/selectList、字典 bind、radio、checkbox、switch |
| 动态控制隐藏显示 | pages/table/list-hidden | 根据不同的条件动态控制字段显示、隐藏 |
| 格式化、样式、点击 | pages/table/list-format | formatter HTML、titleStyle/valueStyle、extra、valueClick |
| 日期、时间 | pages/table/list-datetime | date/datetime/time/month 及 range 区间、min/max |
| 字段分组、多列显示 | pages/table/list-group | 二维数组同行多列、type=group、接口分页与搜索 |
| 级联/树/省市区 | pages/table/list-cascader | cascader、treeSelect、city |
| 图片/文件上传 | pages/table/list-upload | img/file、multiple、maxCount、只读切换 |
| 标题位置与宽度 | pages/table/list-position | labelPosition 左/右/上，labelWidth 切换 |
| 字段实时计算 | pages/table/list-calc | 数量单价运费联动小计/应付，onChange/onKeyPress |
| 接口分页、字典 | pages/table/list-api | url 自动分页、bind 字典、loadBefore/loadAfter、搜索 |
| 自定义按钮 | pages/table/list-btn | 行头/行底按钮、extra、图片、rowClick |
| 行内编辑 | pages/table/list-edit | readonly=false、增删存、下拉日期联动、图片上传 |
| 完全自定义列表 | pages/table/list-custom | #data 整表自定义渲染，分页高度仍可由框架处理 |
小程序插槽约定
只能使用固定插槽名，且列上必须打开对应开关，否则不生效：
| 插槽 | 列配置 | 作用域 data |
|---|---|---|
#field | slot: true | { field, row, column, rowIndex } |
#columnHeader | headerSlot: true | { field, column, colIndex } |
#title | titleSlot: true | 同上 field |
#extra | extraSlot: true | 同上 field |
#header / #bottom | list 行头/行底 | { row, rowIndex } |
#data | 存在即替代默认渲染 | — |
#custom | horizontal 单元格追加 | { field, row, column, rowIndex } |