vue 嵌套表格组件_【Vue_08】ElementUI 实现嵌套表格

先来看效果图

一、查看 Element-UI 组件库

1. Element-UI 组件库

2. 选择合适的表格

我这里选取基础表格修改

​​​​​​​

查看源代码

:data="tableData"

style="width: 100%">

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

prop="address"

label="地址">

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

}]

}

}

}

二、盘它

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

完美找到所需要的属性

​​​​​​​

修改源代码

​​​​​​​

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

咋们随便复制一个 Table 组件

​​​​​​​

3. 给插槽传递数据

查阅 Vue.js 官方文档(我们可以通过 v-slot 传递)

完善源代码

​​​​​​​

绿框中 :data = "slot.row.children" => slot.row 拿到的是列表的每一行数据