表格组件

这是专门用于简单数据渲染的表格组件。

导入组件

项目已使用自动导入组件

你可以直接在模板内写 <ComponentsTable /> ，即可直接使用表格组件。无需手写导入语句。

最小案例

本组件最少要传递 data 和 columns 。传递 data 渲染的数据，传递 columns 表格列配置。

自动导入的最低限度案例

vue

<template>
	<section class="auto-import-mini-example-root">
		<!-- 自动导入的最低限度案例 -->
		<ComponentsTable
			:data="[
				{ user: '阮喵喵', age: 18 },
				{ user: 'KK', age: 16 },
				{ user: 'awei', age: 30 },
			]"
			:columns="[
				{ prop: 'user', label: '用户名' },
				{ prop: 'age', label: '年龄' },
			]"
		/>
	</section>
</template>

开启索引栏

在 props 内传递 isIndex 属性来使用默认的索引栏，效果如下：

索引栏例子

开启多选栏

在 props 内开启 isMultipleSelect ，开启多选栏模式。默认在索引栏的前面。
@selection-change 使用事件获取到数据。

多选栏例子

插槽

每一个表格列都可以使用插槽，使用 bodyCell 插槽来自定义当前行。

插槽目前默认暴露出 prop 和 row 值。

prop 当前列的 key 值
row 当前行的数据

插槽

操作栏

表格业务最常见的配置是实现操作栏。本组件仅负责单纯的数据渲染，不负责内部封装更多的功能，仅负责暴露出操作栏插槽来使用。

操作栏标题名称固定为 操作 二字。

使用案例如下：

操作栏

靠左前置的操作栏

在某些业务内，操作栏是前置的，放在较前面。

配置操作栏表格列在前面即可。

前置操作栏

封装组件的参考资料

贡献者

ruan-cat

页面历史

最后编辑于 2 个月前

查看完整历史

表格组件 ​

导入组件 ​

最小案例 ​

开启索引栏 ​

开启多选栏 ​

插槽 ​

操作栏 ​

靠左前置的操作栏 ​

封装组件的参考资料 ​

贡献者