标签：Vue bookid No bookname Element Angeles Los 90036 Plus

实现如图所是效果：

主从表显示代码：

<template>
  <el-table :data="tableData" stripe style="width: 100%"   max-height="500">
    <el-table-column type="expand">
      <template #default="props">
        <el-table :data="props.row.detailList"  stripe border  style="width: 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>

标签：Vue,bookid,No,bookname,Element,Angeles,Los,90036,Plus
来源： https://www.cnblogs.com/GarfieldTom/p/15488778.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。