element-ui 实现嵌套表格

最新推荐文章于 2025-03-20 15:33:52 发布

Demo_Null

最新推荐文章于 2025-03-20 15:33:52 发布

阅读量5.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： VueJS 文章标签： vue java vue.js node.js es6

本文链接：https://blog.youkuaiyun.com/Demo_Null/article/details/107585808

VueJS 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍如何使用Element-UI的表格组件，并通过修改源代码实现定制化需求。从选择合适表格开始，到深入理解属性列表，最后实现数据传递，全程实战演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚩 先来看效果图

在这里插入图片描述

1.1 查看 Element-UI 组件库

1.1.1 Element-UI 组件库

在这里插入图片描述

1.1.2 选择合适的表格

我这里选取基础表格修改
在这里插入图片描述

<template>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="date" label="日期" width="180"></el-table-column>
		<el-table-column prop="name" label="姓名" width="180"></el-table-column>
		<el-table-column prop="address" label="地址"></el-table-column>
	</el-table>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}, 
					{
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄'
					}, 
					{
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄'
					}, 
					{
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}
				]
			}
		}
	}
</script>