cl-table

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

useTable

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

  • const 定义必须与 ref 一致
const Table = useTable(options);

Options

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是否自动计算高度booleantrue
context-menu右键菜单ContextMenutrue

Columns

表格项的配置参数

参数说明类型可选值默认值
type列的类型stringop / index / selection / expand
index可以通过传递 index 属性来自定义索引number, function(index)
label显示的标题string
hidden是否隐藏booleanfalse
prop列内容的字段名string
dict字典array
dict.label显示名称string
dict.value匹配值string , number
dict.type类型stringsuccess / warning / danger / info
dict.color颜色string
component渲染组件string, object
width列的宽度string
min-width列的最小宽度string
sortable列是否可以排序boolean, stringtrue / false / 'custom' / 'desc' / 'asc'false
formatter用来格式化内容function(row, column, cellValue, index)
buttonstype="op" 有效array / functioninfo, edit, delete
show-overflow-tooltip当内容过长被隐藏时显示 tooltipboolean
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"]
});
Last Updated: