vue-tree-menu-manage
light-years-y
display
install
# install dependencies
npm install vue-tree-menu-manage --save
import menuManage from 'vue-tree-menu-manage'
Vue.use(menuManage)
Example Links
`main.js引入`
import menuManage from 'vue-tree-menu-manage'
Vue.use(menuManage)
`业务js`
<template>
<!-- 2021.9.8 lingt-years -->
<menu-manage
:parentId="parentId"
:currentId="currentId"
:formData="formData"
:treeProps="treeProps"
@addEditFormData="addEditFormData"
@deleteTreeData="deleteTreeData"
></menu-manage>
<script>
export default {
data(){
return {
currentId: "categoryId",
parentId:"parentId",
formShow: false,
treeProps: { children: "children", label: "categoryName", hideAddBtn: "isLeaf", treeData: []},
formData: [
{elItem: "cascader", label: "父级类目", prop: "parentId", defaultValue:"", cascaderLable: "categoryName", cascaderValue: "categoryId"},
{label: "类目名称", prop: "categoryName",placeholder: "请输入类目名称", rules: false},
{elItem: "switch"，label: "无子类目", prop: "isLeaf", defaultValue: false, editDisable: true}]
}
},
created(){
this.treeProps.treeData = [{"categoryId": 94,"parentId": 0,"categoryName": "管理","isLeaf":false,"children": [{"categoryId": 95,"parentId": 94,"categoryName": "列表","isLeaf": false},{"categoryId": 96,"parentId": 94,"categoryName": "详情","isLeaf": true}]}]
},
methods: {
`// 获取form表单数据，data:表单数据，type:当前模式，add-新增，edit:编辑`
addEditFormData(data, type) {},
`// 删除当前节点，id:获取的是传入的currentId,唯一id`
deleteTreeData(id) {}
},
}
</script>
Props
| Props | type | description |
|---|
| parentId | string | Parent node ID name |
| currentId | string | current node ID name |
| formData | Array | right form field, Currently, input textarea, cascade and switch are supported |
| treeProps | Object | left tree props |
| formShow | Object | right form show hide |
treeProps
| treeProps | Object | left tree props |
|---|
| label | String | left tree, elementUI Props, tree render label filed |
| children | String | left tree, elementUI Props, tree render filed |
| hideAddBtn | String | left tree, hide addBtn condition filed |
| treeData | Array | left tree render data |
formData
| formData | Array | right form field |
|---|
| elItem | String | default input, support input, textarea, cascader, switch |
| label | String | elementUI Props, form label |
| prop | String | elementUI Props, form prop |
| placeholder | String | |
| defaultValue | String or Number, if elItem is cascader,defaultValue is root value | |
| rules | Object | filed verification rules, defalut not empty verify, value:false,not verify |
| cascaderLable | String | elItem:'cascader', elementUI cascader prop |
| cascaderValue | String | elItem:'cascader', elementUI cascader prop |
| editDisable | Boolean | In editing status, it cannot be edited |
Methods
| method name | params | description |
|---|
| addEditFormData | data ,type | return form data ,type |
| deleteTreeData | id | return delete id |
Keywords
vue tree menuManagement categoryManagement menu-manage vue-tree-menu-manage elementui vue-components