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>
  • 相关阅读:
    非常好用的JS滚动代码
    在vs中使用ZedGraph
    通用SQL分页过程
    使用 Request.QueryString 接受参数时,跟编码有关的一些问题
    一个验证Email 的Javascript 函数
    DOS 下将文件名列表写入文件
    .NET 开发人员应该下载的十个必备工具
    中文全文搜索(一)
    关于<![if IE]>
    Lucene 全文索引心得
  • 原文地址:https://www.cnblogs.com/GarfieldTom/p/15488778.html
Copyright © 2011-2022 走看看