[Table] 树表格半选交互问题

[richerfu]

tdesign-react 版本

0.36.1

重现链接

No response

重现步骤

import React, { useState } from 'react';
import { EnhancedTable } from 'tdesign-react';

export default function TableSingleSort() {
  const itemsByProduct = [
    {
      id: 'k24h0',
      name: 'hyu-apigw',
      product: 'tce360/apigw',
      btreePath: '/tce360/apigw/product-apigw-agent/apigw_node/',
      hostType: '',
      version: 1,
      deleted: false,
      enabled: false,
      source: 'custom',
      roles: [
        {
          role: 'system',
          enabled: false,
          funcs: [
            {
              func: 'sync_date',
              desc: '时间同步检查巡检单元',
              uuid: 'apigw_system',
              type: 'availability',
              enabled: false,
            },
          ],
        },
      ],
      judianNames: '一区',
      funcsArr: [
        {
          id: 'apigw_system',
          judianNames: '时间同步检查巡检单元',
          btreePath: 'system',
          type: 'availability',
        },
      ],
    },
    {
      id: '53c8fulk24lg',
      name: 'hyu-apigw-2',
      product: 'tce360/apigw',
      btreePath: '/tce360/apigw/dbsql-apigw-apigateway/',
      hostType: '',
      version: 1,
      deleted: false,
      enabled: false,
      source: 'custom',
      roles: [
        {
          role: 'system',
          enabled: false,
          funcs: [
            {
              func: 'sync_date',
              desc: '时间同步检查巡检单元',
              uuid: 'apigw_system_2',
              type: 'availability',
              enabled: false,
            },
          ],
        },
      ],
      judianNames: '一区',
      funcsArr: [
        {
          id: 'apigw_system_2',
          judianNames: '时间同步检查巡检单元',
          btreePath: 'system',
          type: 'availability',
        },
      ],
    },
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  function onSelectChange(value, selectOptions) {
    console.log('onSelectChange', value, selectOptions);
    setSelectedRowKeys(value);
  }

  return (
    <EnhancedTable
      tree={{
        checkStrictly: false,
        childrenKey: 'funcsArr',
        indent: 50,
      }}
      rowKey="id"
      data={itemsByProduct}
      selectedRowKeys={selectedRowKeys}
      onSelectChange={onSelectChange}
      columns={[
        {
          colKey: 'row-select',
          type: 'multiple',
          // 禁用行选中方式一：使用 disabled 禁用行（示例代码有效，勿删）。disabled 参数：{row: RowData; rowIndex: number })
          // 这种方式禁用行选中，当前行会添加行类名 t-table__row--disabled，禁用行文字变灰
          // disabled: ({ rowIndex }) => rowIndex === 1 || rowIndex === 3,

          // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
          // 这种方式禁用行选中，行文本不会变灰
          // checkProps: ({ row }) => ({ disabled: row.status !== 0 }),
          // 自由调整宽度，如果发现元素看不见，请加大宽度
          width: 40,
        },
        {
          title: '巡检项名称',
          colKey: 'id',
        },
        {
          title: '局点名称',
          colKey: 'judianNames',
        },
        {
          title: '产品/组件/模块',
          colKey: 'btreePath',
        },
        {
          title: '巡检单元',
          colKey: 'type',
          cell: ({ row }) => (row.funcsArr ? `共${row.funcsArr?.length || 0}个巡检单元` : row.type),
        },
      ]}
    />
  );
}

c7a7904d46b0bfebda4c352307fd459a.mov

期望结果

半选状态不变

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @southorange1228，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @yunfeic @tengcaifeng @Yacent @basecss 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @southorange1228 。

[richerfu]

#996

看起来是相同问题，因为树表格是多层，useSelect中只处理了一层数据

[chaishi]

当前 issue 标题，只提到了问题，但未说明具体什么问题。

初步猜测是：父组件半选的问题。（这个特性属于还没开发，在规划中）

[chaishi]

辛苦关注 issue #996

后续回复和处理，都会在这个 issue 当中

[chaishi]

resolved in https://github.com/Tencent/tdesign-vue/pull/1115

半选状态已支持，待发布

2022-07-03.12.32.33.mov

[chaishi]

Vue3 resolved in Tencent/tdesign-vue#1115

[chaishi]

Vue2 resolved in Tencent/tdesign-vue-next#1142

[honkinglin]

0.36.2 fixed