cl-table

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

WARNING

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

useTable

  • const 定义必须与 ref 一致
<cl-table ref="Table" />
const Table = useTable(options);

示例

列类型

添加 type 参数:

  • index 序号
  • selection 多选框
  • op 操作栏
  • expand 展开内容
const Table = useTable({
	columns: [
		{
			type: "op" // op, index, selection, expand
		}
	]
});

type="expand" 时,配合插槽适用(detail 为自定义值):

<cl-table ref="Table">
	<template #column-detail="{ scope }"> 自由编辑,scope为当前行数据</template>
</cl-table>

<script setup lang="ts">
	const Table = useTable({
		columns: [
			{
				type: "expand",
				prop: "detail"
			}
		]
	});
</script>

多级表头

添加 children 参数:

const Table = useTable({
	columns: [
		{
			label: "基础信息",
			children: [
				{
					label: "昵称",
					prop: "name"
				},
				{
					label: "工资",
					prop: "price"
				}
			]
		}
	]
});

默认排序

  • 方式 1,配置 defaultSort 参数
const Table = useTable({
	defaultSort: {
		prop: "createTime",
		order: "descending"
	},
	columns: [
		{
			label: "创建时间",
			prop: "createTime",
			sortable: "desc"
		}
	]
});
  • 方式 2,配置 sortable 参数
const Table = useTable({
	columns: [
		{
			label: "创建时间",
			prop: "createTime",
			sortable: "desc"
		}
	]
});

插槽

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

  • scope 为行数据
<cl-table ref="Table">
	<template #column-name="{ scope }">{{ scope.row.name }}</template>
</cl-table>

<script setup lang="ts">
	const Table = useTable({
		columns: [
			{
				label: "昵称",
				prop: "name"
			}
		]
	});
</script>

操作栏

配置 buttons 参数,默认为 ['edit', 'delete']

可选值:

  • info 详情
  • edit 编辑
  • delete 删除
const Table = useTable({
	columns: [
		{
			type: "op",
			width: 300,
			buttons: ["info", "edit", "delete"]
		}
	]
});
  • 使用 slot-* 自定义插槽名
<cl-table>
	<template #slot-btn="{ scope }">
		<el-button text bg>新增</el-button>
	</template>
</cl-table>

<script lang="ts" setup>
	const Table = useTable({
		columns: [
			{
				type: "op",
				buttons: ["slot-btn"]
			}
		]
	});
</script>
  • 使用数据对象
const Table = useTable({
	columns: [
		{
			type: "op",
			buttons: [
				{
					label: "新增",
					type: "success",
					onClick({ scope }) {
						// scope行数据
					}
				}
			]
		}
	]
});
  • 使用方法
const Table = useTable({
	columns: [
		{
			type: "op",
			buttons({ scope }) {
				return [
					{
						label: "新增",
						onClick({ scope }) {
							// scope行数据
						}
					}
				];
			}
		}
	]
});

数据过滤

const Table = useTable({
	columns: [
		{
			label: "状态",
			prop: "status",
			dict: [
				{
					label: "开启",
					value: 1,
					type: "success"
				},
				{
					label: "关闭",
					value: 0,
					type: "danger"
				}
			]
		}
	]
});

如果只想以文本方式显示,则:

const Table = useTable({
	columns: [
		{
			label: "状态",
			prop: "status",
			dict: {
				text: true, // 开关
				separator: ",", // 拼接符号
				options: [
					{
						label: "开启",
						value: 1
					},
					{
						label: "关闭",
						value: 0
					}
				]
			}
		}
	]
});

WARNING

当数据 status 为 [1, 0] 数组的情况下,会自动匹配并显示多个文本值。

  • 使用 formatter 可以对某个列数据额外处理。该处理方式为最优先,在 dict插槽 及其他之前
const Table = useTable({
	columns: [
		{
			label: "工资",
			prop: "price",
			formatter(row) {
				return row.price + "";
			}
		}
	]
});

参数

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

参数说明类型可选值默认值
columns表格项Columns
autoHeight是否自动计算高度booleantrue
contextMenu右键菜单ContextMenutrue
onRowContextmenu右键菜单事件function(row, column, event)
defaultSort默认排序object
defaultSort.prop排序值string
defaultSort.order排序方式'descending' / 'ascending'
sortRefresh排序是否刷新列表booleantrue
emptyText空数据显示文本boolean

Columns

表格项的配置参数

参数说明类型可选值默认值
type列的类型stringop / index / selection / expand
index可以通过传递 index 属性来自定义索引number, function(index)
label显示的标题string
hidden是否隐藏booleanfalse
prop列内容的字段名string
dict字典DictOptions
dict.label显示名称string
dict.value匹配值string , number
dict.type类型stringsuccess / warning / danger / info
dict.color颜色string
dictFormatter字典数据格式化(values: DictOptions) => string
dictColor是否自动使用颜色booleanfalse
component渲染组件string, object
width列的宽度string
min-width列的最小宽度string
sortable列排序类型boolean, stringtrue / false / 'custom' / 'desc' / 'asc' / 'descending' / 'ascending'false
formatter用来格式化内容function(row, column, cellValue, index)
buttonstype="op" 有效array / functioninfo, edit, delete
show-overflow-tooltip当内容过长被隐藏时显示 tooltipboolean
align对齐方式string'center'
header-align表头对齐方式string'center'
children子列Column[]'center'
component渲染组件,同表单配置一致

更多参数请查阅 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",
		{ label: "测试", callback() {} }
	]
});
Last Updated: