element-ui 实现嵌套表格

Demo_Null

发布于 2020-09-28 14:48:20

5.2K0

发布于 2020-09-28 14:48:20

文章被收录于专栏：Java 学习Java 学习

? 先来看效果图

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>