element-ui 实现嵌套表格

最新推荐文章于 2025-09-24 15:01:51 发布

原创最新推荐文章于 2025-09-24 15:01:51 发布 · 5.9k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #java #vue.js #node.js #es6

VueJS 专栏收录该内容

15 篇文章

订阅专栏

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

🚩 先来看效果图

在这里插入图片描述

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>