vue elementui table表格展開行每次只展開一行

需求：表格展開行每次只展開一行

 

                <template>
                  <el-table
 :row-key="getRowKeys"
                    :expand-row-keys="expands"
                    @expand-change="expandSelect"
                    :data="neatingTableData"
                    style="width: 100%">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item v-for="item in props.row.childreds" :key="item.id">
                            <div>
                              <i style="color:#409EFF;margin-left: 30px;" class="el-icon-tickets"></i>
                              <el-button style="margin-left: 10px" @click="handleClick(scope.row)" type="text">{{ item.name +".pdf"}}</el-button>
                            </div>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="歸檔目錄"
                      width="250">
                      <template slot-scope="scope">
                        <i class="el-icon-folder-opened"></i>
                        <span style="margin-left: 10px">{{scope.row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="創建日期"
                      width="100" align='center'>
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="備注" align='center'>
                    </el-table-column>
                  </el-table>
                  <div class="fileNameStyle">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item v-for="item in wenjianming" :key="item.id">
                        <div>
                          <i style="color:#409EFF;" class="el-icon-tickets"></i>
                          <el-button style="margin-left: 10px" @click="handleClick()" type="text">{{ item.name +".pdf"}}</el-button>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>
                </template>
  export default {
    data() {
      return {

            expands: [],

            getRowKeys(row) {

              return row.id

             },

        neatingTableData:[{
            id:'12',
            name: '行政許可決定書',
            date: '2020-7-9',
            address: '無',
            childreds:[
              {
                id:'1',
                name: '行政許可決定書',
              },
              {
                id:'2',
                name: '行政許可書',
              }
            ]
          }, {
            id:'13',
            name: '行政許可申請書',
            date: '2020-7-9',
            address: '無',
            childreds:[
              {
                id:'3',
                name: '行政許可決定書',
              }
            ]
          }, {
            id:'14',
            name: '行政許可申請材料收件憑證',
            date: '2020-7-9',
            address: '無',
            childreds:[
              {
                id:'4',
                name: '行政許可決定書',
              },
              {
                id:'5',
                name: '行政許可書',
              }
            ]
          }
        ],
      }
    },
    methods:{
      // 折疊面板每次只能展開一行
      expandSelect(row, expandedRows) {
        // console.log('expandedRows', expandedRows)
        // console.log('row', row)
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            that.expands.push(row.id)// 每次push進去的是每行的ID
          }
        } else {
          that.expands = []// 默認不展開
        }
        // console.log('that.expands', that.expands)
 },
    }
}

row-key：【function】行數據的 Key，用來優化 Table 的渲染；在使用 reserve-selection 功能與顯示樹形數據時，該屬性是必填的。類型為 String 時，支持多層訪問： user.info.id，但不支持  user.info[0].id，此種情況請使用  Function。

expand-row-keys:【Array 】 可以通過該屬性設置 Table 目前的展開行，需要設置 row-key 屬性才能使用，該屬性為展開行的 keys 數組。

expand-change:【事件Table Events】 當用戶對某一行展開或者關閉的時候會觸發該事件（展開行時，回調的第二個參數為 expandedRows；樹形表格時第二參數為 expanded）

 https://www.cnblogs.com/wangliko/p/11046090.html