Introduction to the infinite-level multi-selection menu function implemented by a single vue component-JS Tutorial-php.cn

This article mainly introduces the relevant information about the implementation of infinite-level multi-select menus by a single component of vue. It is very good and has reference value. Friends in need 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) and a child (the bottom list[] is empty). The state is transferred between components 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>

Copy after login

Call orgList with hierarchical json array

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

Copy after login

The above is the content of this article All content, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use Vue to customize the numeric keyboard component

VueJS components interact through props and Verification method

Introduction to Vue component communication practice

# #

The above is the detailed content of Introduction to the infinite-level multi-selection menu function implemented by a single vue component. For more information, please follow other related articles on the PHP Chinese website!