myList.vue
<template>
<div class="select">
<div class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></div>
<my-trees v-show="options1isShow" :list="list" @getResult="getResult"></my-trees>
</div>
</template>
<script>
import myTrees from './treeMenus'
export default {
components: {
myTrees
},
data () {
return {
isTreeRoot:true,
list: [
{
name: '黄焖鸡米饭',
code:'001',
cList: [
{ name: '二级黄焖鸡',code:'002', },
{
name: 'one chicken',
code:'003',
cList: [
{ name: '三级黄焖鸡',code:'004', cList: [{ name: '四级黄焖鸡',code:'005', }] }
]
}
]
},
// { name: '2222222222' },
// {
// name: '黄焖鸡米饭33333333',
// cList: [{ name: '二级黄焖鸡' }, { name: 'one chicken' }]
// }
],
options1isShow:false,
result:''
}
},
methods: {
options1Show:function(){
this.options1isShow=true;
},
getResult(val){
console.log(val,'getResult')
this.result=val.name
}
}
}
</script>
<style>
li,ul{
list-style: none;
padding:0;
margin:0;
}
li{
height:40px;
line-height: 40px;
border-bottom: 1px solid #ededed;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.select{
position: relative;
}
.input_text>input{
width:170px;
height:30px;
border:1px solid #ddd;
}
.options1,.options2{
width:170px;
height:200px;
border:1px solid #ddd;
position: absolute;
background: #fff;
/* overflow-y: auto; */
}
.options3{
position: relative;
width:170px;
height:200px;
border:1px solid #ddd;
background: #fff;
/* overflow-y: auto; */
}
.options2{
left:170px;
top:0;
right: 0;
}
</style>
treeMenus.vue
<template>
<div class="options1">
<ul class="options3">
<li v-for="(option,index) in list" :key="index">
<p @click="changeStatus(option)">{{option.name}}<i :class="option.cList ? 'el-icon-arrow-right': ''"></i></p>
<div class="options2" v-if="options2isShow">
<tree-menus v-if="option.cList" :list="option.cList"></tree-menus>
</div>
</li>
</ul>
</div>
</template>
<style>
ul {
margin-top: 50px;
padding-left: 20px !important;
}
</style>
<script>
// import treeMenus from './treeMenu2.vue'
export default {
name: 'treeMenus',
props: {
list: Array
},
data() {
return {
scopesDefault: [],
scopes: [],
options2isShow:false,
secondOptions:[],
tree: null,
}
},
methods: {
changeStatus(val) {
if(val.cList&&val.cList.length){
this.options2isShow=true
}
else{
console.log(val)
this.tree.getResult(val)
}
// this.$emit('getResult',val)
},
},
created() {
// this.scope()
let parent = this.$parent
console.log(parent,'parent')
while (parent && !parent.isTreeRoot) {
parent = parent.$parent
}
this.tree = parent
console.log(this.tree)
}
}
</script>
<style>
li,ul{
list-style: none;
padding:0;
margin:0;
}
li{
height:40px;
line-height: 40px;
border-bottom: 1px solid #ededed;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.select{
position: relative;
}
.input_text>input{
width:170px;
height:30px;
border:1px solid #ddd;
}
.options1,.options2{
width:170px;
height:200px;
border:1px solid #ddd;
position: absolute;
background: #fff;
/* overflow-y: auto; */
}
.options3{
position: relative;
width:170px;
height:200px;
border:1px solid #ddd;
background: #fff;
/* overflow-y: auto; */
}
.options2{
left:170px;
top:0;
right: 0;
}
</style>
使用递归组件init.vue
<div class="step-two mt10">
<myList></myList>
</div>
<script>
import myList from './module/myLIst'
export default {
components: {
myList
},
}
</script>
需要注意的有两点,
第一是递归父组件向子组件传值
第二是子组件找到根组件,将选择的值传递给根组件
细节方法可以继续优化,核心代码就是上面这些,希望对你有用