【Vue_08】ElementUI 实现嵌套表格

原创
02/17 21:45
阅读数 1.5K

🚩 先来看效果图

在这里插入图片描述

一、查看 Element-UI 组件库

1. Element-UI 组件库

     在这里插入图片描述

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>
    

二、盘它

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

  • 完美找到所需要的属性

    ​​​​​​​ 在这里插入图片描述

  • 修改源代码

    ​​​​​​​ 在这里插入图片描述

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

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

    ​​​​​​​ 在这里插入图片描述

3. 给插槽传递数据

  • 查阅 Vue.js 官方文档(我们可以通过 v-slot 传递) 在这里插入图片描述
  • 完善源代码

​​​​​​​     在这里插入图片描述

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

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部