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 参数，默认为 ['info', 'edit', 'delete']

• info 详情
• edit 编辑
• delete 删除

其他方式渲染：

slot-* 自定义插槽名

{
	type: "op",
	buttons: ['slot-btn']
}

<cl-table>
	<template #slot-btn="{ scope }">
		<el-button text bg>新增</el-button>
	</template>
</cl-table>

数据对象

{
	type: "op",
	buttons: [{
		label: '新增',
		type: 'success',
		onClick({ scope }) {
			// scope 行配置信息
		}
	}]
}

方法

{
	type: "op",
	buttons({ scope }) {
		return ['info', 'edit']
	}
}

数据过滤

• 添加 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 / function	info, edit, delete
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	boolean
align	对齐方式	string		'center'
header-align	表头对齐方式	string		'center'

更多参数请查阅 el-table-column

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"]
});