Vue single component implements infinite level multi-select menu function

This article mainly introduces the relevant information on how to implement infinite-level multi-select menus in a single vue component. Now I share it with you. Friends who need it can refer to it

wTree.vue

Principle: Each multi-select box is a node, and each node is a wTree component. It has a parent (the top level is 0), a child (the bottom list[] is empty), and between components The state is transferred through component communication, and the modification of the external data checkList array 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:

<template> 
 <p> 
 <p > 
 <span v-for="o in levelNum"> </span> 
 <i v-if="item.list" :class="open ? openClass : closeClass" @click="showSub" style="color: #00d6b2"></i> 
 <span v-else> </span> 
 <span> 
 <a @click="changeState"> 
  <img src="./../assets/selectedAll.png" v-if="selectedState === &#39;all&#39;" width="15px" height="15px"/> 
  <img src="./../assets/selectedSub.png" v-if="selectedState === &#39;sub&#39;" width="15px" height="15px"/> 
  <img src="./../assets/selectedNull.png" v-if="selectedState === &#39;null&#39;" width="15px" height="15px"/> 
 </a> 
 </span> 
 <span>{{item.name}}</span> 
 </p> 
 <component v-show="open" :is="node" :item="o" :state="stateSub" v-for="o of item.list" :key="o.key" :level="levelNum" v-on:changeToPar="changeBySub"> 
 </component> 
 </p> 
</template> 
<script> 
 export default { 
 name: &#39;wTree&#39;, 
 props: [&#39;item&#39;, &#39;level&#39;, &#39;state&#39;], 
 data () { 
 return { 
 open: true, 
 node: &#39;wTree&#39;, // 控制菜单开关的 
 selected: false, // 选中的情况下 
 selectedState: &#39;null&#39;, // 子组件被选中的情况下向上传递all/sub/null 
 originInfo: &#39;create&#39;, // 组件信息源，create/parent/children/this 
 openClass: &#39;el-icon-caret-bottom&#39;, 
 closeClass: &#39;el-icon-caret-right&#39;, 
 selectClass: &#39;el-icon-check&#39;, 
 selectBg: &#39;#1c8de0&#39;, 
 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 = &#39;null&#39; 
  this.originInfo = &#39;this&#39; 
  for (let o of this.list) { 
  o.selectedState = &#39;null&#39; 
  } 
 } else { 
  this.selected = true 
  this.selectedState = &#39;all&#39; 
  this.originInfo = &#39;this&#39; 
  for (let o of this.list) { 
  o.selectedState = &#39;all&#39; 
  } 
 } 
 let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: &#39;parent&#39; 
 } 
 this.$emit(&#39;changeToPar&#39;, data) 
 }, 
 changeBySub (data) { 
 // 如果是父组件true,判断状态，未被选中，添加id到list，selectSub=true,通知父组件，添加store的数组中，选中通知父组件，this.list.length=this.length状态改为selected 
 // 修改自身状态，添加list 
 let temp = data 
 if (data.originInfo === &#39;create&#39;) { 
  this.list.push(data) 
 } else { 
  this.originInfo = &#39;parent&#39; 
  let stateNull = &#39;null&#39; 
  let stateAll = &#39;all&#39; 
  let stateSub = &#39;sub&#39; 
  for (let o of this.list) { 
  if (o.id === temp.id) { 
  o.selectedState = temp.selectedState 
  } 
 
  if (o.selectedState !== &#39;all&#39;) { 
  stateAll = null 
  } 
  if (o.selectedState !== &#39;null&#39;) { 
  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: &#39;parent&#39; 
  } 
  this.$emit(&#39;changeToPar&#39;, data) 
 } 
 } 
 }, 
 watch: { 
 selected () { 
 // 初始化 
 if (this.originInfo === &#39;create&#39;) { 
  // 不改变值 
 } else { 
  // 改变值******** 
  if (this.selected) { 
  // 添加值 
  this.$store.commit(&#39;PUSH_CHECK_LIST&#39;, this.item.menuId) 
  } else { 
  // 删除值 
  this.$store.commit(&#39;SPLICE_CHECK_LIST&#39;, this.item.menuId) 
  } 
 } 
 }, 
 state () { 
 // 子组件得到通知，如果状态一直，不去改变，如果状态不一致改变 
 if (this.state.originInfo === &#39;this&#39;) { 
  this.originInfo = &#39;this&#39; 
 } 
 if (this.originInfo === &#39;create&#39;) { 
  this.originInfo = &#39;children&#39; 
 } else { 
  if (this.state.originInfo !== &#39;parent&#39;) { 
  if (this.state.selected) { 
  this.selected = true 
  this.selectedState = &#39;all&#39; 
  if (this.list !== []) { 
  for (let o of this.list) { 
   o.selectedState = &#39;all&#39; 
  } 
  } 
  } else { 
  this.selected = false 
  this.selectedState = &#39;null&#39; 
  if (this.list !== []) { 
  for (let o of this.list) { 
   o.selectedState = &#39;null&#39; 
  } 
  } 
  } 
  } 
 } 
 }, 
 list () { 
 // 初始化数组 
 if (this.list.length === this.item.list.length) { 
  let stateNull = &#39;null&#39; 
  let stateAll = &#39;all&#39; 
  let stateSub = &#39;sub&#39; 
  for (let o of this.list) { 
  if (o.selectedState !== &#39;all&#39;) { 
  stateAll = null 
  } 
  if (o.selectedState !== &#39;null&#39;) { 
  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: &#39;create&#39; 
  } 
  this.$emit(&#39;changeToPar&#39;, 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(&#39;-----------------------初始化&#39;) 
 if (!this.item.list) { 
  if (i > -1) { 
  this.selectedState = &#39;all&#39; 
  this.selected = true 
  } else { 
  this.selectedState = &#39;null&#39; 
  this.selected = false 
  } 
 
  let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: &#39;create&#39; 
  } 
  this.$emit(&#39;changeToPar&#39;, data) 
  this.originInfo = &#39;this&#39; 
 } 
 this.createSwitch = false 
 } 
 console.log(this.state) 
 console.log(&#39;----------------created&#39;) 
 }, 
 updated () { 
 console.log(&#39;-------updated=======&#39;) 
 let i = this.$store.state.checkList.indexOf(this.item.menuId) 
 console.log(!this.item.list) 
 console.log(&#39;-----------------------初始化&#39;) 
 if (!this.item.list) { 
 if (i > -1) { 
  this.selectedState = &#39;all&#39; 
  this.selected = true 
 } else { 
  this.selectedState = &#39;null&#39; 
  this.selected = false 
 } 
 
 let data = { 
  id: this.item.menuId, 
  selectedState: this.selectedState, 
  originInfo: &#39;parent&#39; 
 } 
 this.$emit(&#39;changeToPar&#39;, data) 
 this.originInfo = &#39;this&#39; 
 } 
 }, 
 mounted () { 
 console.log(&#39;=========mounted-----&#39;) 
 } 
 } 
</script>

Calling orgList with a hierarchical json array

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

Summary

Related recommendations:

vue.js method to implement class operations

Summary of basic knowledge points of Vue.js

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