iView组件库之下拉框dropdown（树形结构） Iview组件下拉框树形组件
iview官⽅⽰例
实现的效果
dropdown有个属性 transfer
是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使⽤时，建议添加此属性，它将不受⽗级样式影响，从⽽达到更好的效果 Boolean false 赋值给它 false，这样不会因为失去焦点，⽽有部分内容会"消失"
我们观察iview给出的⽰例
<template>
<Dropdown>
<a href="javascript:void(0)">
北京⼩吃
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱⾯</DropdownItem>
<DropdownItem>⾖汁⼉</DropdownItem>
<Dropdown placement="right-start">
<DropdownItem>
北京烤鸭
<Icon type="ios-arrow-forward"></Icon>
</DropdownItem>
<DropdownMenu slot="list">
<DropdownItem>挂炉烤鸭</DropdownItem>
<DropdownItem>焖炉烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<DropdownItem>冰糖葫芦</DropdownItem>
</DropdownMenu>
</Dropdown>
</template>
复制代码
我们可以发现Dropdown是下拉框未选择时的名字 DropdownMenu⾥有每个下拉框的⼦项DropdownItem 如果当某个下拉框的⼦项有⼦项时，这个下拉框的⼦项是Dropdown和DropDownItem组成，它的⼦项是由DropdownMenu和DropdownItem组成。 因此我们需要构造这样的层级关系。
我们需要写两个组件
ccl41. 树结构组件
2. 递归组件(递归调⽤⾃⼰)
递归组件
// 未选中的值，如果有值选中，则改为选中的值 {{treeTop}}树组件 <template>兰州大学研究生被杀
<div class="tree-view-item">
川端康成<div v-for="node in parent" :key="node.id">
// 当节点有孩⼦节点⽽且孩⼦节点的长度⼤于0 进⾏递归
<div v-if="node.childColumn && node.childColumn.length > 0">
<Dropdown :transfer="false" @on-click="handleClick" placement="right-start"> <DropdownItem :name="lumnTitle">
{{lumnTitle}}
</DropdownItem>广州双食记
<DropdownMenu slot="list">
纪念马克思200周年<ColumnDropTree :parent="node.childColumn"></ColumnDropTree>
</DropdownMenu>
</Dropdown>
</div>
<div v-else>
// 否则不递归
<DropdownItem :name="lumnTitle">
{{lumnTitle}}
</DropdownItem>
</div>
</div>
</div>
</template>
<script>
import ColumnDropTree from './ColumnDropTree'
export default {
name: 'ColumnDropTree',
components: {
ColumnDropTree
},
data () {
return {
parentName: '',
childValue: ''
}
},
props: {
parent: Array
},
computed: {},
methods: {
// 上抛事件把选中的值上抛给⽗组件
handleClick (name) {
this.childValue = name
this.$emit('childByValue', this.childValue)
}
},
watch: {
parent (val) {
console.log(parent)
}
},
created () {
},
硼氢化钾
mounted () {}
}
</script>
<style>
</style>
复制代码
我的github 个⼈博客
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议