QQ图片20231221171409.png

  <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
        class="tableBlockNew"
      >
        <el-table-column prop="id" label="所属项目" width="180">
          <template slot-scope="scope">
            <el-table
              :data="[{}, {}, {}]"
              class="tableBlockNewContent"
              :show-header="false"
              :span-method="objectSpanMethod1"
            >
              <el-table-column prop="date" label="日期" width="180">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 0">
                    <div
                      style="
                        height: 50px;
                        background-color: #fafafa;
                        line-height: 50px;
                        padding: 0 10px;
                        display: flex;
                        justify-content: space-between;
                      "
                    >
                      <div>
                        <el-checkbox v-model="checked"></el-checkbox>
                        <span style="margin: 10px">
                          工单号：6321026549895632
                        </span>
                        <el-divider direction="vertical"></el-divider>
                        <span style="margin: 10px">
                          下单时间：2022/11/16 18:38:27
                        </span>
                        <el-divider direction="vertical"></el-divider>
                        <span style="margin: 10px">
                          预约时间：2022/11/16 18:38:27
                        </span>
                      </div>
                      <div>
                        <el-button type="text">删除</el-button
                        ><el-divider direction="vertical"></el-divider>
                        <el-button type="text">编辑</el-button
                        ><el-divider direction="vertical"></el-divider>
                        <el-button type="text">详情</el-button
                        ><el-divider direction="vertical"></el-divider>
                        <el-button type="text">派工</el-button>
                      </div>
                    </div>
                  </div>
                  <div v-if="scope.$index === 1">xxx房</div>
                  <div v-if="scope.$index === 2">
                    <span style="margin: 10px">
                      安装时间：2023-11-27 13:53:43
                    </span>
                    <el-divider direction="vertical"></el-divider>
                    <span style="margin: 10px"> 实际安装型号：aaa </span>
                    <el-divider direction="vertical"></el-divider>
                    <span style="margin: 10px"> 门锁ID：00000000000B </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" width="180">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">门锁</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" width="180">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">
                    <div>Baaaa</div>
                    <div>Baaaa36_3L</div>
                    <div>CBaaaa-F</div>
                    <div>Baaaa0-F</div>
                    <div>Baaaa0</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" width="180">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">1120*6220mm</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" width="260">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">
                    <div>姓名：张三</div>
                    <div>联系电话：176****6237</div>
                    <div>小区名称：啦啦庄园</div>
                    <div>房间号：5-10-1503</div>
                    <div>
                      安装地址：浙江省杭州市西湖区啦啦庄园5幢10单元1503室
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" width="180">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">
                    西湖区xx运营管理服务中心
                  </div>
                </template></el-table-column
              >
              <el-table-column prop="address" width="160">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">待安装</div>
                </template></el-table-column
              >
              <el-table-column prop="address" width="160">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">李四</div>
                </template>
              </el-table-column>
              <el-table-column prop="address">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 1">这里是备注</div>
                </template></el-table-column
              >
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="设备类型" width="180">
        </el-table-column>
        <el-table-column prop="amount1" label="可选型号" width="180">
        </el-table-column>
        <el-table-column prop="amount2" label="锁体尺寸" width="180">
        </el-table-column>
        <el-table-column prop="amount3" label="安装信息" width="260">
        </el-table-column>
        <el-table-column prop="amount3" label="服务网点" width="180">
        </el-table-column>
        <el-table-column prop="amount3" label="状态" width="160">
        </el-table-column>
        <el-table-column prop="amount3" label="安装工人" width="160">
        </el-table-column>
        <el-table-column prop="amount3" label="备注"> </el-table-column>
      </el-table>

js

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return [1, 9];
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (rowIndex !== 1) {
        return [1, 9];
      } else {
        return [1, 1];
      }
    },

css

/deep/ .tableContent .el-divider {
  height: 100%;
}
/deep/ .tableBlockNew .el-table__row .cell {
  padding: 0;
}
/deep/ .tableBlockNewContent .cell {
  padding-left: 10px !important;
}
/deep/ .tableBlockNewContent .el-table__row {
  &:nth-child(1) {
    background-color: #fafafa;
    td {
      border-bottom: 1px solid #ebeef5 !important;
    }
    td:first-child {
      border-right: none;
      border-top: 1px solid #ebeef5;
      padding: 0 !important;
    }
  }
  &:nth-child(2) {
    td:last-child {
      border-right: none;
    }
  }
  &:nth-child(3) {
    background-color: #fafafa;
    td {
      height: 50px;
      padding: 0;
      border-top: 1px solid #ebeef5;
    }
    td > div {
      height: 100%;
      line-height: 50px;
    }
    td:first-child {
      border-right: none;
      border-bottom: none;
    }
  }
}
/deep/ .tableBlockNew .el-table__row td {
  border-bottom: none;
  &:first-child {
    padding-bottom: 0;
  }
}