Choerodon UI pro tree组件 选中 无法触发事件

C7N-UI
#1

  • UI 组件版本：0.3.4

  • 运行环境：自主搭建

  • 问题描述：

    ①使用官网的基础表格
    如图一，如果是多选框，选中后 输出的结果应该有N个，现在只输出了一个；
    如果是单选，点击下一个的时候 前一个的高亮应该去掉

②使用官网例子—— 只使用check功能
dataSet selection 为 false ， Tree checkable 为 true 可以实现整个treenode点击触发check 。注意：优先级高于record 里面的selectable

图二 使用官网的这个例子
无论点击文字还是 选择框都不会触发选择的事件 不会打印出任何东西
那么怎么获取到选中的数据
（使用selection: false,就无法触发事件；不使用checkbox就无法实现联动）

还是这个例子 如图三 去掉了checkbox 点击文字无法实现高亮——这样用户就不知道自己是否选中了？？

image
image1514×1015 52.1 KB

image
image1665×967 32.6 KB

image
image1474×850 27.4 KB

#2

你好，勾选 和 点击文字是两个事件。

具体可以在官网输入以下demo：

import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Tree } from 'choerodon-ui/pro';

function nodeRenderer({ record }) {
  return record.get('text');
}

class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree.mock',
    autoQuery: true,
    parentField: 'parentId',
    expandField: 'expand',
    idField: 'id',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'expand', type: 'boolean' },
      { name: 'parentId', type: 'number' },
    ],
    events: {
      select: ({ record, dataSet }) => console.log('select', record, dataSet),
      unSelect: ({ record, dataSet }) => console.log('unSelect', record, dataSet),
    },
  });

   	onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };
  render() {
    return (
      <Tree
        dataSet={this.ds}
        checkable
        onSelect={this.onSelect}
				      onCheck={this.onCheck}
        renderer={nodeRenderer}
      />
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
#3

好的~
还有一个问题 就是如上面图一所示
不要checkbox 实现单选高亮，或者多选的效果
（已经看过官网的例子 暂时没有发现这功能）

#4

只是不要样式的话 可以样式覆盖 c7n-tree-node-selected

#5

还有 HZERO-CLI 主题的问题能不能回答一下 :joy:

#6

那要实现多选呢？