vue---tree实现递归组件(多级下拉菜单)

Posted 2023-03-09

参考技术A   <div class="detail-list">

    <div class="item" v-for="(item, index)in list" :key="index">

      <div class="item-title border-bottom" @click.stop="changeStatus(index)" :class="'active':isActive[index]">

        <span class="oks"> item.title

      <!-- 注意递归终止条件 -->

      <div v-if="item.children" class="item-children">

        <!-- 通过name进行递归调用 -->

        <detail-list v-on="$listeners"

          v-if="scopesDefault[index]"

          :list="item.children"

        >

export default

name:"DetailList",

  props:

list:Array,

  ,

  data()

return

isActive:[],

      scopesDefault: [], // 第一级

      scopes: [], // 第二级

    ;

  ,

  created()

this.scope();

  ,

  mounted()

,

  methods:

changeStatus(index)

var ods=[]

for(var b=0;b

ods.push(false)



this.scopesDefault=ods;

      this.isActive=ods;

      if (this.scopesDefault[index] ==true)

this.$set(this.scopesDefault, index, false);

      else

this.$set(this.scopesDefault, index, this.scopes[index]);

        if(this.list[index].children==undefined)

this.$emit("Eok",true)

//数据内容

          // var value = [

          //  title: "文华酒店自助晚餐",

// ]

//

// this.list[index]['children']=value

          this.$set(this.isActive, index, true);

        else

this.$set(this.isActive, index, this.scopes[index]);

       



// this.list.push(

      //  title: "特惠1票",

// )

    ,

    scope()

this.list.forEach((item, index) =>

this.scopes[index]=false

        this.isActive[index]=false

        this.scopesDefault[index] =false; // 第一级索引值全都是false

        if ("children" in item) // 判断第一级是否有children

          this.scopes[index] =true;

        else

this.scopes[index] =false;

       

);

    ,

  ,

;

<style scoped>

.item-title

line-height:40px;

  padding:0 10px;

  display:flex;

  color:#666;



.item-title span

cursor:pointer;

  display:block;

  margin:0 auto;



.item-title.active span

border-bottom:2px solid #03a9f4;

  color:#03a9f4;



.item-children

padding:0 20px;

  position:absolute;

  width:100%;

  left:0;



.item-title.active



.detail-list

width:100%;

  display:flex;

  border-bottom:1px solid #ddd;

  position:relative;



.detail-list>div

flex:1;



.item

flex:1;



</style>