element-ui 实现嵌套表格

? 先来看效果图

1.1 查看 Element-UI 组件库

1.1.1 Element-UI 组件库

1.1.2 选择合适的表格

我这里选取基础表格修改

代码语言：javascript复制

<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> 

1.2 盘它

1.2.1 查看 Element-UI 提供的属性列表

完美找到所需要的属性

然后就开始疯狂的修改代码修改源代码

1.2.2 在空位加一个封装好 Table 组件

咋们先随便复制一个 Table 组件

1.2.3 给插槽传递数据

查阅 Vue.js 官方文档发现我们可以通过 v-slot 传递数据

最后一波修改，搞完收工！注意：绿框中 :data = “slot.row.children” => slot.row 拿到的是列表的每一行数据

data element row table ui

0 人点赞