Element嵌套表格如何写

**使用element-ul里面的table 来完成

1、分两个接口请求，第一个接口请求外面的表格
2、然后给外面表格数据里面便利一个children子级数组
3、使用表格事件加一个@expand-change="expand"方法，来请求子级的表格数据，并把它push到外部表格的children里面**

<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 表单 -->
      <div class="formbox">
        <el-row :gutter="20">
          <el-col :span="22">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-date-picker v-model="formInline.startTime" type="date" placeholder="发货时间" value-format="yyyy-MM-dd" />
              </el-form-item>
              <el-form-item>
                <el-date-picker v-model="formInline.endTime" type="date" placeholder="送货时间" value-format="yyyy-MM-dd" />
              </el-form-item>
              <el-form-item>
                <el-input v-model="formInline.autoNo" placeholder="车牌号" clearable />
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" @click="searchRole" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 表格 -->
      <div class="cont test-1">
        <div class="scrollbar">
          <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" @expand-change="expand">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table :data="scope.row.children" style="width: 100%; margin-bottom: 20px">
                  <el-table-column label="产品名称" prop="productName" />
                  <el-table-column label="物料料号" prop="height" />
                  <el-table-column label="规格" prop="length">
                    <template slot-scope="scope">
                      长{{ scope.row.length }}mm * 宽{{ scope.row.width }}mm *
                      高{{ scope.row.height }}
                    </template>
                  </el-table-column>
                  <el-table-column label="发货数量" prop="productNum" />
                  <el-table-column label="单位" prop="unit" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="deliveryNo" label="送货单编号" />
            <el-table-column prop="autoNumber" label="车牌号" />
            <el-table-column prop="deliveryTime" label="发货时间" />
            <el-table-column prop="productName" label="物品名称" />
            <el-table-column prop="makeBillUser" label="送货人" />
            <el-table-column prop="deliveryNumber" label="发货数量" />
            <el-table-column prop="customerSignUrl" label="签收单">
              <template slot-scope="scope">
                <div v-if="scope.row.customerSignUrl === '' || scope.row.customerSignUrl === null">暂无图片</div>
                <el-image v-else style="width: 100px; height: 70px" :src="scope.row.customerSignUrl" fit="fit" :preview-src-list="[scope.row.customerSignUrl]" />
              </template>
            </el-table-column>
            <el-table-column prop="customerContactsName" label="收货人" />
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="修改" placement="top">
                  <el-button v-if="$JURISDICTION && $JURISDICTION.indexOf('supplier_deliveryRecord_edit')!==-1" type="text" @click="handleEditClick(scope.row)">
                    <svg-icon icon-class="edit" />
                  </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="详情" placement="top">
                  <el-button v-if="$JURISDICTION && $JURISDICTION.indexOf('supplier_deliveryRecord_details')!==-1" type="text" @click="handleDetailsClick(scope.row)">
                    <svg-icon icon-class="check" />
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination background :current-page="this.formInline.pageIndex" :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { releaseTableList, getGoodseProductrBy } from '@/api/process/deliver'
export default {
  components: {},
  data () {
    return {
      total: 0, // 总条数
      tableData: [],
      // 表头搜索数据
      formInline: {
        startTime: '',
        endTime: '',
        autoNo: '',
        supplierTidList: [], // [6,4],// this.$store.getters.info.supplierIdList,
        pageIndex: 1, // 当前页
        pageSize: 10 // 当前页
      }
    }
  },
  activated () {
    this.tabList()
  },
  methods: {
    //   表格列表数据
    tabList () {
      console.log(this.formInline.supplierTidList)
      releaseTableList(this.formInline).then(res => {
        if (res.resultData == null || res.resultData.length < 0) {
          this.tableData = []
        } else {
          const _obj = JSON.parse(JSON.stringify(res.resultData))
          _obj.forEach((item, index) => {
            item.children = []
          })
          this.tableData = JSON.parse(JSON.stringify(_obj))
          this.total = res.count
        }
      })
    },
    // 表格展开
    expand (row, rowList) {
      console.log(row.tid, rowList)
      getGoodseProductrBy(row.tid).then(res => {
        this.tableData.forEach((item, index) => {
          if (row.tid === item.tid) item.children = res.resultData
        })
      })
    },
    // 分页
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.tabList()
    },
    handleCurrentChange (val) {
      this.formInline.pageIndex = val
      this.tabList()
    },
    // 搜索条件接口
    searchRole () {
      this.tabList()
    },
    // 修改
    handleEditClick (row) {
      console.log(row)
      this.$router.push({
        path: '/externalsuppliers/deliveryrecord/particulars',
        query: { deliveryRecordId: row.tid, edit: 0 }
      })
    },
    // 详情
    handleDetailsClick (row) {
      console.log(row)
      this.$router.push({
        path: '/externalsuppliers/deliveryrecord/particulars',
        query: { deliveryRecordId: row.tid, edit: 1 }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/globalVar.scss";

.container {
  width: 100%;
  height: 100%;
  .box-card {
    padding: 20px;
    width: 100%;
    height: 83vh;
    background: #ffffff;
  }
  ::v-deep .el-dialog {
    padding: 20px;
    .el-input {
      width: 380px !important;
    }
  }
  .formbox {
    ::v-deep .el-row {
      padding: 0px 20px 20px 10px;
    }
    ::v-deep .el-col-22 {
      text-align: left;
    }
    ::v-deep .el-col-2 {
      text-align: right;
    }
  }
  .authorityBox {
    display: flex;
    justify-content: space-between;
    .box_one {
      width: 400px;
      height: 400px;
      padding-left: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .title_all {
      font-size: 16px;
      color: #0c80f8;
    }
  }
}
.table {
  padding: 20px;
  margin-bottom: 20px;
}
.cont {
  overflow: auto;
  height: 634px;
  .scrollbar {
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
}
::v-deep .el-image-viewer__canvas img {
  height: 60%;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #c3c3c3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>