vue组件做出无限层级多选效果

这次给大家带来vue组件做出无限层级多选效果，vue组件做出无限层级多选效果的注意事项有哪些，下面就是实战案例，一起来看一下。

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

  
  
                           {{item.name}}  
      
    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-----')  }  } 

登录后复制

调用 orgList带有层级的json数组

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

antd下拉框联动使用步骤详解

如何使用JS实现合并多个数组去重算

以上就是vue组件做出无限层级多选效果的详细内容，更多请关注【创想鸟】其它相关文章！