参数属性配置

vol-table 通过 columns + tableData（或 url）驱动。direction 决定展示形态：

horizontal：表格形式（列宽、横向滚动、固定列、复选框等）
list：列表表单形式（内部复用 vol-form-item，字段能力与 vol-form 对齐）

兼容 H5 / App / 微信小程序。

组件属性

属性	说明	类型	默认
direction	`horizontal` 表格 / `list` 列表	String	`list`
url	接口地址；配置后自动分页滚动加载	String
tableData	表格数据	Array	`[]`
columns	列/字段配置	Array	`[]`
index	是否显示行号（horizontal 更常用）	Boolean	`false`
ck	是否显示复选框（仅 horizontal）	Boolean	`false`
height	`0`=占满剩余高度；`-1`=内容自适应；其他=固定 px	Number	`0`
minHeight	自动高度时的最小高度	Number	`0`
titleField	list 模式行标题字段	String
readonly	是否只读；list 编辑需设 `false`	Boolean	`true`
textInline	horizontal 文本是否单行省略	Boolean	`true`
textAlign	文本对齐：`left` / `center` / `right`	String
labelWidth	list 标签宽度（px）	Number	`0`
labelPosition	list 标签位置：`left` / `right` / `top`	String
loadKey	是否自动加载字典	Boolean	`true`
defaultLoad	有 url 时是否默认加载	Boolean	`true`
padding	单元格内边距（也可 `$global.table.padding`）	Number	`0`
paddingBottom	距底部距离（底部有自定义内容时）	Number	`0`
contentPadding	外层有 padding 时参与高度计算	Number	`0`
rowStyle	`(row, index, rows) => style` 行样式	Function
columnStyle	`(row, column, index, rows) => style` 单元格样式	Function
selectable	`(row, column, rowIndex) => boolean` 是否可选中	Function
formatter / format	表级单元格格式化	Function
getButtons	`column.btn` 时返回按钮数组	Function
loadBefore	`(params) => boolean` 加载前；返回 `false` 中断	Function
loadAfter	`(res) => boolean` 加载后	Function
getStyle / titleStyle / valueStyle	list 标题与值样式	Function/Object/String

全局可配：main.js → $global.table（如 border、padding、oddRowStyle、highlight、fontSize）。

columns 列配置

columns 为数组。list 模式元素还可以是：

普通字段 { title, field, type, ... }
分组 { type: 'group', title: '...' }
同行多列 [{...}, {...}]

通用 / horizontal

属性	说明	类型	默认
title	列标题 / 标签名	String
field	字段名	String
width	列宽 px（horizontal）	Number
align	对齐：`center` / `right`（跟随 textAlign）	String
fixed	固定列：`left` / `right`（仅 horizontal，CSS sticky）	String
hidden	`true` 隐藏；或 `(row, item, rowIndex) => boolean` 动态隐藏	Boolean/Function
type	见下方 type；horizontal 常用 `date`、`img`、`select` 等	String
bind	字典：`{ key, data: [] }`	Object
slot	`true` 启用 `#field`（漏配则插槽不生效）	Boolean	`false`
headerSlot	`true` 启用 `#columnHeader`	Boolean	`false`
headerFormatter	`(column, colIndex) => 文本或HTML` 自定义表头	Function
formatter	horizontal：`(row, column, rowIndex) => HTML`；list 只读：`(val) => HTML`	Function
click	`true` 或函数；单元格可点	Boolean/Function
btn	`true` 操作列，配合 props `getButtons`	Boolean
cellStyle	`(row, rowIndex, ...) => style`	Function
titleSlot / extraSlot	list：标题 / 右侧插槽开关	Boolean
extra	右侧文案或按钮，见 form 文档	Object
readonly / required / range / min / max / url / multiple / maxCount 等	list 编辑时与 vol-form 字段一致

type 常用值

场景	type
文本/数字	`input`、`password`、`textarea`、`number`、`decimal`、`text`
选择	`select`、`selectList`、`radio`、`checkbox`、`switch`
日期	`date`、`datetime`、`time`、`month`（可 `range`）
树/级联	`cascader`、`treeSelect`、`city`
上传/图片	`img`、`file`（list 上传；horizontal 的 `img` 为缩略图预览）
布局	`group`

更多字段参数见 vol-form 参数。

数据插槽

只能使用固定插槽名。列上必须打开对应开关，否则不生效。禁止动态字段名插槽（小程序不支持）。

插槽	启用条件	data
`#data`	存在即替代默认表格/列表渲染	—
`#columnHeader`	`headerSlot: true`	`{ field, column, colIndex }`
`#field`	`slot: true`	`{ field, row, column, rowIndex }`
`#custom`	horizontal 单元格追加（不替代默认内容）	同上
`#header`	list 行头	`{ row, rowIndex }`
`#title`	`titleSlot: true`	同 field
`#extra`	`extraSlot: true`	同 field
`#bottom`	list 行底	`{ row, rowIndex }`
默认插槽	表格底部自定义	—

<template>
	<vol-table direction="horizontal" :columns="columns" :table-data="tableData">
		<template #columnHeader="{ data }">
			<view v-if="data.field === 'oper'">操作栏</view>
		</template>
		<template #field="{ data }">
			<view v-if="data.field === 'oper'">
				<vol-button size="small" type="primary" @click="viewClick(data)">查看</vol-button>
			</view>
		</template>
	</vol-table>
</template>
<script setup>
const columns = ref([
	{ field: 'OrderNo', title: '订单编号', width: 110 },
	{ field: 'oper', title: '操作', width: 140, slot: true, headerSlot: true }
])
</script>

完整示例见格式化、样式、数据插槽、列表插槽。

事件 emit

事件	说明	参数
onChange	下拉/日期/级联等变化	`(field, value, row, data?)`
inputConfirm	输入框回车	`(field, value, column, row, rowIndex, e)`
onFocus / onKeyPress	聚焦 / 按键	结构类似
extraClick	extra 按钮	`(item, row, index)`
cellClick	单元格点击	`(row, column, rowIndex, rows)`
rowClick	行点击	`(row, rowIndex, rows)`
ckChange	单行复选	`(row, isCK, index)`
ckChangeAll	全选	`(rows, isCK)`
dicInited	字典加载完成	`(dicData)`
titleClick / valueClick	list 标题/值点击	`(item, row, rowIndex)`

推荐：list 编辑事件写在 columns 字段上（与 web / vol-form 统一）：

onChange: (value, item, row) => {}
onFocus / onKeyPress / inputConfirm / extraClick

组件标签 @xxx 仍兼容旧项目。

方法（ref）

方法	说明
`load(params?, reset?)`	刷新；`reset=true` 重置到第 1 页
`getSelectedRows()`	获取选中行
`clearSelectedRows()`	清除选中
`delRows()`	删除选中行并返回被删数据

tableRef.value.load()
tableRef.value.load(null, true) // 重置分页
const rows = tableRef.value.getSelectedRows()

loadBefore 查询参数

与 Web 端查询前一致，常见：

const loadBefore = (params) => {
  params.wheres.push({
    name: 'OrderNo',
    value: orderNo.value,
    displayType: 'like'
  })
  return true // 返回 false 取消本次请求
}

参数属性配置

ON THIS PAGE