zoukankan      html  css  js  c++  java
  • Vue+Element Plus中显示主从表信息

    实现如图所是效果:

    主从表显示代码:

    <template>
      <el-table :data="tableData" stripe style=" 100%"   max-height="500">
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.detailList"  stripe border  style=" 50%">
              <el-table-column label="BookId" prop="bookid" />
              <el-table-column label="BookName" prop="bookname" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="Date" prop="date" />
        <el-table-column label="Name" prop="name" />
        <el-table-column label="City" prop="city" />
        <el-table-column label="Address" prop="address" />
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >Edit</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    
    <script lang="ts">
    export default {
      data() {
        return {
          tableData: [
            {
              date: '2016-05-03',
              name: 'Tom',
              state: 'California',
              city: 'Los Angeles',
              address: 'No. 189, Grove St, Los Angeles',
              zip: 'CA 90036',
              detailList:[{
                bookid:1,
                bookname:"delphi"
              },
              {
                bookid:2,
                bookname:"java"
              }]
            },
            {
              date: '2016-05-02',
              name: 'Tom',
              state: 'California',
              city: 'Los Angeles',
              address: 'No. 189, Grove St, Los Angeles',
              zip: 'CA 90036',
              detailList:[{
                bookid:1,
                bookname:"delphi"
              },
              {
                bookid:2,
                bookname:"java"
              }]
            },
            {
              date: '2016-05-04',
              name: 'Tom',
              state: 'California',
              city: 'Los Angeles',
              address: 'No. 189, Grove St, Los Angeles',
              zip: 'CA 90036',
              detailList:[{
                bookid:1,
                bookname:"delphi"
              },
              {
                bookid:2,
                bookname:"java"
              }]
            },
            {
              date: '2016-05-01',
              name: 'Tom',
              state: 'California',
              city: 'Los Angeles',
              address: 'No. 189, Grove St, Los Angeles',
              zip: 'CA 90036',
              detailList:[{
                bookid:1,
                bookname:"delphi"
              },
              {
                bookid:2,
                bookname:"java"
              }]
            },
            {
              date: '2016-05-08',
              name: 'Tom',
              state: 'California',
              city: 'Los Angeles',
              address: 'No. 189, Grove St, Los Angeles',
              zip: 'CA 90036',
              detailList:[{
                bookid:1,
                bookname:"delphi"
              },
              {
                bookid:2,
                bookname:"java"
              }]
            },
            {
              date: '2016-05-06',
              name: 'Tom',
              state: 'California',
              city: 'Los Angeles',
              address: 'No. 189, Grove St, Los Angeles',
              zip: 'CA 90036',
              detailList:[{
                bookid:1,
                bookname:"delphi"
              },
              {
                bookid:2,
                bookname:"java"
              }]
            },
            {
              date: '2016-05-07',
              name: 'Tom',
              state: 'California',
              city: 'Los Angeles',
              address: 'No. 189, Grove St, Los Angeles',
              zip: 'CA 90036',
              detailList:[{
                bookid:1,
                bookname:"delphi"
              },
              {
                bookid:2,
                bookname:"java"
              }]
            },
          ],
        }
      },
    
      methods: {
        handleEdit(index, row) {
          console.log(index, row)
        },
        handleDelete(index, row) {
          console.log(index, row)
        },
      },
    }
    </script>
  • 相关阅读:
    关于Ubuntu 9.10 的aptget update 一直无法更新源的点点滴滴
    CentOS的安装和搭建文件共享服务器(Samba)
    VirtualBox 下的 Ubuntu 虚拟机中使用 Android 真机做开发调试
    VmWare下安装CentOS6图文安装教程
    CentOS的远程桌面(xdm)
    ubuntu Apache安装设置
    关于母版页的按钮事件
    TSQL使用函数uppercase更新xml
    文章的上一篇和下一篇导航 V2
    数据库用户映射到 SQL Server 登录名
  • 原文地址:https://www.cnblogs.com/GarfieldTom/p/15488778.html
Copyright © 2011-2022 走看看