Die Vue-Einzelkomponente implementiert eine Mehrfachauswahlmenüfunktion mit unbegrenzter Ebene

In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierung von Multi-Select-Menüs mit unendlichen Ebenen in einer einzelnen Komponente von Vue vorgestellt. Freunde, die sie benötigen, können sich auf

wTree.vue 

Prinzip: Jedes Mehrfachauswahlfeld ist ein Knoten und jeder Knoten ist eine wTree-Komponente. Es hat ein übergeordnetes Element (die oberste Ebene ist 0) und ein untergeordnetes Element (die untere Liste[] ist leer). Die Statusübertragung zwischen Komponenten erfolgt durch Komponentenkommunikation, die Änderung des externen Daten-CheckList-Arrays wird über den Store implementiert. Die Initialisierung wird Schicht für Schicht vom unteren Zustand an die obere Schicht übergeben. Ändern Sie den Status, ändern Sie verschiedene Status und ändern Sie das Checklisten-Array. Wahrscheinlich basiert dieser Code auf dieser Idee:

<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 hierarchical json array

66da98919c095ac2cbbc2859e991d02ddde37c0f1aba1836d4bea99acf5c9c27 

Zusammenfassung

Verwandte Empfehlungen:

Vue.js implementiert Methoden zum Betreiben von Klassen

Zusammenfassung der grundlegenden Wissenspunkte von Vue.js

Das obige ist der detaillierte Inhalt vonDie Vue-Einzelkomponente implementiert eine Mehrfachauswahlmenüfunktion mit unbegrenzter Ebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!