vue+element UI 实现无限极分类（二）

傷城~ 2022-05-21 02:43 637阅读 0赞

这是自己项目的经历，真是很复杂！！！大概记录一下代码的逻辑

可以无限添加el-submenu 和el-menu-item

< template >

< div class= 'leftList' style= ' overflow:auto' >

< el-aside width= "99%" style= "background-color:\#2c3e50;" >

< div id= 'leftAside' >

< el-menu

:default-active=" menuActive"

class= "el-menu-vertical-demo"

@open=" handleOpen"

@close=" handleClose"

:default-openeds=" cacheMenu"

background-color= "\#2C3E50"

text-color= "\#fff"

active-text-color= "\#ffd04b" >

< el-submenu index= "1" >

< template slot= "title" >

< i class= "el-icon-location" ></ i >

< span >Account </ span >

</ template >

< el-menu-item index= "1-1" >

< i class= "el-icon-tickets" ></ i >

< span v-on:click=" getuserinfo" >User Profiles </ span >

</ el-menu-item >

</ el-submenu >

< el-submenu index= "2"

@click.stop.native=" selectmanage( '2', 'Device Management', '2')" >

< template slot= "title" >

< i class= "el-icon-setting" ></ i >

< span slot= "title" :style="\{ color: 'a' === templateActive? '\#ffd04b': '\#fff'\}" >Device Management </ span >

</ template >

< Menus :listData=" list" :indexM=" '2'" />

</ el-submenu >

< el-submenu index= "3" >

< template slot= "title" >

< i class= "el-icon-setting" ></ i >

< span slot= "title" >Device Monitor </ span >

</ template >

< el-menu-item index= "3-1" >

< i class= "el-icon-tickets" ></ i >

< span >Online Library </ span >

</ el-menu-item >

</ el-submenu >

< el-submenu index= "4" >

< template slot= "title" >

< i class= "el-icon-setting" ></ i >

< span slot= "title" >System Setting </ span >

</ template >

< el-menu-item index= "4-1" >

< i class= "el-icon-tickets" ></ i >

< span >Template Library </ span >

</ el-menu-item >

< el-menu-item index= "4-2" >

< i class= "el-icon-tickets" ></ i >

< span >Customize </ span >

</ el-menu-item >

< el-menu-item index= "4-3" >

< i class= "el-icon-question" ></ i >

< span >Help </ span >

</ el-menu-item >

< el-menu-item index= "4-4" >

< i class= "el-icon-info" ></ i >

< span >Version </ span >

</ el-menu-item >

</ el-submenu >

</ el-menu >

</ div >

</ el-aside >

</ div >

</ template >

< script >

import bus from '@/assets/js/bus.js'

import Menus from '@/components/component/menus.vue'

import axios from 'axios'

