弹窗嵌套表格（表格可点击展开收起）

<template>
  <div>
    <el-dialog
      :visible.sync="dialogDetailInfo.show"
      width="48%"
      class="setDialog"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      @close="closeDialog"
    >
      <div class="top">
        <div class="dian"></div>
        <div>指令详情</div>
        <div class="closImg" @click="closeDialog">
          <img src="../assets/images/nth/close.png" alt=""/>
        </div>
      </div>
      <el-scrollbar style="height: calc(48vh - 100px)">
        <div class="content">
          <el-table
            :data="tableData"
            style="width: 100%"
            class="setTable"
            :row-style="{height:'46px'}"
            :cell-style="{padding:'0px'}"
            ref="expandTable"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column
              prop="zlly"
              label="指令来源"
            >
            </el-table-column>
            <el-table-column
              prop="jsry"
              label="接收人员"
            >
            </el-table-column>
            <el-table-column
              prop="zt"
              label="状态"
            >
            </el-table-column>
            <el-table-column
              label="时间轴"
            >
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row,scope)" type="text" size="small" style="color: #2AC5FF">
                  {{scope.row.isexpan?'收起':'展开'}}
                  <img :class="scope.row.isexpan?'changeRoate':''" src="../assets/images/nth/sjx.png"
                       style="width: 10px;height: 8px;transition: all .3s">
                </el-button>
              </template>
            </el-table-column>
            <el-table-column type="expand" width="1">
              <template slot-scope="props">
                <div class="block">
                  <el-timeline>
                    <el-timeline-item timestamp="2021-08-22 21:34:56" placement="top">
                      <div style="display: flex">
                        <div style="color: #FF622B;width: 100px;margin-left: 30px">审核未通过</div>
                        <div>签收文字备注文字文字文字</div>
                      </div>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2021-08-22 21:34:56" placement="top">
                      <div style="display: flex">
                        <div style="color: #FFFFFF;width: 100px;margin-left: 30px">反馈</div>
                        <div>签收文字备注文字文字文字</div>
                      </div>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2021-08-22 21:34:56" placement="top">
                      <div style="display: flex">
                        <div style="color: #FFFFFF;width: 100px;margin-left: 30px">签收</div>
                        <div>签收文字备注文字文字文字</div>
                      </div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "dialogDetail",
    props: {
      dialogDetailInfo: {
        type: Object,
        default: () => {
        },
      },
    },
    data() {
      return {
        DialogVisible: false,
        tableData: [
          {
            zlly: '指令转发',
            jsry: '胡鑫',
            zt: '转发',
            isexpan: false,
            id: 1
          },
          {
            zlly: '指令转发',
            jsry: '胡鑫',
            zt: '转发',
            isexpan: false,
            id: 2
          }
        ]
      }
    },
    methods: {
      closeDialog() {
        this.$parent.dialogDetailInfoDialog()
      },
      handleClick(row, scope) {
        console.log(scope.$index);
        let $table = this.$refs.expandTable;
        $table.toggleRowExpansion(row)
        // this.tableData.map(item=>{
        //   item['isexpan']=false
        // })
        this.tableData[scope.$index]['isexpan'] = !this.tableData[scope.$index]['isexpan']
        console.log(this.tableData)
      },
    }
  }
</script>

<style scoped lang="scss">
  /*弹窗----------------------------------------------------*/
  /deep/ .setDialog {
    .el-dialog__header {
      display: none;
    }

    .el-dialog {
      background: #154476;
      border: 1px solid #3baaff;
      padding: 0px;
      height: 48vh;
      color: #ffffff;

      .el-dialog__body {
        padding: 0rem 0rem;
      }

      .closImg {
        cursor: pointer;


        img {
          width: 14px;
          height: 14px;
          position: absolute;
          top: 15px;
          right: 20px;
          transition: all .3s;

          &:hover {
            transform: rotate(90deg);
            transition: all .3s;
          }
        }

      }

      .head {
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.2rem;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0 0 10px #0c8ac7;
      }
    }
  }

  /*表格样式----------------------------------------------------------*/
  /deep/ .setTable {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background-color: transparent !important;

    //表头的样式
    thead {
      font-size: 12px;
      color: #d0e9ff;
      height: 40px;
      background-color: transparent !important;

      th {
        padding: 0;
        background: #009ee0;
      }
    }

    //表格下横线
    & th.is-leaf,
    & td {
      border-bottom: 1px solid rgba(23, 131, 199, 0.4);
    }

    //表格背景色透明
    tbody {
      tr {
        background: transparent;
        color: #ffffff;
      }

      td {
        background: transparent;
      }
    }

    //鼠标移入表格的颜色
    .el-table__body tr:hover > td {
      background-color: #0078d2;
    }

    //外边框颜色
    &::after,
    .el-table--border::after,
    &::before {
      background-color: transparent;
    }
  }

  .top {
    width: 100%;
    height: 40px;
    background-color: #009ee0;
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 15px;

    .dian {
      width: 4px;
      height: 4px;
      margin-right: 10px;
      margin-left: 20px;
      background: #ffffff;
      border-radius: 50%;
    }
  }

  .content {
    width: 95%;
    margin: 0 auto;
  }

  .changeRoate {
    transform: rotate(
        180deg
    );
    transition: all .3s;
  }
</style>