집 > 기사 > 웹 프론트엔드 > Vue 단일 구성 요소는 무한 수준의 다중 선택 메뉴 기능을 구현합니다.

Vue 단일 구성 요소는 무한 수준의 다중 선택 메뉴 기능을 구현합니다.

不言원래의: 2018-04-10 14:49:451756검색

이 글은 다중 선택 메뉴를 무제한으로 구현하기 위한 Vue의 단일 구성 요소에 대한 관련 정보를 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

wTree.vue wTree.vue

原理：每一个多选框都是一个节点，每个节点就是一个wTree组件，有父级（顶级level为0）,有子级（底层list[]是空的），组件之间状态传递是通过组件通信传递，对于外部数据checkList数组的修改是通过store实现的。初始化从底层状态传递到上层，一层一层传递。改变状态，不同状态改变，修改checklist数组。大概就这个思路，下面是代码：

<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>

调用 orgList带有层级的json数组

66da98919c095ac2cbbc2859e991d02ddde37c0f1aba1836d4bea99acf5c9c27
원리: 각 다중 선택 상자는 노드이고 각 노드는 상위(최상위 레벨은 0)와 하위(하단 목록[]은 비어 있음)을 갖습니다. 컴포넌트는 컴포넌트 통신을 통해 외부 데이터 checkList 배열을 수정하는 경우 저장소를 통해 구현됩니다. 초기화는 맨 아래 상태에서 상위 레이어로 레이어별로 전달됩니다. 상태를 변경하고, 다른 상태를 변경하고, 체크리스트 배열을 수정합니다. 아마도 이 아이디어를 기반으로 다음 코드는 다음과 같습니다.

rrreee레벨이 있는 json 배열에 orgList를 호출

cff8ae3e2dc75877ff7a5b48e3f000bcdde37c0f1aba1836d4bea99acf5c9c27

Summary

Vue 단일 구성 요소는 무한 수준의 다중 선택 메뉴 기능을 구현합니다.

관련 기사