element的展开收起,合并表格

如果两个因为后台接口只能提供两个接口,假数据做法如下

// 什么管理 - 品牌方(采购商什么)
<template>
  <div class="purchaseOrder">
    <!--展开行table-->
    <el-table
      ref="boxData"
      v-loading="loading"
      size="small"
      :data="boxData"
      tooltip-effect="dark"
      style=" 100%"
      max-height="600"
      @expand-change="expandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <!-- 子table -->
          <el-table
            size="small"
            :data="props.row.sonData"
            :cell-style="{ background: '#fff' }"
            style=" 100%"
            border
            stripe
            max-height="600"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              v-for="(item, index) in column2"
              :key="index"
              :label="item.title"
              :prop="item.key"
              align="center"
              :fixed="item.fixed"
              :min-width="item.width ? item.width : 120"
            >
              <template slot-scope="scope">
                <div v-if="item.key == 'handle_btn2'">
                  <el-button>操作按钮</el-button>
                </div>
                <div v-else>{{ scope.row[item.key] }}</div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- 总table -->
      <el-table-column
        v-for="(item, index) in column1"
        :key="index"
        :label="item.title"
        :prop="item.key"
        align="center"
        :fixed="item.fixed"
        :min-width="item.width ? item.width : 120"
      >
        <template slot-scope="scope">
          <div v-if="item.key == 'company_name'">
            <span class="cBlue pointer" @click="handleSee(scope.row, 'see')">{{
              scope.row.company_name
            }}</span>
          </div>
          <div v-else-if="item.key == 'is_usable'">
            <span>{{
              scope.row.is_usable == 0
                ? "禁用"
                : scope.row.is_usable == 1
                ? "启用"
                : ""
            }}</span>
          </div>
          <div v-else-if="item.key == 'handle_btn'">
            <el-button type="text" @click="handleBtn(scope.row, 'edit')"
              >修改</el-button
            >
            <el-button
              v-if="scope.row.is_usable == 1"
              type="text"
              @click="handleIsUsable(scope.row, 0)"
              >禁用</el-button
            >
            <el-button
              v-if="scope.row.is_usable == 0"
              type="text"
              @click="handleIsUsable(scope.row, 1)"
              >启用</el-button
            >
          </div>
          <div v-else>{{ scope.row[item.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// import paging from "@/components/pages/pagination.vue";

export default {
  components: {
    // paging // 分页
  },
  data() {
    return {
      // 加载
      loading: true,
      // 表格数据
      boxData: [],
      sonData: [],
      tableHeight: 300,
      // 表格数据
      column1: [
        { title: "什么编号", key: "order_code",  120 },
        { title: "什么日期", key: "created_at",  90 },
        { title: "名称", key: "plan_name",  90 },
        { title: "操作", key: "handle_btn",  90 }
      ],
      column2: [
        { title: "品牌", key: "brand_name",  120 },
        { title: "产成品名称", key: "product_name",  90 },
        { title: "目录", key: "index",  90 },
        { title: "规格", key: "order_code",  90 },
        { title: "尺寸", key: "product_name",  90 },
        { title: "操作", key: "handle_btn2",  90 }
      ]
    };
  },

  computed: {},
  watch: {},

  mounted() {},

  created() {
    // 初始化 表格数据默认渲染
    this.handleSeach();

    // 实时屏幕高度
    let clientHeight = document.documentElement.clientHeight;
    this.tableHeight =
      clientHeight > 400 ? clientHeight - 330 : this.tableHeight;
  },

  methods: {
    // 点击搜索
    handleSeach() {
      // // 页码初始化
      // this.paging = {
      //   page: 1,
      //   limit: 10
      // };
      // this.loading = true;
      this.handleGetTable();
    },

    // 获取数据
    handleGetTable() {
      // // 接口获取数据
      // Api.customerList(param)
      //   .then(res => {
      //     const { code, data, msg, total } = res.data;
      //     this.total = total;

      this.loading = false;

      // 第一层假数据
      this.boxData = [
        { order_code: "111", plan_name: "什么名称" },
        { order_code: "2312222", plan_name: "什么名称" },
        { order_code: "32312222", plan_name: "什么名称" }
      ];

      // 给个空数组
      this.boxData.forEach((item, index) => {
        item.sonData = [];
      });
      // this.boxData = data;
      // 处理数据
      // this.handleData();
      // })
      // .catch(error => {
      //   this.loading = false;
      //   this.boxData = [];
      // });
    },

    // 处理数据
    expandChange(row, expandedRows) {
      // console.log(row, expandedRows, "点击展开push给boxData");
      // 接口获取里面数据
      this.sonData = [];
      this.sonData = [
        {
          order_code: "111",
          created_at: "2013-10-31",
          plan_name: "什么名称",
          materials: [
            {
              brand_name: "仁和",
              product_name: "产成品名称1"
            },
            {
              brand_name: "仁和",
              product_name: "产成品名称2"
            }
          ]
        },
        {
          order_code: "2312222",
          created_at: "2021-10-31",
          plan_name: "什么名称2",
          materials: [
            {
              brand_name: "仁和2",
              product_name: "产成品名称21"
            }
          ]
        },
        {
          order_code: "32312222",
          created_at: "2021-08-31",
          plan_name: "什么名称3",
          materials: [
            {
              brand_name: "仁和31",
              product_name: "产3成品名称31"
            },
            {
              brand_name: "仁和32",
              product_name: "产成品名称34"
            },
            {
              brand_name: "仁和33",
              product_name: "产成品名称31"
            }
          ]
        }
      ];

      // 先把二纬数组改成一位数组
      const handleData = [];
      if (this.sonData.length) {
        this.sonData.forEach(row => {
          // 处理company_users数组的每一个对象
          let handleItemData = Object.assign({}, row);
          if (row.materials.length) {
            row.materials.forEach((ele, index) => {
              // 新增行录字段
              ele.index = index + 1;
              // 合为新对象
              handleItemData = Object.assign({}, handleItemData, ele);
              // 需要合并的条数 加一个新属性:合并的个数mergeNum, 第一项为合并个数 其他项-1
              if (index == 0) {
                handleItemData.mergeNum = row.materials.length
                  ? row.materials.length
                  : 0;
              } else {
                handleItemData.mergeNum = -1;
              }
              // push为一维数组
              handleData.push(handleItemData);

              setTimeout(() => {
                this.loading = false;
              }, 200);
            });
          } else {
            this.loading = false;
            // 没有值时 也要展示
            handleData.push(handleItemData);
            handleItemData.mergeNum = 1;
          }
        });
      } else {
        this.loading = false;
      }

      // table的数据才是为处理好的数据
      this.sonData = handleData;
      // return console.log(this.sonData, "处理后的");

      // 点开的某项都插入到boxData的某项
      this.boxData.forEach((item, index) => {
        if (item.order_code == row.order_code) {
          item.sonData = [];

          this.sonData.forEach((items, indexs) => {
            if (item.order_code == items.order_code) {
              item.sonData.push(items);
            }
          });
        }
      });

      console.log(this.boxData, "处理后的");
    },

    // table表格  合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 需要合并的
      if (columnIndex == 0 || columnIndex == 1) {
        if (row.mergeNum != -1) {
          return {
            rowspan: row.mergeNum,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style lang="scss">
.purchaseOrder {
  .el-table {
    margin-top: 10px;
  }
  // 暂时去掉hover
  .el-table tbody tr:hover > td {
    background: #fff;
  }
  .form-style {
  }
}
</style>
<style lang="scss" scoped></style>

参考合并https://blog.csdn.net/qq_38060231/article/details/108261350