后端返回的值，要求前端用一个大表格里面嵌套无数个小表格。

静静湖

已于 2022-06-17 17:59:13 修改

阅读量194

点赞数

文章标签： elementui vue.js javascript

于 2022-05-13 17:35:58 首次发布

本文链接：https://blog.csdn.net/m0_60608114/article/details/124755130

版权

本文介绍如何使用Vue.js和Element UI库，将后端返回的复杂数据结构转换为前端的大表格中嵌套多个小表格的展示。通过JavaScript处理数据，动态生成表格结构，实现灵活的数据呈现。

摘要由CSDN通过智能技术生成

<template>
  <div class="layout">
    <el-table :data="res">
      <el-table-column prop="name">
        <template slot-scope="scope">
          <div class="tab_header">
            <span style="font-weight: 600">{
  { scope.row.name }}</span>
            <div class="operate">
              <span @click="handleEdit(scope.$index, scope.row)">修改</span>
              <span @click="handleDelete(scope.$index, scope.row)">删除</span>
            </div>
          </div>

          <!-- 这里要实现 多个表格共用一个表头，故需做判断，当表格要渲染的数据为default这个数组的时候，才显示表头的label值，即显示表头，设置show-header属性为true -->
          <div v-for="item in scope.row.ext" :key="item.id">
            <el-table
              :data="item"
              border
              :class="item !== scope.row.ext.default ? 'tab-thead-style' : ''"
              style="box-sizing: border-box; border-top: none"
              :span-method="objectSpanMethod"
              :show-header="item === scope.row.ext.default"
            >
              <el-table-column label="运送到" prop="area"></el-table-column>
              <el-table-column label="首重" prop="weight"></el-table-column>
              <el-table-column
                label="运费"
                prop="first_price"
              ></el-table-column>
              <el-table-column
                label="续重