collapse-menus-tree-unlimited
v1.29.0
Published
<!-- * @Descripttion: * @version: * @Author: yql * @Date: 2020-12-02 13:48:05 * @LastEditors: yql * @LastEditTime: 2020-12-02 17:32:55 -->
Downloads
31
Readme
无限级下拉带树的组件 下拉树状菜单
Build Setup
API：
安装依赖
npm install collapse-menus-tree-unlimited引入项目：
import treeMenus from 'collapse-menus-tree-unlimited' 项目入口文件引入
Vue.use(treeMenus) 挂载在vue中
项目中引用：
<treeMenus
@selectNodes="selectNodes"
:datas="treeMode"
defaultSelect="A0111"
:proper="{label:'name',labelExtra:'code',extraMark:'(共extraMark家)',children:'nodes',value:'code'}"
v-if="treeMode.length>0">
</treeMenus>
参数说明：
调用参数说明：
datas：菜单树的数据 Array
defaultSelect：默认选中项 String
proper：{ 树节点自定义
label：树节点显示名称的字段名 String
labelExtra:显示名称字段多字段拼接 String
extraMark:多字段拼接连接符 可选值4个: brackets表示括号() line表示短线- none表示短线没有拼接符号 space表示空格拼接
如果设置值不为brackets line none space，
则原样拼接如设置为'(共extraMark家)'则显示为 (共extraMark家) extraMark会替换成labelExtra对应的值
此值仅在labelExtra存在时生效
children：子节点字段名 String
value：唯一标识 String
}
调用方法说明：
selectNodes：选中后的回调 含两个形参 第一个是当前选中节点的及所有父标签节点，类型为Array 第二个参数当前选中节点，类型为Object
demo
<template>
<div class="testBox">
<treeMenus
@selectNodes="selectNodes"
:datas="treeMode"
defaultSelect="A0111"
:proper="{label:'name',labelExtra:'code',extraMark:'(共extraMark家)',children:'nodes',value:'code'}"
v-if="treeMode.length>0">
</treeMenus>
</div>
</template>
export default {
name: 'demo',
data() {
return {
treeMode: [{
"code": "A",
"id": 9,
"name": "农、林、牧、渔业",
"type": "trade",
"nodes": [{
"code": "A01",
"id": 10,
"name": "农业",
"type": "trade",
"nodes": [{
"code": "A011",
"id": 11,
"name": "谷物种植",
"type": "trade",
"nodes": [{
"code": "A0111",
"id": 12,
"name": "稻谷种植",
"type": "trade",
"nodes": null
}, {
"code": "A0112",
"id": 13,
"name": "小麦种植",
"type": "trade",
"nodes": null
}, {
"code": "A0113",
"id": 14,
"name": "玉米种植",
"type": "trade",
"nodes": null
}, {
"code": "A0119",
"id": 15,
"name": "其他谷物种植",
"type": "trade",
"nodes": null
}]
}]
}, {
"code": "A02",
"id": 27,
"name": "测试行业",
"type": "trade",
"nodes": [{
"code": "A021",
"id": 11,
"name": "谷物种植",
"type": "trade",
"nodes": [{
"code": "A0211",
"id": 12,
"name": "稻谷种植",
"type": "trade",
"nodes": null
}, {
"code": "A0212",
"id": 13,
"name": "小麦种植",
"type": "trade",
"nodes": null
}, {
"code": "A0213",
"id": 14,
"name": "玉米种植",
"type": "trade",
"nodes": null
}, {
"code": "A0219",
"id": 15,
"name": "其他谷物种植",
"type": "trade",
"nodes": null
}]
}]
}]
}, {
"code": "M",
"id": 16,
"name": "科学研究和技术服务业",
"type": "trade",
"nodes": [{
"code": "M73",
"id": 17,
"name": "研究和试验发展",
"type": "trade",
"nodes": null
}, {
"code": "M74",
"id": 23,
"name": "专业技术服务业",
"type": "trade",
"nodes": null
}]
}, {
"code": "P",
"id": 18,
"name": "批发和零售业",
"type": "trade",
"nodes": [{
"code": "P51",
"id": 19,
"name": "批发业",
"type": "trade",
"nodes": null
}]
}, {
"code": "C",
"id": 20,
"name": "制造业",
"type": "trade",
"nodes": [{
"code": "C34",
"id": 21,
"name": "通用设备制造业",
"type": "trade",
"nodes": null
}, {
"code": "C38",
"id": 22,
"name": "电气机械和器材制造业",
"type": "trade",
"nodes": null
}]
}]
}
},
methods: {
selectNodes(nodes, item) {
console.log(nodes)
console.log(item)
}
}
}
</script>建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org