elementUI表格二级目录展示，自定义图标展开与收起

收起：

展开：

 

followListData数据格式： 

 

 

<el-table
        :data="followListData"
        ref="table"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.taskDTOList"
              style="width: 100%"
              v-show="props.row.taskDTOList.length > 0"
              class="tableInner"
            >
              <el-table-column label="" width="90px"></el-table-column>
              <el-table-column label="时间" prop="operatorTime">
              </el-table-column>
              <el-table-column label="类型" prop="taskType">
                <template slot-scope="scope">
                  <span v-show="scope.row.taskType === 1">随访计划</span>
                  <span v-show="scope.row.taskType === 2">临近就诊</span>
                  <span v-show="!scope.row.taskType">-</span>
                </template>
              </el-table-column>
              <el-table-column label="作人" prop="operatorName">
              </el-table-column>
              <el-table-column label="触达" prop="status">
                <template slot-scope="scope">
                  <span v-show="scope.row.status === 1">否</span>
                  <span v-show="scope.row.status === 2">是</span>
                  <span v-show="!scope.row.status">-</span>
                </template>
              </el-table-column>
              <el-table-column label="到诊时间" prop="arrivePlanDateText">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.arrivePlanDateText
                      ? scope.row.arrivePlanDateText
                      : "-"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反馈内容" prop="remark">
                <template slot-scope="scope">
                  <el-popover
                    placement="bottom"
                    width="200"
                    trigger="hover"
                    :content="scope.row.remark"
                    v-show="scope.row.remark"
                  >
                    <span
                      slot="reference"
                      style="
                        display: inline-block;
                        height: 26px;
                        width: 100px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                      "
                    >
                      {{ scope.row.remark }}
                    </span>
                  </el-popover>
                  <span v-show="!scope.row.remark">-</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="" width="40px">
          <template slot-scope="scope">
            <div v-show="scope.row.taskDTOList.length > 0">
              <v-icon
                size="16"
                v-show="!scope.row.expansion"
                color="#373D41"
                @click="expend(scope.row)"
                >mdi-plus</v-icon
              >
              <v-icon
                size="16"
                v-show="scope.row.expansion"
                color="#373D41"
                @click="expend(scope.row)"
                >mdi-minus</v-icon
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="计划日期" prop="followUpPreTimeText">
        </el-table-column>
        <el-table-column label="预计日期" prop="arrivePlanDateText">
        </el-table-column>
        <el-table-column label="实际日期" prop="arriveDateText">
        </el-table-column>
        <el-table-column label="就号" prop="pv"> </el-table-column>
        <el-table-column label="就诊" prop="visitDepart"> </el-table-column>
        <el-table-column label="接诊" prop="visitDoctor"> </el-table-column>
        <el-table-column label="操作" prop="detail">
          <template slot-scope="scope">
            <el-popover
              placement="left"
              width="180"
              trigger="click"
              v-show="scope.row.pv"
            >
              <div class="inspResultAll">
                <div class="resultTop">
                  <div
                    class="topContli"
                    v-for="(item, index) in resultRadioList"
                    :key="index"
                    v-show="item.standardItemCode === '133'"
                  >
                    <div class="contliRadio">
                      <el-radio-group
                        class="contGroup"
                        v-model="item.val"
                        @change="resultSave"
                      >
                        <el-radio
                          :label="item1.label"
                          v-for="(item1, index1) in item.optionList"
                          :key="index1"
                          >{{ item1.label }}</el-radio
                        >
                        <el-radio label="">查</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="resultBtm"></div>
              </div>
              <span
                slot="reference"
                style="color: #0b41cd; padding: 0 8px; cursor: pointer"
                @click="openGanColun(scope.row)"
                >填报</span
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

methods:{
  tableRowClassName() {
      return 'rowBg'
    },
    expend(row) {
      const $table = this.$refs.table
      this.followListData.map((item) => {
        if (row.followUpId !== item.followUpId) {
          $table.toggleRowExpansion(item, false)
          item.expansion = false
        } else {
          item.expansion = !item.expansion
        }
      })
      $table.toggleRowExpansion(row)
    },

}

 

.followStyl {
  ::v-deep .el-drawer {
    width: 900px !important;
  }
  ::v-deep .el-drawer::-webkit-scrollbar {
    display: none !important;
  }
  ::v-deep .el-drawer__header {
    padding: 16px 24px;
    margin-bottom: 0;
    .followTitle {
      font-size: 20px;
      color: #000;
      font-weight: 700;
      text-align: left;
    }
  }
  ::v-deep .el-drawer__body {
    padding: 16px 24px;
  }
  ::v-deep .el-table__expand-column .cell {
    display: none;
  }
  ::v-deep .el-table .rowBg {
    background: #eee;
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5);
  }
  ::v-deep .has-gutter th .cell {
    color: #212631;
    font-size: 14px;
    font-weight: 700;
  }
  ::v-deep .el-drawer__body::-webkit-scrollbar {
    display: none;
  }
  ::v-deep .el-table__body-wrapper {
    max-height: 600px;
    overflow: auto;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: none;
  }
}