elmentui中每次只展开一行

elmentui中每次只展开一行

<el-table
      ref="table"
      :data="tableData"
      @expand-change="handleChange"
      @current-change="handle"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form v-loading="loading" label-position="left" label-width="120px" inline 				class="table-expand">
            <el-form-item label="科目">
              <span>{{ props.row.subject }}</span>
            </el-form-item>
            <el-form-item label="添加组员">
              <span>{{ expandList.length }}</span>
            </el-form-item>
            <el-form-item v-for="item in expandList" :key="item.objectId" label="组员">
              <div class="table-expand-item">
                <img :src="imgSrc" style="width:30px;height:30px;border-radius:30px;">
                <p>{{item.name}}</p>
                <p>{{item.grade}}</p>
                <p>已消耗课时(k)/总课时(k)：{{item.consumePeriod+'/'+item.totalPeriod}}</p>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="分组类型"
        prop="coachType.name"
        align="center">
      </el-table-column>
      <el-table-column
        label="组员姓名"
        prop="stuNames"
        align="center">
      </el-table-column>
      <el-table-column
        label="修改日期"
        prop="groupDate"
        align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  
export default {
  data() {
    return {
      tableData: [],
      expandList: [],
      imgSrc: require('../../assets/sishu_logo.jpg'),
      expands: [],
      getRowKeys (row) {
        return row.groupId
      },
      loading: false
    }
  },
  async created() {
    try {
      this.tableData = await this.getStuGroupList()
    }catch(err) {
      console.error(err)
    }
  },
  methods: {
    // 获得学生分组列表
    async getStuGroupList() {
      const result = await ClsTeach.SIGSTU_ALLOC_GROUP_LIST()
      return result
    },
    // 获取展开行的数据
    handleChange(row, expandedRows) {
      console.log('展开行：', row, expandedRows)
      this.loading = true
      var that = this
      // 判断展开行是否有数据
      if(expandedRows.length) {
        that.expands = []
        this.expandList = []
        if(row) {
          that.expands.push(row.groupId)
          ClsTeach.SIGSTU_ALLOC_GROUP({groupId: row.groupId}).then(res => {
            this.expandList = res
            this.loading = false
          })
        }
      } else {
        that.expands = []
        this.loading = false
      }
    },
    // 删除
    onDelete() {

    },
    handle(currentRow, oldCurrentRow) {
      console.log('change:', currentRow, oldCurrentRow)
    }
  },
  components: {

  },
}
</script>

为表格设置row-key字段，可以传入string或是function，将其设置为一个特定的值，再设置expand-row-keys字段，设置当前的展开行，利用expand-change方法来改变某一行的展开和折叠