The TreeSelect component has been used a number of times in this project and has been used in several different types of applications.

Use dataSource to generate a tree structure

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 department "Required requiredMessage=" Required department" colSpan={6}> <TreeSelect name="syoufk" treeDefaultExpandAll dataSource={tableDataunits.data.list} style={{ width: '100%' }} hasClear /> </FormItem> </Form>Copy the code
Const PageUnits = () => {request.get(' interface ', { }).then(function (response) { children(response.data.list) settableDataunits(response) }).catch(function (error) { NoticeError(' data fetch ', 'data fetch failed ', 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) } }); }Copy the code