React TreeSelect设置默认展开项的方法

Love The Way You Lie 2024-02-21 07:20 37阅读 0赞

需要实现TreeSelect组件的**onTreeExpand、treeExpandedKeys**方法。

代码样例如下：

## 1.TreeSelect标签部分 ##

render() {
          const {
          codeselect
        } = this.props;
        const {treeExpandedKeys} = this.state
    ................
    
      <TreeSelect
      showSearch={false}
      dropdownStyle={
       { maxHeight: 400, overflow: 'auto' }}
      treeExpandedKeys={treeExpandedKeys}
      onTreeExpand={(data) => {
        this.setState({treeExpandedKeys:[...(data || [])]})
      }}
      treeData={codeselect.managecomTreeData}
      allowClear
      placeholder={
        formatMessage({ id: 'global.input.placeholder' }) +
        formatMessage({ id: 'TrainPlanManage.company' })
      }
      />

其中，实现了`treeExpandedKeys`与`onTreeExpand`方法。  
(1) `treeExpandedKeys`方法，是要展开的key数组；  
(2) `onTreeExpand`，是点击展开按钮时的操作，需要把点击元素的key放入数组中，就会展开了。

## 2.js代码部分 ##

class MyPage extends PureComponent {
    
      state = {
        treeExpandedKeys:[]
      }

componentDidMount(){
        const {codeselect} = this.props;
        // 只展开第一层
        this.setState({treeExpandedKeys:[codeselect.managecomTreeData[0].key]})
      }

(1) 先在state里声明了一个数组，就是用来保存要展开的元素的key的数组  
(2) 当页面初始化后，会选取数据中的第0个元素的key，放入要展开的数组中，这样页面就会默认展开数据中的第0个元素。

`(注意，后端返回的数据list中，需要有key字段，否则不好实现)`

`样例图如下，默认展开【1】：`  
![在这里插入图片描述][b842183e0b0043b3b23dc5762a7b01d8.png]

## 3.备注 ##

`Tree`标签设置默认展开数据，用的是`expandedKeys`和`onExpand`。

[b842183e0b0043b3b23dc5762a7b01d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/6ac6cdacd38e4cddbbc6ee037d7f5cbc.png