hot-table表格怎么取消父级连带子级，不让联动

Question

hot-table表格 vue2 在使用 treeView: true, 树形结构的时候 ，怎么取消父级选择 连带子级，不让联动

Answer 1

前端车字轲 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

对于HotTable表格在使用树形结构时，取消父级选择连带子级的联动，不让其联动，可以通过以下步骤实现：

1. 在hot-table标签中，加入tree-view属性，并设置为true，开启树形结构。

2. 在hot-settings属性中，加入afterOnCellMouseDown回调函数，用于处理单元格鼠标点击事件。

3. 在回调函数中，根据点击的单元格是否是父级节点来判断是否取消连带选中子级。

下面是示例代码：

<hot-table ref="hotTable"
           @afterOnCellMouseDown="handleCellMouseDown"
           data-source="tableData"
           selection-column-title="st('table.No')"
           empty-text="$t('budget.noData')"
           settings="hotSettings"
           selection-column-width="100">
  <hot-column data="language ==='zh' ? 'dirNameCn' : 'dirNameEn'"
              title="st('qualityFile.editCatalog.table.catalogNameCn')"
              width="200"
              align="left"
              has-tip />
  <hot-column data="lastModifyTime"
              title="st('otherControlledFile.qualityFile.dialog.lastModifyTime)"
              width="60"
              align="center"
              date-format="YYYY-MM-DD"
              has-tip />
  <hot-column :title="$t('btn.option')" width="60">
    <custom-renderer show-list="['addDialogEdit', 'delete']"
                     @handleEditQualityFile="editCatalog"
                     @handleDelQualityFile="delCatalog" />
  </hot-column>
</hot-table>

methods: {
  handleCellMouseDown(event, coords, TD) {
    if (coords.col === 0) { // 判断是否点击的是第一列，即父级节点列
      event.stopImmediatePropagation(); // 阻止事件传播
      const childrenLevel = this.$refs.hotTable.hotInstance.getDataAtRow(coords.row)[0].$_childrenLevel;
      if (childrenLevel) {
        TD.classList.remove('htCheckboxRenderer'); // 移除样式，取消勾选框渲染
      }
    }
  },
}

通过以上操作，当点击父级节点的单元格时，会取消勾选框的渲染，从而取消父级选择连带子级的联动。