vue-good-table如何实现分组行首次展开后重复点击不折叠

你不需要修改原有group-options配置，初始默认折叠的效果会被保留，只需要补全状态存储和点击拦截逻辑即可：

• 首先在组件data中新增集合存储已展开的分组标识，利用Set值唯一的特性快速判断分组是否已经被点击展开过
• 行点击事件触发时先过滤普通数据行，只对分组父行做处理
• 首次点击分组父行时，记录分组标识，放行默认展开逻辑
• 后续再次点击已记录的分组父行时，等组件默认折叠逻辑执行完成后，强制重新展开该分组，实现无法折叠的效果

完整代码如下：

<template>
  <vue-good-table
    ref="MyCoolTable"
    :columns="columns"
    :rows="rows"
    @on-row-click="toggleExpansion"
    :group-options="{
      enabled: true,
      collapsable:true
    }"
  /> 
</template>

<script>
export default {
  data() {
    return {
      columns: [], // 原有列配置保持不变
      rows: [], // 原有行数据保持不变
      expandedGroupKeys: new Set() // 存储已经展开过的分组唯一标识
    }
  },
  methods: {
    toggleExpansion(row) {
      // 点击的是普通数据行时直接跳过，不处理分组逻辑
      if (!row.isGroupRow) return

      const currentGroupKey = row.groupKey
      // 首次点击该分组，记录标识后走默认展开逻辑
      if (!this.expandedGroupKeys.has(currentGroupKey)) {
        this.expandedGroupKeys.add(currentGroupKey)
        return
      }

      // 非首次点击，等组件默认折叠动作执行完成后强制重新展开，抵消折叠效果
      this.$nextTick(() => {
        this.$refs.MyCoolTable.expandGroup(currentGroupKey)
      })
    }
  }
}
</script>

注意：如果你的分组是基于多字段组合生成的，groupKey会自动生成对应的组合唯一值，不需要额外修改判断逻辑，可以直接复用上述代码。

内容的提问来源于stack exchange，提问作者Sachi