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