elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身

直接上代码了没什么可讲的,主要是用到

row-key="id"

:expand-row-keys="expands

@row-click="handleRowClick"

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 266px)"
        tool-class="ele-toolbar-form"
        :toolkit="[]"
        cache-key="recordTable"
        row-key="id"
        :expand-row-keys="expands"
        @row-click="handleRowClick"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <template v-slot:toolbar>
          <!-- 搜索表单 -->
          <rectify-search @search="reload"> </rectify-search>
        </template>
        <!-- 展开内容 -->
        <template v-slot:expand="{ row }">
          <el-table :data="row.riskList" :show-header="true">
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="不符合项描述" show-overflow-tooltip>
              <template v-slot="{ row }">
                <span>
                  {{ row.problemDescription }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="整改截止日期" width="130">
              <template v-slot="{ row }">
                <div>{{ $util.toDateString(row.endDate, 'yyyy-MM-dd') }}</div>
              </template>
            </el-table-column>
            <el-table-column label="不符合项" show-overflow-tooltip>
              <template v-slot="{ row }">
                <span>
                  {{
                    '【' +
                    row.checkMasterName +
                    '】' +
                    row.checkItemCode +
                    ' ' +
                    row.checkItemName
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="整改状态" width="110" show-overflow-tooltip>
              <template v-slot="{ row }">
                <el-tag size="small" type="primary" :disable-transitions="true">
                  {{ getDictName('rectify_status', row.rectifyStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="回执内容" width="230">
              <template v-slot="{ row }">
                <span>
                  {{ row.receiptDescription }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
              <template v-slot="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-search"
                  @click="openEdit(row)"
                >
                  查看
                </el-link>
                <el-link
                  v-if="row.rectifyStatus < 1"
                  type="primary"
                  :underline="false"
                  icon="el-icon-_retrieve"
                  @click="toCorrect(row)"
                >
                  纠正回执
                </el-link>
                <!-- <el-link
                  v-if="row.rectifyStatus != 0"
                  type="primary"
                  :underline="false"
                  icon="el-icon-_retrieve"
                >
                  已回执
                </el-link> -->
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template v-slot:superviseType="{ row }">
          {{ getDictName('supervise_type', row.superviseType) }}
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-search"
            @click="openSheetAll(row)"
          >
            查看
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <rectify-edit :visible.sync="showEdit" :data="current"></rectify-edit>
    <rectify-correct-edit
      :visible.sync="showCorrectEdit"
      :data="currentCorrect"
      @done="reload"
    ></rectify-correct-edit>
  </div>
</template>

<script>
  import rectifyEdit from './components/rectify-edit.vue';
  import rectifyCorrectEdit from './components/rectify-correct-edit.vue';
  import rectifySearch from './components/rectify-search.vue';
  import { pageDisposalOrders } from '@/api/disposal/disposal-order';
  export default {
    name: 'rectify',
    components: {
      rectifySearch,
      rectifyCorrectEdit,
      rectifyEdit
    },
    data() {
      return {
        showEdit: false,
        showCorrectEdit: false,
        columns: [
          {
            width: 45,
            type: 'expand',
            columnKey: 'expand',
            align: 'center',
            slot: 'expand'
          },
          {
            prop: 'code',
            label: '处置单编号',
            sortable: 'custom',
            showOverflowTooltip: true,
            width: 220
          },
          {
            prop: 'orderType',
            label: '任务类型',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'orderType',
            formatter: (_row, _column, cellValue) => {
              return this.$globalDictName('order_type', cellValue);
            }
          },
          {
            prop: 'superviseType',
            label: '监督方式',
            sortable: 'custom',
            slot: 'superviseType',
            minWidth: 140
          },
          {
            prop: 'orgName',
            label: '监督站',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'unitCode',
            label: '生产单位',
            sortable: 'custom',
            showOverflowTooltip: true,
            width: 180,
            formatter: (_row, _column, cellValue) => {
              return this.$globalOrgName(cellValue);
            }
          },
          {
            prop: 'description',
            label: '任务描述',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'findDate',
            label: '监督日期',
            sortable: 'custom',
            showOverflowTooltip: true,
            width: 180,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue, 'yyyy-MM-dd');
            }
          }
        ],
        current: {},
        currentCorrect: {},
        expands: [],
        currentRow: null
      };
    },
    created() {},
    methods: {
      handleRowClick(row) {
        if (this.expands.includes(row.id)) {
          this.expands = this.expands.filter((val) => val !== row.id);
        } else {
          this.expands = [];
          this.expands.push(row.id);
        }
      },

      handleCurrentChange(val) {
        this.currentRow = val;
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        let statusList = null; //'(0,-1,-2)';
        return pageDisposalOrders({
          ...where,
          ...order,
          page,
          limit,
          auditStatus: 0,
          rectifyStatus: 0,
          statusIds: statusList
        });

        // return data;
      },
      getDictName(type, code) {
        return this.$globalDictName(type, code);
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where: where });
      },
      /* 打开所有记录 */
      openEdit(row) {
        this.current = row;
        this.showEdit = true;
      },
      toCorrect(row) {
        this.currentCorrect = row;
        this.showCorrectEdit = true;
      }
    }
  };
</script>