uni-app插件--树形层级、树形选择、多级选择器

350 阅读1分钟

插件地址: ext.dcloud.net.cn/plugin?id=2…

一、前言

在工作中,会使用uni-app来完成开发任务,有些项目在不同页面需要的树形样式不一样,总结开发中的需求,完成一个支持三种数据源、支持单选、支持多选、支持自定义树形样式、支持搜索的插件。

二、效果预览

1753327976904.jpg 1752135649512(1).jpg 1752135661754(1).jpg 1753328049027.jpg

三、插件使用

第一步、在插件市场下载并导入该插件到您的项目中

1752134022256.jpg

第二步、在项目中使用

<sjx-tree-perfect :treeData="treeData" name="title" 
        childsField="children" @nodeClick='nodeClick'>
</sjx-tree-perfect>

四、使用注意

  • 三种数据结构,默认是树形结构,其他两种数据结构需要设置dataType
  • 三种数据结构都需要注意字段id、pid、name是否和默认值一致,树形结构还需要注意子项字段是否和默认值一致
  • 插件示例项目中有完整使用示例,请参考