Table 表格

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

基础用法

基础用法

date

name

address

Empty

<template>
	<LiTable :tableData="tableData">
		<LiTableItem prop="date"></LiTableItem>
		<LiTableItem prop="name"></LiTableItem>
		<LiTableItem prop="address"></LiTableItem>
	</LiTable>
</template>
<script setup lang="ts">
	const tableData = [
		{
			date: "2016-05-03",
			name: "Tom",
			address: "No. 189, Grove St, Los Angeles",
		},
		{
			date: "20226-123-03",
			name: "徐然",
			address: "测试",
		},
		{
			date: "2016-05-03",
			name: "Tom",
			address: "No. 189, Grove St, Los Angeles",
		},
		{
			date: "20226-123-03",
			name: "徐然",
			address: "测试",
		},
	];
</script>
<style scope lang="scss"></style>

带斑马纹表格

使用stripe属性

date

name

address

Empty

<template>
	<LiTable :tableData="tableData" stripe>
		<LiTableItem prop="date"></LiTableItem>
		<LiTableItem prop="name"></LiTableItem>
		<LiTableItem prop="address"></LiTableItem>
	</LiTable>
</template>
<script setup lang="ts">
	const tableData = [
		{
			date: "2016-05-03",
			name: "Tom",
			address: "No. 189, Grove St, Los Angeles",
		},
		{
			date: "20226-123-03",
			name: "徐然",
			address: "测试",
		},
		{
			date: "2016-05-03",
			name: "Tom",
			address: "No. 189, Grove St, Los Angeles",
		},
		{
			date: "20226-123-03",
			name: "徐然",
			address: "测试",
		},
	];
</script>
<style scope lang="scss"></style>

带边框表格

使用border属性

date

name

address

Empty

<template>
	<LiTable :tableData="tableData" border>
		<LiTableItem prop="date"></LiTableItem>
		<LiTableItem prop="name"></LiTableItem>
		<LiTableItem prop="address"></LiTableItem>
	</LiTable>
</template>
<script setup lang="ts">
	const tableData = [
		{
			date: "2016-05-03",
			name: "Tom",
			address: "No. 189, Grove St, Los Angeles",
		},
		{
			date: "20226-123-03",
			name: "徐然",
			address: "测试",
		},
		{
			date: "2016-05-03",
			name: "Tom",
			address: "No. 189, Grove St, Los Angeles",
		},
		{
			date: "20226-123-03",
			name: "徐然",
			address: "测试",
		},
	];
</script>
<style scope lang="scss"></style>

Table Attributes

参数	说明	类型	可选值	默认值
stripe	斑马纹	bool		false
border	边框	bool		false