Vue component makes hierarchical multi-select menu function

This time I will bring you the hierarchical multi-select menu function of the vue component. What are the precautions for the vue component to create the hierarchical multi-select menu function. The following is a practical case, let's take a look.

wTree.vue

Principle: Each multi-select box is a node, and each node is a wTree component with a parent (the top level is 0) , there are children (the underlying list[] is empty), the state transfer between components is through component communication, and the modification of external data checkListarray is implemented through the store. Initialization is passed from the bottom state to the upper layer, layer by layer. Change the state, change different states, and modify the checklist array. Probably based on this idea, the following is the code:

d477f9ce7bf77f53fbcf36bec1b69b7a 
 e388a4556c0f65e1904146cc1a846bee 
 ed101ace28eb2e83d02513ccb1648d2b 
 4f555254255129eed389abd755c7120a 54bdf357c58b8a65c66d7c19c8e4d114 
 b7dc181cef335d3aca7c2764a59d47d472ac96585ae54b6ae11f849d2649d9e6 
 4333e88ff3da098980eb64a766f698c6 54bdf357c58b8a65c66d7c19c8e4d114 
 45a2772a6b6107b401db3c9b82c049c2 
 0f52e3d84a33e3edc14d95af6e1e0d9e 
  f4795b2a19418f35194557a89112fcf5 
  af950f290a4bf6954df9def7b42b0d6c 
  7f23ea73d0b6e0b57b4268f2114cd7c4 
 5db79b134e9f6b82c0b36e0489ee08ed 
 54bdf357c58b8a65c66d7c19c8e4d114 
 45a2772a6b6107b401db3c9b82c049c2{{item.name}}54bdf357c58b8a65c66d7c19c8e4d114 
 94b3e26ee717c64999d7867364b1b4a3 
 b41f8f9c6e4179cbe6e1c8b508f6b506 
 2724ec0ed5bf474563ac7616c8d7a3cd 
 94b3e26ee717c64999d7867364b1b4a3 
