Vue中Syncfusion ejs-grid子网格展开箭头触发页面跳转，如何阻止？

下面是几个能解决这个问题的实用方案：

方案1：利用queryCellInfo事件阻止默认跳转 #

给Grid绑定queryCellInfo事件，在单元格渲染时给展开箭头添加阻止默认行为的监听：

<ejs-grid
  :dataSource="yourDataSource"
  :childGrid="yourChildGrid"
  @queryCellInfo="onQueryCellInfo"
>
  <!-- 你的列配置 -->
</ejs-grid>

对应的方法实现：

methods: {
  onQueryCellInfo(args) {
    const expandArrow = args.cell.querySelector('.e-expandcollapse');
    if (expandArrow) {
      expandArrow.addEventListener('click', e => e.preventDefault());
    }
  }
}

这个方法会在每个单元格渲染时检查，精准定位到展开箭头，阻止它的默认跳转动作，不影响子网格的展开逻辑。

方案2：自定义展开按钮模板 #

直接替换默认的a标签箭头，用自定义元素实现展开功能，彻底避免跳转问题：

首先给Grid加个ref方便获取实例：

<ejs-grid
  ref="gridRef"
  :dataSource="yourDataSource"
  :childGrid="yourChildGrid"
>
  <!-- 自定义展开按钮模板 -->
  <template #expand="{ data }">
    <span
      class="e-icons e-expandcollapse"
      :class="data.hasChildRecords ? 'e-icon-collapse' : 'e-icon-expand'"
      @click="toggleSubGrid(data)"
    ></span>
  </template>
  <!-- 你的列配置 -->
</ejs-grid>

然后实现切换方法：

methods: {
  toggleSubGrid(data) {
    const gridInstance = this.$refs.gridRef.ej2Instances;
    gridInstance.toggleExpandCollapse(data);
  }
}

这种方式完全自定义了展开按钮的结构，从根源上消除了a标签跳转的问题，还能自己调整样式。

方案3：批量修改href属性（简单直接） #

在Grid创建完成后，把所有展开箭头的href改成javascript:void(0)，避免触发路由跳转：

<ejs-grid
  ref="gridRef"
  :dataSource="yourDataSource"
  :childGrid="yourChildGrid"
  @created="fixExpandArrowHref"
  @dataBound="fixExpandArrowHref"
>
  <!-- 你的列配置 -->
</ejs-grid>

对应的方法：

methods: {
  fixExpandArrowHref() {
    this.$nextTick(() => {
      const arrows = this.$refs.gridRef.$el.querySelectorAll('.e-expandcollapse');
      arrows.forEach(arrow => {
        arrow.href = 'javascript:void(0)';
      });
    });
  }
}

注意绑定dataBound事件，因为Grid数据更新后会重新渲染箭头，需要再次修改href。

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