【菜单管理】【类目管理】都可拿来用的npm包

551 阅读1分钟

大家好,我是光年

因多个管理后台项目都用到菜单管理,类目管理类似功能,所以提取了公共组件,记录一下

一. 组件介绍

组件基于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

Propstypedescription
parentIdstring父节点id
currentIdstring当前节点唯一id
treePropsObject左侧树属性,详细见下
formDataArray右侧表单内容,详见下方
treePropsObject左侧树属性,详细见下
formShowObject右侧表单默认显示隐藏

treeProps

treePropsObject左侧树属性
labelStringelementUI tree Props
childrenStringelementUI tree Props
hideAddBtnString左侧新增按钮隐藏条件字段,例如是叶子节点无新增按钮
treeDataArray左侧树渲染数据

formData

formDataArray右侧表单属性
elItemString默认值,input,目前支持input, textarea, cascade, switch
labelStringelementUI Props, 字段不传,当前控件不选染,可做数据提交使用
propStringelementUI Props, form prop
placeholderStringelementUI Props, 默认值为请输入
defaultValueString默认值为''
rulesObject表单校验规则,默认为非空检验,值为false,不校验,支持传对象校验规则
cascaderLableString当元素为级联时,elementUI cascader label
cascaderValueString当元素为级联时,elementUI cascader prop
editDisableBoolean配置此字段,编辑状态元素不可更改

Methods

method nameparamsdescription
addEditFormDatadata ,typereturn form data ,type
deleteTreeDataidreturn delete id