cl-table

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

useTable

cl-table 标签绑定 ref 值后使用 useTable 加载组件

const 定义必须与 ref 一致

const Table = useTable(options);

Options

columns 列数据

WARNING

该组件默认计算表格的流体高度 max-height，会依赖于 cl-crud 的高度。当 cl-crud 高度不是一个有效值时（如在对话框中使用），cl-table 内容会缺失。配置 auto-height = false 可以忽略计算，或者设置有效高度。

示例

基础表格

通过 columns 参数配置列表数据的显示

配置类型

添加 type 参数：

index 序号
selection 多选框
op 编辑栏
expand 展开行

编辑 按钮需要配置 cl-upsert 组件

多级表头

添加 children 参数

插槽

使用 template 标签，绑定插槽名 column-${prop} 即可

scope 为行数据

扩展操作栏

使用 buttons 参数，默认为 ['edit', 'delete']

edit 编辑
delete 删除
slot-* 自定义插槽名

数据过滤

添加 dict 参数可以做多个类型的展示
使用 formatter 可以对某个列数据额外处理

参数

该组件继承 el-table，并享有它

参数	说明	类型	默认值
columns	表格项	Columns
auto-height	是否自动计算高度	boolean	true
context-menu	右键菜单	ContextMenu	true

Columns

表格项的配置参数

参数	说明	类型	可选值	默认值
type	列的类型	string	op / index / selection / expand
index	可以通过传递 index 属性来自定义索引	number, function(index)
label	显示的标题	string
hidden	是否隐藏	boolean		false
prop	列内容的字段名	string
dict	字典	array
dict.label	显示名称	string
dict.value	匹配值	string , number
dict.type	类型	string	success / warning / danger / info
dict.color	颜色	string
component	渲染组件	string, object
width	列的宽度	string
min-width	列的最小宽度	string
sortable	列是否可以排序	boolean, string	true / false / 'custom' / 'desc' / 'asc'	false
formatter	用来格式化内容	function(row, column, cellValue, index)
buttons	type="op" 有效	array	edit, delete
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	boolean
align	对齐方式	string		'center'
header-align	表头对齐方式	string		'center'

更多参数请查阅 el-table-columnopen in new window

ContextMenu

true 开启
false 关闭
refresh 刷新列表
update 编辑当前行
delete 删除当前行
check 勾选当前行
order-desc 根据当前行的 prop 降序
order-asc 根据当前行的 prop 升序
自定义

const Table = useTable({
	contextMenu: ["refresh", "check", "update", "delete", "order-desc", "order-asc"]
});

# cl-table

# useTable

# Options

# 示例

# 基础表格

# 配置类型

# 多级表头

# 插槽

# 扩展操作栏

# 数据过滤

# 参数

# Columns

# ContextMenu