export default \{

props:\[ 'dataname', 'data'\],

components:\{

Menus

\},

data () \{

return \{

a: true,

defaultProps: \{

children: 'Children',

label: 'Name',

logo: 'Logo'

\},

computed:\{

menuActive()\{

return this. $store. state. menuActive

\},

cacheMenu()\{

return this. $store. state. cacheMenu

\},

list () \{

return this. $store. state. leftdata

\},

templateActive()\{

return this. $store. state. templateActive

\},

beforeMount : function()\{

axios. get( 'orgnodes/0/en')

. then( response => \{

this. $store. commit( 'leftData', response. data)

\})

. catch( error => \{

if ( typeof error. response === 'undefined') \{

\})

\},

methods:\{

selectmanage( index, name, id)\{

this. $store. state. historys = \{ index: ''\}

this. $store. commit( 'onTemplateActive', 'a')

this. $store. commit( 'topbardata', index)

this. $store. commit( 'onNodeType', 'Org')

this. $store. state. targetnodeMsg = \{

Lev: 1,

TmplTypeId: 1,

ParentOrgId: 0,

PreSiblingOrgId: 0,

Owner: 1

\},

handleOpen( index, indexPath)\{

// console.log("触发open"+index+"路径:"+indexPath)

\},

handleClose()\{

// console.log("触发close")

\},

boxheight()\{

let winHeight = document. documentElement. offsetHeight || document. body. offsetHeight ;

document. querySelector( '\#leftAside>ul'). style. height= winHeight\- 68 \+ "px";

\},

getuserinfo : function () \{

this. $router. push(\{

path: '/UserInfo'

\})

\},

mounted()\{

window. onload= this. boxheight

</ script >

< style scoped >

\#leftAside> ul\{

overflow-y: auto;

html,body\{

height: 100%;

.active\{

color: \#ffd04b;

font-weight: bold;

</ style >

< template >

< div >

< template v-for="( item, index) in listData" >

< el-submenu v-if=" item. nodetype== 'Org'" :data=" active( indexM\+ 'e'\+ index, item. Id, item. Name)" :index=" indexM\+ 'e'\+ index" :key=" index" @click.stop.native=" selectinside( indexM\+ 'e'\+ index, item. Id, item. Name, item. Lev, item. TmplTypeId, item. Children, item. nodetype, item. ParentId)" >

< template slot= "title" >

< span :style="\{ color: item. Id === templateActive? '\#ffd04b': '\#fff'\}" >\{ \{ item. Name\}\} </ span >

</ template >

< menus :listData=" item. Children" :indexM=" indexM=== ''?( 'e'\+ index): indexM\+ 'e'\+ index" ></ menus >

< el-menu-item v-if=" $store. state. addMenus\[ 'i'\+ item. Id\]" v-for="( aitem, aindex) in $store. state. addMenus\[ 'i'\+ item. Id\]"

:style="\{ color: aitem. equipid === templateActive? '\#ffd04b': '\#fff'\}"

:index=" indexM=== ''?( 'e'\+ aindex): indexM\+ 'e'\+( aindex\+ item. Children. length)"

:key=" aindex" :data=" active( indexM\+ 'e'\+ index, aitem. equipid, aitem. equipname)"

@click.stop.native=" addMenus( indexM=== ''?( 'e'\+ aindex): indexM\+ 'e'\+( aindex\+ item. Children. length), aitem. equipname, aitem. equipid)" >\{ \{ aitem. equipname\}\} </ el-menu-item >

< el-submenu v-if=" $store. state. addMenus\[ 'n'\+ item. Id\]" v-for="( aitem, aindex) in $store. state. addMenus\[ 'n'\+ item. Id\]"

:index=" indexM=== ''?( 'e'\+ aindex):( $store. state. addMenus\[ 'i'\+ item. Id\] && $store. state. addMenus\[ 'i'\+ item. Id\]. length> 0? indexM\+ 'e'\+( aindex\+ item. Children. length\+ addmenus\[ 'i'\+ item. Id\]. length): indexM\+ 'e'\+( aindex\+ item. Children. length))"

:key=" aindex" :data=" active( indexM\+ 'e'\+ index, aitem. equipid, aitem. equipname)"

@click.stop.native=" addMenus( indexM=== ''?( 'e'\+ aindex): indexM\+ 'e'\+( aindex\+ item. Children. length), aitem. equipname, aitem. equipid)" >

< template slot= "title" >

< span :style="\{ color: aitem. Id === templateActive? '\#ffd04b': '\#fff'\}" >\{ \{ item. Name\}\} </ span >

</ template >

</ el-submenu >

< el-menu-item @click.stop.native=" addMenus( indexM\+ 'e'\+ index, item. Name, item. Id, item. Lev, item. TmplTypeId, item. ParentId)"

v-if=" item. nodetype== 'equipment'" :data=" active( indexM\+ 'e'\+ index, item. Id, item. Name)" :style="\{ color: item. Id === templateActive? '\#ffd04b': '\#fff'\}"

:index=" indexM\+ 'e'\+ index" :key=" index" >\{ \{ item. Name\}\} </ el-menu-item >

</ template >

</ div >

</ template >

< script >

import axios from 'axios'

export default \{

name: 'menus',

props:\[ 'listData', 'indexM'\],

data()\{

return \{

addmenus:\{\}

\},

computed:\{

templateActive()\{

return this. $store. state. templateActive

\},

methods:\{

active( index, id, name)\{

if( id === this. $store. state. templateActive)\{

this. $store. commit( 'onMenuActive', index)

this. $store. commit( 'onTagActive', index)

this. $store. commit( 'addHistorys',\{ index, name\})

\},

selectinside( index, id, name, lev, tmpTypeId, Children, nodetype, parentId)\{

// debugger

this. openMenu( index)

this. $store. commit( 'isshow', true)

// console.log(",preid",preid)

let preid= id

if( Children. length> 1)\{

preid = Children\[ Children. length\- 1\]. Id

// console.log(lev,tmpTypeId)

// console.log(this.$store.state.nodeId)

let tagnodemsg=\{ Lev:lev\+ 1, TmplTypeId: this. $store. state. nodeId, ParentOrgId:id, PreSiblingOrgId:preid, Owner: 1\}

this. $store. commit( 'tagNodeMsg', tagnodemsg)

// console.log(tagnodemsg)

this. $store. commit( 'onTemplateActive', id)

this. $store. commit( 'onMenuActive', index)

this. $store. commit( 'onTagActive', index)

this. $store. commit( 'addHistorys',\{ index, name\})

this. $store. commit( 'leftid', id)

this. $store. commit( 'onParentId', parentId)

let self = this

edit( self)

// debugger

// console.log('这是' + nodetype)

axios. get( 'http://rd-haolj:3000/equips/en/' \+ id)

. then( response => \{

// debugger

console. log( '输出这个equipdatais:' \+ response. data)

let obj = \{\}

obj\[ 'data'\] = response. data

// obj\['id'\] = id

this. $store. commit( 'onAddMenus', this. obj)

this. addmenus = this. $store. state. addMenus

console. log( this. addmenus)

this. $store. commit( 'onNodeType', 'equipment')

this. $store. commit( 'onLeftEquipData', response. data)

\})

. catch( error => \{

if ( typeof error. response === 'undefined') \{

\})

\},

addMenus( index, name, id)\{

let self = this

// console.log(id)

this. $store. commit( 'onMenuActive', index)

this. $store. commit( 'onTemplateActive', '')

this. $store. commit( 'leftitemid', id)

edit( self)

this. $store. commit( 'onTagActive', index)

this. $store. commit( 'addHistorys',\{ index, name\})

\},

openMenu( index)\{

let active = index. split( 'e')

active\[ 0\] === '' && ( active\[ 0\] = '2')

let activeArr = \[\]

for ( var i = 0; i < active. length; i\++) \{

var item = ''

for ( var j = 0; j <= i; j\++) \{

item \+= j > 0 ? ( 'e' \+ active\[ j\]) : ( active\[ j\])

activeArr. push( item)

activeArr. push( activeArr\[ activeArr. length \- 1\] + this. $store. state. tagActive)

this. $store. commit( 'onCatchMenu', activeArr)

\},

mounted()\{\}

/\*\*↓↓↓↓↓ ↓↓↓↓↓\*\*\*↓↓↓↓↓\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* by xierong \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* \*\*/

function edit ( self) \{

if( self. $store. state. nodeType === "Org")\{

self. $store. commit( 'setLoading')

let nodeid = self. $store. state. leftId

let url = 'orgnodes/findone/' \+ nodeid \+ '/en'

axios. get( url)

. then( response => \{

// console.log(response)

self. $store. commit( 'editnode', response. data)

self. $router. push(\{ path: '/createnode'\})

self. $store. commit( 'setFinish')

\})

. catch( error => \{

if ( typeof error. response === 'undefined') \{

self. $store. commit( 'changeerror', error)

self. $store. state. template = \{\}

self. $store. commit( 'setFinish')

\})

\} else\{

self. $store. commit( 'setLoading')

let equipid = self. $store. state. leftitemid

let orgid = self. $store. state. Account. orgid

// console.log("equipID："+equipid )

let url = 'equips/en/findone/'\+ equipid

axios. get( url)

. then( response => \{

// console.log(response)

self. $store. commit( 'reset')

self. $store. commit( 'editequip', response. data)

self. $router. push(\{ path: '/createnode'\})

self. $store. commit( 'setFinish')

\})

. catch( error => \{

if ( typeof error. response === 'undefined') \{

self. $store. commit( 'changeerror', error)

self. $store. state. template = \{\}

self. $store. commit( 'setFinish')

\})

/\*\* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* by xierong \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* \*\*/

</ script >

< style scoped >

</ style >

data数据：

"Id" : 59,

"ParentId" : 0,

"nodetype" : "Org",

"TmplTypeId" : 1,

"Name" : "DEL",

"DisplayName" : "DEL",

"Lev" : 1,

"Logo" : "1",

"Children" : \[\]

\},

"Id" : 63,

"ParentId" : 0,

"nodetype" : "Org",

"TmplTypeId" : 1,

"Name" : "LLLLL",

"DisplayName" : "LLLLL",

"Lev" : 1,

"Logo" : "1",

"Children" : \[

"Id" : 77,

"ParentId" : 63,

"nodetype" : "Org",

"TmplTypeId" : 1,

"Name" : "ttt",

"DisplayName" : "ttt",

"Lev" : 2,

"Logo" : "2",

"Children" : \[\]

\},

"Id" : 65,

"ParentId" : 0,

"nodetype" : "Org",

"TmplTypeId" : 1,

"Name" : "MMM",

"DisplayName" : "MMM",

"Lev" : 1,

"Logo" : "2",

"Children" : \[\]

\},

"Id" : 1,

"ParentId" : 0,

"nodetype" : "Org",

"TmplTypeId" : 1,

"Name" : "GSD Group",

"DisplayName" : "GSD Group",

"Lev" : 1,

"Logo" : "1.png",

"Children" : \[

"Id" : 2,

"ParentId" : 1,

"nodetype" : "Org",

"TmplTypeId" : 3,

"Name" : "HuaDong",

"DisplayName" : "HuaDong",

"Lev" : 3,

"Logo" : "1",

"Children" : \[

"Id" : 7,

"ParentId" : 2,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "BaiShouCun",

"DisplayName" : "BaiShouCun",

"Lev" : 3,

"Logo" : "5.png",

"Children" : \[\]

\},

"Id" : 8,

"ParentId" : 2,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "GeiPaiShui",

"DisplayName" : "ChuanYuan GeiPaiShui Site",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 10,

"ParentId" : 2,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "KunShan Sewage Factory",

"DisplayName" : "KunShan Sewage Factory",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 6,

"ParentId" : 2,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "MaoJiaBang",

"DisplayName" : "Maojiabang",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 9,

"ParentId" : 2,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "HaiMianFactory",

"DisplayName" : "HaiMianFactory",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 3,

"ParentId" : 1,

"nodetype" : "Org",

"TmplTypeId" : 3,

"Name" : "HuaNan",

"DisplayName" : "HuaNan",

"Lev" : 2,

"Logo" : "3.png",

"Children" : \[

"Id" : 5,

"ParentId" : 3,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "FuZhou Sewage Factory",

"DisplayName" : "FuZhou Sewage Factory",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 4,

"ParentId" : 1,

"nodetype" : "Org",

"TmplTypeId" : 3,

"Name" : "TaiWan",

"DisplayName" : "TaiWan",

"Lev" : 3,

"Logo" : "1",

"Children" : \[

"Id" : 12,

"ParentId" : 4,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "PingZhen Sewage Factory",

"DisplayName" : "PingZhen Sewage Factory",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 14,

"ParentId" : 4,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "GaoXiong Sewage Factory",

"DisplayName" : "GaoXiong Sewage Factory",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 13,

"ParentId" : 4,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "GongYanYuan ZhongXing Park",

"DisplayName" : "GongYanYuan ZhongXing Park",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

\},

"Id" : 11,

"ParentId" : 4,

"nodetype" : "Org",

"TmplTypeId" : 2,

"Name" : "Beiqu Water Resource Recovery Center",

"DisplayName" : "Beiqu Water resource recovery center",

"Lev" : 3,

"Logo" : "1.png",

"Children" : \[\]

这是实现了无限极的分类！！！

代码好难写呀，

vue+element UI 实现无限极分类（二）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Laravel框架实现无限极分类

相关无限极分类

相关 php实现无限极分类

相关 php实现无限极分类

相关无限极分类原理与实现

相关递归实现无限极分类

相关 vue+element UI 实现无限极分类（二）

相关 vue+element UI 实现无限极分类（一）

相关 php实现无限极分类

相关 PHP无限极分类实现