el-table表格实现点击展开内嵌表格

html部分

<el-table :data="tableList" row-key="id" ref="tableObj">
            <el-table-column
              show-overflow-tooltip
              label="序号"
              align="left"
              width="50"
              type="index"
            >
            </el-table-column>
            <el-table-column type="expand" class="tetable">
              <template slot-scope="props">
              //内嵌表格数据
                <div class="testdiv" v-if="props.row.isdanju">
                  <el-table
                    class="customer-table"
                    :data="props.row.orderList"
                    :header-cell-style="{ background: '#f8faff' }"
                  >
                    <!-- <el-table-column
                      width="120"
                      show-overflow-tooltip
                      class-name=""
                      label="当前单据"
                    >
                    </el-table-column> -->
                    <el-table-column
                      show-overflow-tooltip
                      label="序号"
                      class-name="second_title"
                      type="index"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      label="预约时间"
                      class-name="second_title"
                      prop="applicantTime"
                      width="300"
                    >
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      label="预约人"
                      class-name="second_title"
                      prop="applicantUser"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="flowNumber"
                      show-overflow-tooltip
                      class-name="second_title"
                      label="预约委托单"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      class-name="second_title"
                      label="测试内容"
                      width="180"
                    >
                      <template slot-scope="scope">
                        <router-link
                          :to="{
                            path: '/resourceAdministrations/appointmentDetails',
                            query: { id: scope.row.orderId },
                          }"
                        >
                          <el-link :underline="false" type="primary"
                            >查看</el-link
                          >
                        </router-link>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                //内嵌第二个表格的数据  以此次类推
                <div class="testdiv" v-if="props.row.isceshi">
                  <!-- <p class="title">测试内容</p> -->
                  <el-table
                    class="customer-table"
                    :data="props.row.processList"
                    :header-cell-style="{ background: '#f8faff' }"
                  >
                    <el-table-column
                      show-overflow-tooltip
                      class-name=""
                      label="测试内容"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      class-name="second_title"
                      label="序号"
                      type="index"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      label="测试类别"
                      class-name="second_title"
                      prop="testType"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="testTarget"
                      show-overflow-tooltip
                      class-name="second_title"
                      label="测试指标"
                      width="250"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="车牌号" prop="carPlate" width="" />
            <el-table-column label="测试指标">
              <template slot-scope="scope">
                <div
                  @click="clickButton(scope.row)"
                  style="
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #276afc;
                    cursor: pointer;
                  "
                >
                  <div class="sanjiao" v-show="!scope.row.isceshi">
                    <div>展开</div>
                    <div class="icon"></div>
                  </div>
                  <div class="sanjiao" v-show="scope.row.isceshi">
                    <div>收起</div>
                    <div class="icons"></div>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="测试计划">
              <template slot-scope="scope">
                <div
                  @click="clickButtons(scope.row)"
                  style="
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #276afc;
                    cursor: pointer;
                  "
                >
                  <div class="sanjiao" v-if="!scope.row.isdanju">
                    <div>{{ scope.row.orderNum }}</div>
                    <div class="icon"></div>
                  </div>
                  <div class="sanjiao" v-if="scope.row.isdanju">
                    <div>{{ scope.row.orderNum }}</div>
                    <div class="icons"></div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span
                  @click="handleEdit(scope.row, '1')"
                  style="
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #276afc;
                    cursor: pointer;
                  "
                  >详情</span
                >
                <span
                  @click="handleEdit(scope.row, '2')"
                  style="
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    margin-left: 20px;
                    font-weight: 400;
                    color: #276afc;
                    cursor: pointer;
                  "
                  >编辑</span
                >

                <span
                  @click="handleEdit(scope.row, '3')"
                  style="
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    margin-left: 20px;
                    font-weight: 400;
                    color: #fa4b4b;
                    cursor: pointer;
                  "
                  >删除</span
                >
              </template>
            </el-table-column>
          </el-table>

js部分

   //将展开的表格全部收起来
    toggleRowExpansion_forAll(data) {
      data.forEach((item) => {
        this.$refs.tableObj.toggleRowExpansion(item, false);
      });
    },
    //点击可展开项
    clickButton(row) {
      this.toggleRowExpansion_forAll(this.tableList);
      for (const key in this.tableList) {
        if (this.tableList[key].id == row.id) {
          this.$set(this.tableList[key], "isdanju", false);
          this.tableList[key].isceshi = !this.tableList[key].isceshi;
        } else {
          this.$set(this.tableList[key], "isceshi", false);
          this.$set(this.tableList[key], "isdanju", false);
        }
      }
      this.$refs.tableObj.toggleRowExpansion(row);
      if (!row.isceshi && !row.isdanju) {
        this.toggleRowExpansion_forAll(this.tableList);
      }
    },
    handleRow(row, column, event) {
      console.log(row, column, event, "888");
    },
    handleExpandChange(isExpend, expandedRows) {},
    clickButtons(row) {
      this.toggleRowExpansion_forAll(this.tableList);
      for (const key in this.tableList) {
        if (this.tableList[key].id == row.id) {
          this.$set(this.tableList[key], "isceshi", false);
          this.tableList[key].isdanju = !this.tableList[key].isdanju;
        } else {
          this.$set(this.tableList[key], "isceshi", false);
          this.$set(this.tableList[key], "isdanju", false);
        }
      }
      this.$refs.tableObj.toggleRowExpansion(row);
      if (!row.isceshi && !row.isdanju) {
        this.toggleRowExpansion_forAll(this.tableList);
      }
    },