全网react+飞冰（ice）UI框架组件实例（4）-TreeSelect实例

TreeSelect组件在项目用到多次，也用到了几种不同类型的用法，觉得在项目中也是比较常用的，在这里记录一下，希望对大家有帮助！

使用dataSource 生成树结构

// 引用
import {
  TreeSelect,
  Tree
} from '@alifd/next';

// 初使化数据字段
const DEFAULT_DATA = {
  tableData: {
    data: {
      list: [],
      pageNum: 1,
      total: 0,
      size: 0
    },
  },
};

// 定义数据字段
const { dataSource = DEFAULT_DATA } = props;
const [tableDataunits, settableDataunits] = useState(dataSource.tableData)
  
// html
<Form labelAlign="top" className={styles.baseSetting} value={addList} responsive>
    <FormItem label="所属部门" required requiredMessage="所属部门必选" colSpan={6}>
        <TreeSelect 
            name="syoufk" 
            treeDefaultExpandAll 
            dataSource={tableDataunits.data.list} 
            style={{ width: '100%' }} 
            hasClear 
       />
  </FormItem>
</Form>

//  请求数据
const pageunits = () => {
    request.get(`接口`, {
    }).then(function (response) {
      children(response.data.list)
      settableDataunits(response)
    }).catch(function (error) {
      common.NoticeError('数据获取', '数据获取失败', error)
    });
}
// 封装方法
const children = (data) => {
    var IShave = false;
    data.forEach(item => {
      item.key = item.id
      item.label = item.name
      item.value = item.id
      if (item.syous.length != 0) {
        item.children = item.syous
        IShave = true;
      } else {
        item.children = []
      }
      if (IShave) {
        children(item.children)
      }
    });
  }