--- theme: cyanosis --- ### 介绍 - **多端支持**：可以运行在H5、APP、微信小程序还是支付宝小程序，都可以轻松使用改组件。 - **自定义配置**：您可以根据需要配置选择器的级数，使其适应不同的数据结构和用例。 - **无限级联**：此组件支持无限级联选择，使您能够创建具有复杂数据结构的选择器。 | 参数 | 类型 | 描述 | 默认值 | 必选 | | ----- | ------ | ------------------------------------------------------- | --- | -- | | title | string | 标题 | '' | 否 | | layer | number | 控制几级联动 | 1 | 否 | | data | array | 数据：[{name: '', id: '', children: [{name: '', id: ''}]}] | [] | 否 | ### 效果图 ![GIF 6-9-2023 上午 9-56-07](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/100f8437173447da86bffbd652c6e1e1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=782&h=839&s=80879&e=gif&f=21&b=fbfbfb) ### 数据结构接口返回数据结构： ```json [ {id: 47, name: "工厂1", parentId: 0, type: 0}, {id: 48, name: "区域1", parentId: 47, type: 0}, {id: 19, name: "设备1", parentId: 48, type: 1} ] ``` 处理后数据结构： ```json [{ id: 47, name: "工厂1", parentId: 0, type: 0, children: [{ id: 48, name: "区域1", parentId: 47, type: 0, children: [ { id: 19, name: "设备1", parentId: 48, type: 1 } ] }] }] ``` ### 引用示例 ```javascript ``` ### `@/utils/tree`文件中的`handleTree`方法 ```javascript /** * 构造树型结构数据 * @param {*} data 数据源 * @param {*} id id字段默认 'id' * @param {*} parentId 父节点字段默认 'parentId' * @param {*} children 孩子节点字段默认 'children' * @param {*} rootId 根Id 默认 0 */ export function handleTree(data, id = 'id', parentId = 'parentId', children = 'children', rootId = 0) { rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0 //对源数据深度克隆 const cloneData = JSON.parse(JSON.stringify(data)) //循环所有项 const treeData = cloneData.filter(father => { let branchArr = cloneData.filter(child => { //返回每一项的子级数组 return father[id] === child[parentId] }); branchArr.length > 0 ? father.children = branchArr : ''; //返回第一层 return father[parentId] === rootId; }); return treeData !== '' ? treeData : data; } ``` `cascade-picker`组件完整代码： > 在`components`文件夹下创建`cascade-picker`文件夹，然后在此文件夹下创建`cascade-picker.vue` - 多级联动组件 ```javascript ``` ### 总结自定义多级联动选择器组件将有助于您在`uni-app`中创建灵活的选择器，以满足各种不同平台和级数的需求。如果有任何问题、反馈或需要进一步的帮助，请不要犹豫，在下面的评论中提出。期待听到您的声音，以便改进和完善这个组件。