花生棒做网站,品牌网站建设黑白I狼J,比较有名的公司网站,个人网站要求hyq-tree-vtw
无限级树形结构面包屑、单选-多选、搜索、移除功能
示例项目 单选-user 单选-任意一项 多选-关联下级 多选-任意一项 已选择数据弹框 说明
本插件需要使用uni-popup、uni-transition用于已选择数据弹框#xff0c;因此需要有这些依赖,请自行导入本插件基于【虚…hyq-tree-vtw
无限级树形结构面包屑、单选-多选、搜索、移除功能
示例项目 单选-user 单选-任意一项 多选-关联下级 多选-任意一项 已选择数据弹框 说明
本插件需要使用uni-popup、uni-transition用于已选择数据弹框因此需要有这些依赖,请自行导入本插件基于【虚拟列表】高性能渲染海量数据加入动态高度、缓冲区本人只在微信小程序端和H5 使用Chrome浏览器测试和微信开发者工具
安装方式
本组件符合easycom规范HBuilderX 3.1.0起只需将本组件导入项目在页面template中即可直接使用无需在页面中import和注册components
基本用法 hyq-tree-vtwlabellabelchildrenchildrenkey-codekeyCode:tree-nodetreeNode:feed-back-listfeedBackListis-checkshow-searchhandleConfirmhandleConfirm/hyq-tree-vtwscriptimport {treeNode} from ./data.jsexport default {data() {return {treeNode,feedBackList: []}},methods: {handleConfirm(val) {console.log(val, val)}}}
/scriptdat.js 数据生成
const treeNode [{name: 一级,id: 1,user: false,children: [{name: 二级-1,id: 2-1,user: false,children: [{name: 三级-1,id: 3-1,user: false,children: [{name: 四级-1,id: 4-1,user: false,children: [{name: 五级-1,id: 5-1,user: false,children: [{name: 六级-1,id: 6-1,user: true,children: []},...makeTreeNode(5)]},...makeTreeNode(4)]},...makeTreeNode(3)]},...makeTreeNode(2)],},...makeTreeNode(1)]},{name: 一级-2,id: 1-1-1,user: false,children: [{name: 1-二级-1,id: 1-6-1665,user: false,children: [{name: 1-三级-1,id: 1-5-1,user: false,children: [{name: 1-四级-1,id: 1-6-166,user: true,children: [...makeTreeNode(1-四级-1)]},...makeTreeNode(1-三级-1)]},...makeTreeNode(2-1)]},...makeTreeNode(1-1)]},
]function makeTreeNode(leval) {let treeNoneList []for (let k 0; k 100; k) {let name ${leval}级-${k}treeNoneList.push({name,id: guid(),user: true})}return treeNoneList
}function guid() {function S4() {return (((1 Math.random()) * 0x10000) | 0).toString(16).substring(1);}return (S4() S4() - S4() - S4() - S4() - S4() S4() S4());
}export {treeNode
};
传入的数据结构说明-treeNode
[{id: 664214366998,name: 校长443,children: [{id: 885655454545454545678,name: 小陆}]},
]选中返回的结果feedBackList返回一个二维数组
[{id: xxx,name: xxx,path:[],//该值的路径},
]功能说明
1、树形结构展示
2、包含搜索框、面包屑导航
3、单选模式只选user、单选模式选择任意一项、多选模式关联下级、多选模式选择任意一项
4、只需传checkList字段就可以回显默认选中
5、已选数据可以进行移除
属性
属性名类型默认值说明isCheckBooleanfalse是否选中showSearchBooleanfalse是否开启搜索keyCodeStringid数据唯一标识id列的属性名labelStringname指定选项标签为选项对象的某个属性值childrenStringchildren指定选项的子选项为选项对象的某个属性值treeNodeArray[]trees 传入的树形结构每个对象必须包含唯一的id值multipleBooleanfalse是否开启多选模式nodesBooleanfalse是否开启单选模式的只选择子项true 只选子项、false任意一项hasPathBooleanfalse是否开启选中的数据包含路径checkStrictlyBooleanfalse多选模式下是否要关联下级feedBackListArray[]选中的列表
事件
事件名说明返回值handleConfirm点击完成按钮时触发事件参数选中的项值confirmSearch搜索完成后触发事件参数搜索结果的项值
单选模式只选user
templateview classcontenthyq-tree-vtw :labeldprop.label :childrendprop.children :key-codedprop.keyCode:has-pathdprop.hasPath :nodesdprop.nodes :multipledprop.multiple:checkStrictlydprop.checkStrictly :tree-nodetreeNode :feed-back-listfeedBackList is-checkshow-search handleConfirmhandleConfirm/hyq-tree-vtw/view
/templatescriptimport {treeNode} from ./data.jsexport default {data() {return {treeNode,feedBackList: [],dprop: { //单选模式选userlabel: name,children: children,keyCode: id,multiple: false,nodes: true,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log(val, val);// 获取上一个页面var pages getCurrentPages(); //当前页面栈var beforePage pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
/scriptstyle
/style单选模式选择任意一项
templateview classcontenthyq-tree-vtw :labelcprop.label :childrencprop.children :key-codecprop.keyCode:has-pathcprop.hasPath :nodescprop.nodes :multiplecprop.multiple:checkStrictlycprop.checkStrictly :tree-nodetreeNode :feed-back-listfeedBackList is-checkshow-search handleConfirmhandleConfirm/hyq-tree-vtw/view
/templatescriptimport {treeNode} from ./data.jsexport default {data() {return {treeNode,feedBackList: [],cprop: { //单选模式(任意一项)label: name,children: children,keyCode: id,multiple: false,nodes: false,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log(val, val);// 获取上一个页面var pages getCurrentPages(); //当前页面栈var beforePage pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
/scriptstyle
/style多选模式关联下级
templateview classcontenthyq-tree-vtw :labelbprop.label :childrenbprop.children :key-codebprop.keyCode:has-pathbprop.hasPath :nodesbprop.nodes :multiplebprop.multiple:checkStrictlybprop.checkStrictly :tree-nodetreeNode :feed-back-listfeedBackList is-checkshow-search handleConfirmhandleConfirm/hyq-tree-vtw/view
/templatescriptimport {treeNode} from ./data.jsexport default {data() {return {treeNode,feedBackList: [],bprop: {label: name,children: children,keyCode: id,multiple: true,checkStrictly: true,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log(val, val);// 获取上一个页面var pages getCurrentPages(); //当前页面栈var beforePage pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
/scriptstyle
/style多选模式选择任意一项
templateview classcontenthyq-tree-vtw :labelaprop.label :childrenaprop.children :key-codeaprop.keyCode:has-pathaprop.hasPath :nodesaprop.nodes :multipleaprop.multiple:checkStrictlyaprop.checkStrictly :tree-nodetreeNode :feed-back-listfeedBackList is-checkshow-search handleConfirmhandleConfirm/hyq-tree-vtw/view
/templatescriptimport {treeNode} from ./data.jsexport default {data() {return {treeNode,feedBackList: [],aprop: {label: name,children: children,keyCode: id,multiple: true,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log(val, val);// 获取上一个页面var pages getCurrentPages(); //当前页面栈var beforePage pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
/scriptstyle
/stylegithub源码地址
github
vue2版本已发布到uniapp插件市场
vue2
vue3版本已发布到uniapp插件市场
vue3
掘金
掘金
