vue element ui table表套table表和表单(expand)

BiKABi又回来了，今天抽空把之前自己重新封装的一个表格套表格和表单的记录一下，经常用element ui 的小伙伴们应该知道，官方给的文档只有单独的套表格或者是表单，下面直接上代码

效果图

HTML代码

1.表格根据自己的需求该
2.之前想拿到表的表单数据一直踩坑，每次拿数据都拿到的是所有的，所以就想到用下标的方法直接拿数据就可以formData.rawMaterialsForDetailList[scope.$index].dataListform这样就可以不会出现明明第一条数据有2条，第二条数据有1条，但是拿出来每个都是3条的问题了

<el-table
          :data="formData.rawMaterialsForDetailList"
          ref="multipleTable"
          border
          style="margin: 10px 0 0 0;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div
                v-for="item2 in formData.rawMaterialsForDetailList[scope.$index].dataListform"
                :key="item2"
              >
                <!-- <span>{{item2}}</span> -->
                <span>{{item2.name}}</span>
                <el-table
                  :data="item2.dataList"
                  ref="multipleTable"
                  border
                  style="margin: 10px 0 0 0;"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column label="派工单" align="center" prop="a"></el-table-column>
                  <el-table-column label="制程工艺" align="center" prop="b"></el-table-column>
                  <el-table-column label="派工数" align="center" width="100" prop="c"></el-table-column>
                  <el-table-column label="当前工序" align="center">
                    <el-table-column label="名称" align="center" prop="d"></el-table-column>
                    <el-table-column label="完工数" align="center" prop="e"></el-table-column>
                    <el-table-column label="占比%" align="center" prop="f"></el-table-column>
                  </el-table-column>
                </el-table>
              </div>
            </template>

            <!-- </div> -->
          </el-table-column>
          <el-table-column label="品名" align="center" prop="partNo"></el-table-column>
          <el-table-column label="图号" align="center" prop="picNo"></el-table-column>
          <el-table-column label="版次" align="center" width="100" prop="picVersion"></el-table-column>
          <el-table-column label="材质" align="center" prop="gradeName"></el-table-column>
          <el-table-column label="变更类型" align="center" prop="specs"></el-table-column>
          <el-table-column label="变更原因" align="center" prop="gradeName"></el-table-column>
          <el-table-column label="单套数" align="center">
            <el-table-column label="变更前" align="center" prop="totalNum"></el-table-column>
            <el-table-column label="变更后" align="center" prop="totalNum"></el-table-column>
          </el-table-column>
          <el-table-column label="套数" align="center">
            <el-table-column label="变更前" align="center" prop="singleDosage"></el-table-column>
            <el-table-column label="变更后" align="center" prop="singleDosage"></el-table-column>
          </el-table-column>
          <el-table-column label="总数" align="center">
            <el-table-column label="变更前" align="center" prop="totalContent"></el-table-column>
            <el-table-column label="变更后" align="center" prop="totalContent"></el-table-column>
          </el-table-column>
          <el-table-column label="单位" align="center" width="100" prop="unitNo"></el-table-column>
          <el-table-column label="交期" align="center">
            <el-table-column label="变更前" align="center" prop="dateRequired"></el-table-column>
            <el-table-column label="变更后" align="center" width="180" prop="dateRequired"></el-table-column>
          </el-table-column>
          <el-table-column label="紧急程度" align="center" prop="kc"></el-table-column>
        </el-table>

JS代码

1.这里我只是模拟的数据格式，换成接口就可以

//   表单定义
      formData: {
        projectNo: "",
        createName: "",
        orderDate: "",
        orderSerial: "",
        orderNo: "",
        remark: "",
        filePathList: [],
        rawMaterialsForDetailList: [
          {
            partNo: "1111111",
            dataListform: [
              {
                name: "OD20200723001-01",
                dataList: [
                  {
                    a: "PG20200728001",
                    b: "BR->CNC1->M->CNC1->QC",
                    c: "50",
                    d: "CNC1",
                    e: "40",
                    f: "80%",
                  },
                  {
                    a: "PG20200728001",
                    b: "BR->CNC1->M->CNC1->QC",
                    c: "50",
                    d: "CNC1",
                    e: "40",
                    f: "80%",
                  },                                   
                ],
              },
              {
                name: "OD20200723001-02",
                dataList: [
                  {
                    a: "PG20200728002",
                    b: "BR->CNC1->M->CNC1->QC",
                    c: "50",
                    d: "CNC1",
                    e: "40",
                    f: "80%",
                  },
                ],
              },
            ],
          },
          {
            partNo: "1111111",
            dataListform: [
              {
                name: "OD20200723001-03",
                dataList: [
                  {
                    a: "PG20200728003",
                    b: "BR->CNC1->M->CNC1->QC",
                    c: "50",
                    d: "CNC1",
                    e: "40",
                    f: "80%",
                  },
                ],
              },
            ],
          },
        ],
        code: "",
        id: "",
      },
    };

希望对你有帮助
如有错误，请斧正！