大家好,我是光年
因多个管理后台项目都用到菜单管理,类目管理类似功能,所以提取了公共组件,记录一下
一. 组件介绍
组件基于elementUI, 左侧为树形菜单,右侧为表单
可用于菜单管理,类目管理等树形结构数据
支持新增,编辑,删除,表单校验,父级菜单定位等功能
二. npm包相关信息
名称:vue-tree-menu-manage
npm包地址: https://www.npmjs.com/package/vue-tree-menu-manage
git地址:http://github.com/light-years-y/vue-tree-menu-manage
三. 使用示例
`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 | 父节点id |
currentId | string | 当前节点唯一id |
treeProps | Object | 左侧树属性,详细见下 |
formData | Array | 右侧表单内容,详见下方 |
treeProps | Object | 左侧树属性,详细见下 |
formShow | Object | 右侧表单默认显示隐藏 |
treeProps
treeProps | Object | 左侧树属性 |
---|---|---|
label | String | elementUI tree Props |
children | String | elementUI tree Props |
hideAddBtn | String | 左侧新增按钮隐藏条件字段,例如是叶子节点无新增按钮 |
treeData | Array | 左侧树渲染数据 |
formData
formData | Array | 右侧表单属性 |
---|---|---|
elItem | String | 默认值,input,目前支持input, textarea, cascade, switch |
label | String | elementUI Props, 字段不传,当前控件不选染,可做数据提交使用 |
prop | String | elementUI Props, form prop |
placeholder | String | elementUI Props, 默认值为请输入 |
defaultValue | String | 默认值为'' |
rules | Object | 表单校验规则,默认为非空检验,值为false,不校验,支持传对象校验规则 |
cascaderLable | String | 当元素为级联时,elementUI cascader label |
cascaderValue | String | 当元素为级联时,elementUI cascader prop |
editDisable | Boolean | 配置此字段,编辑状态元素不可更改 |
Methods
method name | params | description |
---|---|---|
addEditFormData | data ,type | return form data ,type |
deleteTreeData | id | return delete id |