vue 구성 요소는 계층적 다중 선택 메뉴 기능을 만듭니다.
- php中世界最好的语言원래의
- 2018-04-28 15:35:321792검색
이번에는 vue 컴포넌트를 이용한 계층적 다중 선택 메뉴 기능을 소개해 드리겠습니다. vue 컴포넌트에서 계층적 다중 선택 메뉴 기능을 생성할 때의 주의사항은 무엇인가요?
wTree.vue
원리: 각 다중 선택 상자는 노드이고, 각 노드는 상위(최상위 레벨은 0)와 하위(하단 목록[]은 비어 있음)을 갖습니다. 컴포넌트 상태 전달은 컴포넌트 통신을 통해 이루어지며, 외부 데이터 checkListarray의 수정은 스토어를 통해 구현됩니다. 초기화는 맨 아래 상태에서 상위 레이어로 레이어별로 전달됩니다. 상태를 변경하고, 다른 상태를 변경하고, 체크리스트 배열을 수정합니다. 아마도 이 아이디어를 바탕으로 다음 코드가 나올 것입니다.
d477f9ce7bf77f53fbcf36bec1b69b7a
e388a4556c0f65e1904146cc1a846bee
ed101ace28eb2e83d02513ccb1648d2b
4f555254255129eed389abd755c7120a 54bdf357c58b8a65c66d7c19c8e4d114
b7dc181cef335d3aca7c2764a59d47d472ac96585ae54b6ae11f849d2649d9e6
4333e88ff3da098980eb64a766f698c6 54bdf357c58b8a65c66d7c19c8e4d114
45a2772a6b6107b401db3c9b82c049c2
0f52e3d84a33e3edc14d95af6e1e0d9e
f4795b2a19418f35194557a89112fcf5
af950f290a4bf6954df9def7b42b0d6c
7f23ea73d0b6e0b57b4268f2114cd7c4
5db79b134e9f6b82c0b36e0489ee08ed
54bdf357c58b8a65c66d7c19c8e4d114
45a2772a6b6107b401db3c9b82c049c2{{item.name}}54bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3
b41f8f9c6e4179cbe6e1c8b508f6b506
2724ec0ed5bf474563ac7616c8d7a3cd
94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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-----')
}
}
2cacc6d41bbb37262a98f745aa00fbf0
Call orgList with hierarchical json array
<w-tree v-for="o of orgList" :item="o" :level="0" :key="o.key"></w-tree>
이 기사의 사례를 읽으신 후 이 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 항목에 주의하세요. PHP 중국어 웹사이트의 기사!
추천 자료:
을 사용하여 JSON 배열을 중복 제거하는 단계에 대한 자세한 설명위 내용은 vue 구성 요소는 계층적 다중 선택 메뉴 기능을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue 구성 요소 사용에 대한 실제 지침다음 기사：Vue 구성 요소 사용에 대한 실제 지침