Table 表格

用于展示数据列表。

基础用法

你可以在 columns 里快速设置每一个列的配置。

• 排序：设置 sort 时标题会显示排序按钮，有 none/desc/asc 三种不同预设状态。利用 @sortChange 事件响应排序操作。
• 格式化：利用 format 处理每列数据的展示时格式，它不会影响原有数据，本质和 <slot/> 是一致的，但 <slot/> 优先级更高。
• 对齐：数据默认居左，可设置 align 控制每列数据对齐方式。

查看代码

index.vue

<template>
	<demo-container>
		<gov-table :columns="columns" :data="data" @sortChange="handleSort" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import column from "./column";
import row from "./row";

defineOptions({
	name: "tableBase",
});

const columns = ref(column);
const data = ref(row);

const handleSort = (state) => {
	if (state) {
		let { column, sort } = state;
		data.value = data.value.slice().sort((a, b) => {
			if (sort === "desc") {
				return b[column] - a[column]; // 降序排序
			} else {
				return a[column] - b[column]; // 升序排序
			}
		});
	} else {
		// 无排序时恢复原有数据顺序
		data.value = JSON.parse(JSON.stringify(row));
	}
};
</script>

column.js

export default [
	{
		title: "名字",
		width: 100,
		dataIndex: "name",
	},
	{
		title: "年龄",
		width: 80,
		dataIndex: "age",
		sort: "none",
		format: (age) => age + "岁",
	},
	{
		title: "职业",
		width: 150,
		dataIndex: "job",
	},
	{
		title: "性别",
		width: 80,
		dataIndex: "sex",
		align: "center",
		format: (sex) => (sex === 1 ? "男" : "女"),
	},
	{
		title: "地址",
		dataIndex: "address",
	},
];

row.js

export default [
	{
		id: 1,
		name: "张三",
		age: 30,
		job: "UP主",
		sex: 1,
		address: "河北省、石家庄市",
	},
	{
		id: 2,
		name: "李四",
		age: 36,
		job: "海外贸易",
		sex: 2,
		address: "广东省、珠海市",
	},
	{
		id: 3,
		name: "王二",
		age: 29,
		job: "设计师",
		sex: 2,
		address: "北京市海淀区、石景山",
	},
	{
		id: 4,
		name: "麻子",
		age: 32,
		job: "放牧",
		sex: 1,
		address: "内蒙古、锡林格勒",
	},
];

复选框

注意：设置 selection 前提必须指定 rowKey 来指定唯一标识。rowKey 接收一个 String 或者一个 Function。

选中行的 rowKey 会在 @selectionChange 事件里以数组的形式返回。

控制台

 slecteIds:[]

查看代码

index.vue

<template>
	<demo-container>
		<gov-table
			:columns="columns"
			:data="data"
			selection
			rowKey="id"
			@selectionChange="handleSelection"
		/>
		<template #console> slecteIds:{{ slecteIds }} </template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import column from "./column";
import row from "./row";

defineOptions({
	name: "tableBase",
});

const columns = ref(column);
const data = ref(row);

const slecteIds = ref([]);
const handleSelection = (slected) => {
	slecteIds.value = slected;
};
</script>

column.js

export default [
	{
		title: "名字",
		width: 100,
		dataIndex: "name",
	},
	{
		title: "年龄",
		width: 80,
		dataIndex: "age",
		sort: "none",
		format: (age) => age + "岁",
	},
	{
		title: "职业",
		width: 150,
		dataIndex: "job",
	},
	{
		title: "性别",
		width: 80,
		dataIndex: "sex",
		align: "center",
		format: (sex) => (sex === 1 ? "男" : "女"),
	},
	{
		title: "地址",
		dataIndex: "address",
	},
];

row.js

export default [
	{
		id: 1,
		name: "张三",
		age: 30,
		job: "UP主",
		sex: 1,
		address: "河北省、石家庄市",
	},
	{
		id: 2,
		name: "李四",
		age: 36,
		job: "海外贸易",
		sex: 2,
		address: "广东省、珠海市",
	},
	{
		id: 3,
		name: "王二",
		age: 29,
		job: "设计师",
		sex: 2,
		address: "北京市海淀区、石景山",
	},
	{
		id: 4,
		name: "麻子",
		age: 32,
		job: "放牧",
		sex: 1,
		address: "内蒙古、锡林格勒",
	},
];

设置索引

• 默认：当设置 indexed 为 true 时，显示数据在数组中的顺序。
• 自定义：当设置 indexed 为 Function 时，提供（row, index） 两个参数用于自定义索引。

查看代码

index.vue

<template>
	<demo-container>
		<gov-table :columns="columns" :data="data" indexed />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import column from "./column";
import row from "./row";

defineOptions({
	name: "tableBase",
});

const columns = ref(column);
const data = ref(row);
</script>

column.js

