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