element-ui的table展开功能实现手风琴效果

项目中table展开树实现手风琴效果

<el-table
          ref="table"
          :data="tableData"
          style="width: 100%"
          border
          @expand-change="expandChange"
          :header-cell-style="{ background: '#dfefff', color: '#54a5f7' }"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column type="expand" align="center">
            <template slot-scope="scope">
              <el-form
                label-position="left"
                inline
                class="demo-table-expand"
                label-width="180px"
              >
                <el-form-item label="时间">
                  <span>{{ scope.row.id }}</span>
                </el-form-item>
                <el-form-item label="预算数(万元)">
                  <span>{{ scope.row.name }}</span>
                </el-form-item>
                <el-form-item label="支出数(万元)">
                  <span>{{ scope.row.desc }}</span>
                </el-form-item>
                <el-form-item label="预算执行率(%)">
                  <span>{{ scope.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="绩效评价指标完成情况" class="label-long">
                  <span>{{ scope.row.category }}</span>
                </el-form-item>
                <el-form-item label="是否达到预期绩效目标">
                  <span>{{ scope.row.address }}</span>
                </el-form-item>
                <el-form-item label="是否达到预计支出进度">
                  <span>{{ scope.row.desc }}</span>
                </el-form-item>
                <el-form-item
                  label="未达支出进度和绩效目标原因分析"
                  class="label-long"
                >
                  <span>无</span>
                </el-form-item>
                <el-form-item label="年度后续需支出资金">
                  <span>1005</span>
                </el-form-item>
                <el-form-item label="拟收回资金">
                  <span>无</span>
                </el-form-item>
                <el-form-item label="需要调整的绩效目标" class="label-long">
                  <span>无</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>          
        </el-table>



<script>
    methods: {
    expandChange(row, expandRows) {
      if (expandRows.length > 1) {
        expandRows.forEach((expandrow) => {
          if (row.id !== expandrow.id) { //这里需要判断一下展开行的length>1
            // toggleRowExpansion 设置是否展开，true则展开
            this.$refs.table.toggleRowExpansion(expandrow, false);
          }
        });
      }
    },
  },
</script>