21c97d3a051048b8e55e3c8f199a54b2 
3f1c4e4b6b16bbbd69b2ee476dc4f83a 
 export default { 
 name: 'wTree', 
 props: ['item', 'level', 'state'], 
 data () { 
 return { 
 open: true, 
 node: 'wTree', // 控制菜单开关的 
 selected: false, // 选中的情况下 
 selectedState: 'null', // 子组件被选中的情况下向上传递all/sub/null 
 originInfo: 'create', // 组件信息源，create/parent/children/this 
 openClass: 'el-icon-caret-bottom', 
 closeClass: 'el-icon-caret-right', 
 selectClass: 'el-icon-check', 
 selectBg: '#1c8de0', 
 list: [], 
 createSwitch: true 
 } 
 }, 
 computed: { 
 levelNum () { 
 return (this.level + 1) 
 }, 
 stateSub () { 
 return { 
  selected: this.selected, 
  originInfo: this.originInfo 
 } 
 } 
 }, 
 methods: { 
 showSub () { 
 this.open = !this.open 
 }, 
 changeState () { 
 if (this.selected) { 
  this.selected = false 
  this.selectedState = 'null' 
  this.originInfo = 'this' 
  for (let o of this.list) { 
  o.selectedState = 'null' 
  } 
 } else { 
  this.selected = true 
  this.selectedState = 'all' 
  this.originInfo = 'this' 
  for (let o of this.list) { 
  o.selectedState = 'all' 
  } 
 } 
 let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: 'parent' 
 } 
 this.$emit('changeToPar', data) 
 }, 
 changeBySub (data) { 
 // 如果是父组件true,判断状态，未被选中，添加id到list，selectSub=true,通知父组件，添加store的数组中，选中通知父组件，this.list.length=this.length状态改为selected 
 // 修改自身状态，添加list 
 let temp = data 
 if (data.originInfo === 'create') { 
  this.list.push(data) 
 } else { 
  this.originInfo = 'parent' 
  let stateNull = 'null' 
  let stateAll = 'all' 
  let stateSub = 'sub' 
  for (let o of this.list) { 
  if (o.id === temp.id) { 
  o.selectedState = temp.selectedState 
  } 
 
  if (o.selectedState !== 'all') { 
  stateAll = null 
  } 
  if (o.selectedState !== 'null') { 
  stateNull = null 
  } 
  } 
  if (stateNull) { 
  this.selectedState = stateNull 
  this.selected = false 
  } else if (stateAll) { 
  this.selectedState = stateAll 
  this.selected = true 
  } else { 
  this.selectedState = stateSub 
  this.selected = true 
  } 
  let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: 'parent' 
  } 
  this.$emit('changeToPar', data) 
 } 
 } 
 }, 
 watch: { 
 selected () { 
 // 初始化 
 if (this.originInfo === 'create') { 
  // 不改变值 
 } else { 
  // 改变值******** 
  if (this.selected) { 
  // 添加值 
  this.$store.commit('PUSH_CHECK_LIST', this.item.menuId) 
  } else { 
  // 删除值 
  this.$store.commit('SPLICE_CHECK_LIST', this.item.menuId) 
  } 
 } 
 }, 
 state () { 
 // 子组件得到通知，如果状态一直，不去改变，如果状态不一致改变 
 if (this.state.originInfo === 'this') { 
  this.originInfo = 'this' 
 } 
 if (this.originInfo === 'create') { 
  this.originInfo = 'children' 
 } else { 
  if (this.state.originInfo !== 'parent') { 
  if (this.state.selected) { 
  this.selected = true 
  this.selectedState = 'all' 
  if (this.list !== []) { 
  for (let o of this.list) { 
   o.selectedState = 'all' 
  } 
  } 
  } else { 
  this.selected = false 
  this.selectedState = 'null' 
  if (this.list !== []) { 
  for (let o of this.list) { 
   o.selectedState = 'null' 
  } 
  } 
  } 
  } 
 } 
 }, 
 list () { 
 // 初始化数组 
 if (this.list.length === this.item.list.length) { 
  let stateNull = 'null' 
  let stateAll = 'all' 
  let stateSub = 'sub' 
  for (let o of this.list) { 
  if (o.selectedState !== 'all') { 
  stateAll = null 
  } 
  if (o.selectedState !== 'null') { 
  stateNull = null 
  } 
  } 
  if (stateNull) { 
  this.selectedState = stateNull 
  this.selected = false 
  } else if (stateAll) { 
  this.selectedState = stateAll 
  this.selected = true 
  } else { 
  this.selectedState = stateSub 
  this.selected = true 
  } 
  let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: 'create' 
  } 
  this.$emit('changeToPar', data) 
 } 
 } 
 }, 
 created () { 
 // 初始化，把每个组件，从最底层添加到节点列表中，这样每个子组件都在list中了，就是originInfo=create的情况下添加数组，就不用判断数组长度，直接改变状态 
 if (this.createSwitch) { 
 let i = this.$store.state.checkList.indexOf(this.item.menuId) 
 console.log(!this.item.list) 
 console.log('-----------------------初始化') 
 if (!this.item.list) { 
  if (i > -1) { 
  this.selectedState = 'all' 
  this.selected = true 
  } else { 
  this.selectedState = 'null' 
  this.selected = false 
  } 
 
  let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: 'create' 
  } 
  this.$emit('changeToPar', data) 
  this.originInfo = 'this' 
 } 
 this.createSwitch = false 
 } 
 console.log(this.state) 
 console.log('----------------created') 
 }, 
 updated () { 
 console.log('-------updated=======') 
 let i = this.$store.state.checkList.indexOf(this.item.menuId) 
 console.log(!this.item.list) 
 console.log('-----------------------初始化') 
 if (!this.item.list) { 
 if (i > -1) { 
  this.selectedState = 'all' 
  this.selected = true 
 } else { 
  this.selectedState = 'null' 
  this.selected = false 
 } 
 
 let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: 'parent' 
 } 
 this.$emit('changeToPar', data) 
 this.originInfo = 'this' 
 } 
 }, 
 mounted () { 
 console.log('=========mounted-----') 
 } 
 } 
2cacc6d41bbb37262a98f745aa00fbf0

Call orgList with hierarchical json array

<w-tree v-for="o of orgList" :item="o" :level="0" :key="o.key"></w-tree>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

Detailed explanation of the steps to deduplicate JSON arrays using JS

How to deduplicate data when merging multiple arrays

The above is the detailed content of Vue component makes hierarchical multi-select menu function. For more information, please follow other related articles on the PHP Chinese website!