export default [
	{
		title: "名字",
		width: 100,
		dataIndex: "name",
	},
	{
		title: "年龄",
		width: 80,
		dataIndex: "age",
		sort: "none",
		format: (age) => age + "岁",
	},
	{
		title: "职业",
		width: 150,
		dataIndex: "job",
	},
	{
		title: "性别",
		width: 80,
		dataIndex: "sex",
		align: "center",
		format: (sex) => (sex === 1 ? "男" : "女"),
	},
	{
		title: "地址",
		dataIndex: "address",
	},
];

row.js

export default [
	{
		id: 1,
		name: "张三",
		age: 30,
		job: "UP主",
		sex: 1,
		address: "河北省、石家庄市",
	},
	{
		id: 2,
		name: "李四",
		age: 36,
		job: "海外贸易",
		sex: 2,
		address: "广东省、珠海市",
	},
	{
		id: 3,
		name: "王二",
		age: 29,
		job: "设计师",
		sex: 2,
		address: "北京市海淀区、石景山",
	},
	{
		id: 4,
		name: "麻子",
		age: 32,
		job: "放牧",
		sex: 1,
		address: "内蒙古、锡林格勒",
	},
];

设置行样式

当你想改变行样式，你也可以这么做：

• 设置条纹：对 <gov-table /> 设置 stripe。
• 自定义className：对 <gov-table /> 设置 rowClassName。

查看代码

index.vue

<template>
	<demo-container>
		<gov-table :columns="columns" :data="data" stripe :rowClassName="fun" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import column from "./column";
import row from "./row";

defineOptions({
	name: "tableBase",
});

const columns = ref(column);
const data = ref(row);

const fun = (row, index) => {
	return `examples-table-row__${index}`;
};
</script>

<style lang="scss">
// 设置第三行加粗
.examples-table-row__2 {
	font-weight: bold;
	color: red;
}
</style>

column.js

export default [
	{
		title: "名字",
		width: 100,
		dataIndex: "name",
	},
	{
		title: "年龄",
		width: 80,
		dataIndex: "age",
		sort: "none",
		format: (age) => age + "岁",
	},
	{
		title: "职业",
		width: 150,
		dataIndex: "job",
	},
	{
		title: "性别",
		width: 80,
		dataIndex: "sex",
		align: "center",
		format: (sex) => (sex === 1 ? "男" : "女"),
	},
	{
		title: "地址",
		dataIndex: "address",
	},
];

row.js

export default [
	{
		id: 1,
		name: "张三",
		age: 30,
		job: "UP主",
		sex: 1,
		address: "河北省、石家庄市",
	},
	{
		id: 2,
		name: "李四",
		age: 36,
		job: "海外贸易",
		sex: 2,
		address: "广东省、珠海市",
	},
	{
		id: 3,
		name: "王二",
		age: 29,
		job: "设计师",
		sex: 2,
		address: "北京市海淀区、石景山",
	},
	{
		id: 4,
		name: "麻子",
		age: 32,
		job: "放牧",
		sex: 1,
		address: "内蒙古、锡林格勒",
	},
];

固定表头和列

该功能根据css的 position: sticky; 实现，所以在 ie11 浏览器下降级处理。

• 设置 height 时，会自动固定表头。
• 设置 column.fixed 为 left/right时，会对该列固定在左侧或者右侧。

查看代码

<template>
	<demo-container>
		<gov-table
			:columns="columns"
			:data="data"
			height="300px"
			indexed
			selection
			rowKey="id"
		/>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";

defineOptions({
	name: "tableFixed",
});

const length = 15;

const column = Array.from({ length }, (_, index) => ({
	title: `列${index + 1}`,
	width: 140,
	dataIndex: `field${index + 1}`,
}));

column[0].fixed = "left";
column[length - 1].fixed = "right";

const row = Array.from({ length }, (_, index) => {
	return {
		id: index + 1,
		...Array.from({ length }, (_, subIndex) => ({
			[`field${subIndex + 1}`]: `值${index + 1}-${subIndex + 1}`,
		})).reduce((acc, cur) => ({ ...acc, ...cur }), {}), // 将数组转换为对象
	};
});

const columns = ref(column);
const data = ref(row);
</script>

Attributes

属性名	说明	类型	可选值	默认值
height	表格高度，设置后表头固定在顶部	String	—	—
rowClassName	行的类名计算函数	Function(row, index)	—	—
loading	表格是否处于加载状态	Boolean	true, false	false
stripe	是否显示斑马线风格的条纹	Boolean	true, false	false
selection	是否显示多选列	Boolean	true, false	false
rowKey	自定义行的唯一键，用于 selection 计算	Function/String	—	—
indexed	是否显示索引列	Function/Boolean	—	—
data	表格数据	Array	—	[]
columns	列配置数组	Array	—	—

Events

事件名	说明	回调参数
sortChange	排序状态改变时触发	排序状态对象：{ column[dataIndex], sort }；
selectionChange	选中项改变时触发	选中项数组

Slots

插槽名	作用域插槽	说明
每个 column[dataIndex]，也就是列的 key 值。	是	定义每列的展示，会根据column[dataIndex]创建对应的数据查抄，可自由控制展示内容，提供 row 属性为定义每一行的数据。