vue+html编写组件elment-ui 的el-tree,完整版,

最新推荐文章于 2024-11-08 15:36:55 发布
置顶 最新推荐文章于 2024-11-08 15:36:55 发布
阅读量783 收藏 5
点赞数 1
分类专栏： vue 文章标签： vue el-tree element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/beichen3997/article/details/103538858
版权
本文介绍了一种基于Vue的树形组件实现方案，通过优化父子级关联，实现了更灵活的业务需求处理。该组件支持子级点击时父级状态更新，提供全选与默认选择功能，并详细展示了组件的代码结构和使用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

可进行修改，此版本是父级关联子级，点击子级不需要选择父级的业务需求

完整关联的可在下面修改 

treeList.vue

<template>
  <div>
    <my-trees :list="list" @getResult="getResult" ref="treeMenu"></my-trees>
  </div>
</template>
<script>
let vue=this;
import myTrees from './treeMenus'
export default {
  components: {
    myTrees
  },
  props:{
    data: {
      type: Array,
      required: true
    },
    props:{
      type:Object
    }
  },
 
  data () {
    return {
      //  list: [//实例
      //   {
      //     name: '一级',checked:false,expendclick:false,id:'1',parentId:'0',
      //     cList: [
      //       { name: '二级一',checked:false,expendclick:false,id:'21',parentId:'1' },
      //       {
      //         name: '二级二',checked:false,expendclick:false,id:'22',parentId:'1',
      //         cList: [
      //           { name: '三级',checked:false,expendclick:false,id:'31',parentId:'22', cList: [{ id:'41',parentId:'31',name: '四级' ,checked:false,expendclick:false,}] }
      //         ]
      //       }
      //     ]
      //   },]
      list:[],
      isTreeRoot:true,//验证真实根组件
      checkList:[],//选中值
      checkData:[],//返回选择值
    }
  },
  mounted(){
  
  },
   watch:{
      data(n,o){ // 监听收到转换前数据
          // handler:(n,o) => {
          if(n){
            this.list=this.ruleList(JSON.parse(JSON.stringify(n)))
          
            
          }
        },
  },
  methods: {
      async getResult(val){//接收子元素的，修改父元素
            await this.searchList(this.list,val)
            await this.getChecked()
      },
      async searchList(arr,val){
       await arr.map(item=>{
          if(item.id==val){//不管子元素如何变化，只要是点击子元素就要把父级元素checked改为false
             this.$set(item,'checked',false)
            
             let code=item.cList.every(vall=>{
              return vall.checked==false&&vall.indeterminate==false
            })
            if(!code){
               this.$set(item,'indeterminate',true) //只要子级元素checked与indeterminate有true，则父级的indeterminate比为true
               if(item.parentId){//只要有父级元素就进行上级递归
                 this.searchList(this.list,item.parentId)
               }
               
            }else{
              this.$set(item,'indeterminate',false)//只要子级元素checked与indeterminate全部为false，则父级的indeterminate比为false
               if(item.parentId){//只要有父级元素就进行上级递归
                 this.searchList(this.list,item.parentId)
               }
            }
            //  if(item.parentId&&item.parentId!=='0'){//没有父级时进行上级递归
            //    this.getResult(item.parentId)
            //  }
          }else{
            if(item.cList&&item.cList.length){
              return this.searchList(item.cList,val) //下级递归
            }
          }

        })
      },
      setCheckedKeys(arr){ //设置选中
        
        let datas=JSON.parse(JSON.stringify(this.data))
        this.list=this.ruleList(datas)
        
        if(arr.length){
          arr.map(item=>{
            this.setcheckList(this.list,item[this.props.value])
          })
        
        }
        
      },
      setcheckList(arr,id){
        arr.map(item=>{
          if(item.id==id){
            
            this.$set(item,'checked',true)
            this.$refs.treeMenu.changValue(item)//将设置选中的值进行触发点击事件
          }else{
            if(item.cList&&item.cList.length){
              this.setcheckList(item.cList,id)
            }
          }
        })
      },
      async getChecked(){//获取选中元素并传递给父级组件
        this.checkList=[]
        this.checkData=[]
        await this.searchCheck(this.list) // 获取转换后选中元素
       
        this.checkList.map(item=>{
          this.seaarchData(this.data,item.id) //获取转换前选中元素
        })
       
        this.$emit('check',this.checkData)//将转换前选中元素传递给父元素
      },
      searchCheck(arr){// 获取转换后选中元素
         arr.map(item=>{
          if(item.checked){
            this.checkList.push(item)
          }else{
            if(item.cList&&item.cList.length){
             return this.searchCheck(item.cList)
            }
          }
        })
      },
      seaarchData(arr,id){//获取转换前选中元素
        arr.map(item=>{
          if(item[this.props.value]==id){
            let ids=[]
            if(this.checkData.length){
              this.checkData.map(val=>{
                return ids.push(val[this.props.value])
              })
            }
         
             if(ids.indexOf(id)==-1){
                this.checkData.push(item)
              }
            
          }else{
            if(item[this.props.children]&&item[this.props.children].length){
             return this.seaarchData(item[this.props.children],id)
            }
          }
        })
      },
      ruleList(arr){//将接受到的值转换为需要样式
        
      let arrs=arr.map(item=>{
       
          // this.$set(item,"checked",false)
          // this.$set(item,"expendclick",false)
          item.checked=false
          item.expendclick=false
          item.indeterminate=false
          if(this.props.label){//元素属性替换
              let regExp = new RegExp(this.props.label, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExp,"name"));
          }
            if(this.props.children){
              let regExps = new RegExp(this.props.children, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExps,"cList"));
          }
            if(this.props.value){
              let regExpid = new RegExp(this.props.value, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExpid,"id"));
          }
            if(this.props.parentId){
              let regExpparentId=new RegExp(this.props.parentId, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExpparentId,"parentId"));
          }
            if(this.props.disabled){
              let regExpdisabled=new RegExp(this.props.disabled, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExpdisabled,"disabled"));
          }
          if(item.cList&&item.cList.length){
            item.cList=this.ruleList(item.cList)
          }
          return item
        })
        
        return arrs
        
      }
      

  }
  
}
</script>

treeMenus.vue 

<template>
 
  <ul class="treeList">
    <li v-for="(item,index) in list" :key="index">
      <p @click="changeStatus(index,item)" :class="{'spanColor':true,'el-icon-caret-right':(!item.expendclick&&item.cList),'el-icon-caret-bottom':(item.expendclick&&item.cList)}">
          <span v-if="!(item.cList&&item.cList.length)" style="padding-left:13px;">
          </span>
         <!-- <el-checkbox v-model="item.checked" @change="changValue(item)" :disabled="item.disabled">
            </el-checkbox> -->
          <el-checkbox v-if="item.checked" v-model="item.checked" @change="changValue(item)" :disabled="item.disabled">
            </el-checkbox>
             <el-checkbox v-else :indeterminate="item.indeterminate" v-model="item.checked" @change="changValue(item)" :disabled="item.disabled"></el-checkbox>
            {{item.name}}
          </p>
      <tree-menus v-if="scopesDefault[index]" :list="item.cList"></tree-menus>
    </li>
  </ul>
 
</template>
 <style scoped lang="scss">
.treeList {
  padding-left: 20px !important;
  li{
    padding: 5px 0;
  }
  .spanColor{
    cursor: pointer;
  }
}

</style>
<script>
// import treeMenus from './treeMenu2.vue'
export default {
  name: 'treeMenus',
  props: {
    list: Array
  },
  data() {
    return {
      scopesDefault: [],
      scopes: [],
      tree: null,
    }
  },
 
  methods: {
    changeStatus(index,item) {//切换展开
      this.$set(item,'expendclick',!item.expendclick)
      if (this.scopesDefault[index] == true) {
        this.$set(this.scopesDefault, index, false)
      } else {
        
        if(this.scopes[index]){
          this.$set(this.scopesDefault, index, this.scopes[index])
        }else{
          if(this.scopes[index]===undefined){
              this.$set(this.scopesDefault, index, true)
          }else{
            this.$set(this.scopesDefault, index, false)
          }
        }
        
      }
    },
    scope() {//是否展开下一级
      this.list.forEach((item, index) => {
        this.scopesDefault[index] = false
        if ('cList' in item) {
          this.scopes[index] = true
         
        } else {
          this.scopes[index] = false
        }
      })
     
     
    },
    changValue(item){ //checkbox的选中与取消
        
        // if(!item.checked){
          this.$set(item,'indeterminate',item.checked) //切换indeterminate 状态，只负责样式控制
        // }
        console.log(item,'1111111111111111111111')
        if(item.cList&&item.cList.length){
          this.searchList(item.cList,item.checked)
        }
         this.tree.getResult(item.parentId)//在终极父组件中修改父级显示样式
    },
    searchList(arr,check){//对所有子集进行统一控制
      arr.map(item=>{
        this.$set(item,'checked',check)
        this.$set(item,'indeterminate',check)
        if(item.cList&&item.cList.length){
         return this.searchList(item.cList,check)
        }
      })
    }
  },
  created() {
    
    let parent = this.$parent
       
        while (parent && !parent.isTreeRoot) {
            parent = parent.$parent
        }
        this.tree = parent //获取终极父组件
       
  },
  mounted(){
    this.scope()
  }
}
</script>

 

 应用init.vue

</template>
       <div class="eboss-col col-flex">
                        <label for="" class="form-label">业务区域<i>*</i>：</label>
                        <div class="form-control">
                            <div style="width: 100%">
                               <el-popover ref="business" placement="bottom-start" v-model="showSelect">
                                    <div style="width: 300px; max-height: 200px; overflow-y: scroll">
                                        <treeList :data="treeData" @check="getCheck" ref="trees" :props="{
                                                    label: 'areaName',
                                                    value:'id',
                                                    parentId:'parentId',
                                                    children: 'childList' 
                                                 }" ></treeList>
                                              
                                    </div>
                                </el-popover>
                                <div class="simulation-tags" @click.stop="showSelect = true">
                                    <el-tag type="danger" size="small" closable
                                            v-for="(item, index) in tags" @close="closeHandle(item)" :key="index"
                                    >{{item.areaName}}</el-tag>
                                </div>
                                <div  v-popover:business style="height:0"></div>
                                
                                <!-- <el-popover ref="business" placement="bottom-start" v-model="showSelect">
                                    <div style="width: 220px; max-height: 200px; overflow-y: scroll">
                                        <el-tree ref="tree"
                                                 :data="treeData"
                                                 :props="{
                                                    label: 'areaName',
                                                    children: 'childList'
                                                 }"
                                                 node-key="originalId"
                                                 show-checkbox @check="checkTreeHandle"></el-tree>
                                              
                                    </div>
                                </el-popover>
                                <div class="simulation-tags" @click.stop="showSelect = true">
                                    <el-tag type="danger" size="small" closable
                                            v-for="(item, index) in tags" @close="closeHandle(item)" :key="index"
                                    >{{item.areaName}}</el-tag>
                                </div>
                                <div  v-popover:business style="height:0"></div> -->
                                
                            </div>
                        </div>
                    </div>
</template>
<script>

import treeList from 'module/newCkeckTree/treeList';
 export default {
 components:{
      treeList,
    },
    data:{
    },
    methods:{
    closeHandle (item) {
       
        this.tags = this.tags.filter(tag => tag.id != item.id)
       
        this.$refs.trees.setCheckedKeys(this.tags);
        this.$set(this.query, 'businessAreaList', this.tags.map(item => item.id))
       
      },
      getCheck(item){
        console.log(item,'huoqu')
        this.tags=item
        this.$set(this.query, 'businessAreaList', this.tags.map(item => item.id))
      },


    }
}



</script>

进行子集全选，父级默认选则

treeList.vue

<template>
  <div>
    <my-trees :list="list" @getResult="getResult" ref="treeMenu"></my-trees>
  </div>
</template>
<script>
let vue=this;
import myTrees from './treeMenus'
export default {
  components: {
    myTrees
  },
  props:{
    data: {//传入递归组件的原始数据
      type: Array,
      required: true
    },
    props:{//label,value,children,disabled,parentId(父子集关联数据)
      type:Object
    },
    awlAll:{//如果传值为true，则子集全选，默认父级选择，如果不传值或者传值为false，子集全选，父级不选择
      type:Boolean
    }
  },
 
  data () {
    return {
      //  list: [//实例
      //   {
      //     name: '一级',checked:false,expendclick:false,id:'1',parentId:'0',
      //     cList: [
      //       { name: '二级一',checked:false,expendclick:false,id:'21',parentId:'1' },
      //       {
      //         name: '二级二',checked:false,expendclick:false,id:'22',parentId:'1',
      //         cList: [
      //           { name: '三级',checked:false,expendclick:false,id:'31',parentId:'22', cList: [{ id:'41',parentId:'31',name: '四级' ,checked:false,expendclick:false,}] }
      //         ]
      //       }
      //     ]
      //   },]
      list:[],
      isTreeRoot:true,//验证真实根组件
      checkList:[],//选中值
      checkData:[],//返回选择值
    }
  },
  mounted(){
  
  },
   watch:{
      data(n,o){ // 监听收到转换前数据
          // handler:(n,o) => {
          if(n){
            this.list=this.ruleList(JSON.parse(JSON.stringify(n)))
          
            
          }
        },
  },
  methods: {
      async getResult(val){//接收子元素的，修改父元素
            await this.searchList(this.list,val)
            await this.getChecked()
      },
      async searchList(arr,val){
       await arr.map(item=>{
          if(item.id==val){//不管子元素如何变化，只要是点击子元素就要把父级元素checked改为false
            
            if(this.awlAll){
                let codes=item.cList.every(vall=>{
                  return vall.checked==true
                })
                if(codes){
                  this.$set(item,'checked',true)
                  if(item.parentId){//只要有父级元素就进行上级递归
                    this.searchList(this.list,item.parentId)
                  }
                }else{
                  this.$set(item,'checked',false)
                }
            }else{
              this.$set(item,'checked',false)
            }
           
             let code=item.cList.every(vall=>{
              return vall.checked==false&&vall.indeterminate==false
            })
            if(!code){
               this.$set(item,'indeterminate',true) //只要子级元素checked与indeterminate有true，则父级的indeterminate比为true
               if(item.parentId){//只要有父级元素就进行上级递归
                 this.searchList(this.list,item.parentId)
               }
               
            }else{
              this.$set(item,'indeterminate',false)//只要子级元素checked与indeterminate全部为false，则父级的indeterminate比为false
               if(item.parentId){//只要有父级元素就进行上级递归
                 this.searchList(this.list,item.parentId)
               }
            }
            //  if(item.parentId&&item.parentId!=='0'){//没有父级时进行上级递归
            //    this.getResult(item.parentId)
            //  }
          }else{
            if(item.cList&&item.cList.length){
              return this.searchList(item.cList,val) //下级递归
            }
          }

        })
      },
      setCheckedKeys(arr){ //设置选中
        
        let datas=JSON.parse(JSON.stringify(this.data))
        this.list=this.ruleList(datas)
        
        if(arr.length){
          arr.map(item=>{
            this.setcheckList(this.list,item[this.props.value])
          })
        
        }
        
      },
      setcheckList(arr,id){
        arr.map(item=>{
          if(item.id==id){
            
            this.$set(item,'checked',true)
            this.$refs.treeMenu.changValue(item)//将设置选中的值进行触发点击事件
          }else{
            if(item.cList&&item.cList.length){
              this.setcheckList(item.cList,id)
            }
          }
        })
      },
      async getChecked(){//获取选中元素并传递给父级组件
        this.checkList=[]
        this.checkData=[]
        await this.searchCheck(this.list) // 获取转换后选中元素
       
        this.checkList.map(item=>{
          this.seaarchData(this.data,item.id) //获取转换前选中元素
        })
       
        this.$emit('check',this.checkData)//将转换前选中元素传递给父元素
      },
      searchCheck(arr){// 获取转换后选中元素
         arr.map(item=>{
          if(item.checked){
            this.checkList.push(item)
          }else{
            if(item.cList&&item.cList.length){
             return this.searchCheck(item.cList)
            }
          }
        })
      },
      seaarchData(arr,id){//获取转换前选中元素
        arr.map(item=>{
          if(item[this.props.value]==id){
            let ids=[]
            if(this.checkData.length){
              this.checkData.map(val=>{
                return ids.push(val[this.props.value])
              })
            }
         
             if(ids.indexOf(id)==-1){
                this.checkData.push(item)
              }
            
          }else{
            if(item[this.props.children]&&item[this.props.children].length){
             return this.seaarchData(item[this.props.children],id)
            }
          }
        })
      },
      ruleList(arr){//将接受到的值转换为需要样式
        
      let arrs=arr.map(item=>{
       
          // this.$set(item,"checked",false)
          // this.$set(item,"expendclick",false)
          item.checked=false
          item.expendclick=false
          item.indeterminate=false
          if(this.props.label){//元素属性替换
              let regExp = new RegExp(this.props.label, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExp,"name"));
          }
            if(this.props.children){
              let regExps = new RegExp(this.props.children, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExps,"cList"));
          }
            if(this.props.value){
              let regExpid = new RegExp(this.props.value, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExpid,"id"));
          }
            if(this.props.parentId){
              let regExpparentId=new RegExp(this.props.parentId, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExpparentId,"parentId"));
          }
            if(this.props.disabled){
              let regExpdisabled=new RegExp(this.props.disabled, 'g');
              item=JSON.parse(JSON.stringify(item).replace(regExpdisabled,"disabled"));
          }
          if(item.cList&&item.cList.length){
            item.cList=this.ruleList(item.cList)
          }
          return item
        })
        
        return arrs
        
      }
      

  }
  
}
</script>

 

一个简单的基于vue手写的tree树
hu_Time的博客
04-11 494
tree树
Vue + element-ui el-tree 虚拟滚动
p_5050的博客
04-27 4362
vue项目中使用了element-ui的el-tree树节点对数据进行了渲染，奈何数据量太大导致页面卡死或需要3s以上才可渲染出来。为了解决以上问题，查询资料对问题进行了解决，对此进行整理。希望可以帮到你。
在html页面中封装elementUi的tree树结构
lff18277233091的博客
08-10 992
后端返回的数据结构 封装组件的js代码： 在html页面中引用和使用 实现的效果图： 备注：实现的效果管理员能查看全部地区的数据，而本级的话只能查看本级的数据
Vue 树形组件创建 类似于elment tree
code_game_的博客
08-16 362
话不多说 直接上树形组件代码然后慢慢给大家讲解 我的树形数据是这样 的 data:[ { check:false, name:"首页", id:1, all_id:1, sub:[{ check:false, name:"首页", id:2, all_id:1-2, sub:[{ check:false, name:"首页", id:3, all_id:1-2-3, }...] }...] }...] 创建第一个component----
基于el-tree添加标签
weixin_48969871的博客
07-23 1243
实现如图的功能，点击选中复选框，实时渲染右侧标签，右侧标签由本身的内容和它的所有父级内容组成。 首先 实现左侧的树形分类，带复选框（只有最后一级有） <div class="dialog"> <span>关键字：</span> <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> &l...
Vue2 Elmentui el-tree组件，手写三个结果的按钮控件操作，失败的时候自动打开节点。
热爱蛋炒饭的博客
11-08 186
【代码】Vue2 Elmentui el-tree组件，手写三个结果的按钮控件操作，失败的时候自动打开节点。
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
Element UI是一个基于Vue 2.0的桌面端组件库，其中el-tree组件用于构建树形控件，而render函数则是一个允许开发者使用JavaScript代码直接生成虚拟DOM的方式。本文着重讲解了如何在el-tree组件中利用render函数动态...
vue使用element-ui el-input+el-tree
weixin_46463643的博客
10-24 1570
简介：主要为树形下拉框选择数据对应input展示值 效果图 html <el-form :v-model="form"> <el-form-item> <el-input placeholder="请选择菜单分类" class="selectTree-input" auto-complete="off" v-model="form.inp
原生js手写tree树形分类选择插件
05-06
原生js结合jquery手写树形插件，详解编码思路，具体可使用示例，下载即可使用
手写el-tree组件
最新发布
weixin_47571421的博客
11-08 362
由于后端还没有给数据 这里我用的是自己的死数据。效果为点击就添加children。这个本身的技术难度不大，只是我之前都是直接用组件，第一次遇到，感觉很有趣。如果能帮助到其他人当然更好了。最近UI给了一张图，就是一个美化版的树形组件。感觉样式方面改动太大了。如果用elementUI的组件直接改样式 感觉太麻烦了 ，不如自己动手写一个。自己也是第一次接触到这个。树形结构的核心思想就是子组件递归，自己调用自己。这里先注册一个子组件，并且调用。我这个样式的代码 也一并附上。
el-select+el-tree仿TreeSelect组件
jyf_568的博客
07-01 384
<!--el-select+el-tree--> <template> <el-select ref="select" popper-class="TREE_SELECT_POPPER" :value="showLabel" :size="size" :placeholder="placeholder" :cle...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
weixin_42353715的博客
06-19 475
怎么在vue中利用递归组件实现一个树形控件发布时间：2021-06-11 17:26:48来源：亿速云阅读：81作者：Leah本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。vue版的树形控件html>树形结构2Vue.component('tree',{name:"tree",templ...
在HTML当中引入Vue控件，以element-ui为例
azyxa1的博客
10-27 2567
然后在需要此vue组件生效的区域定义一个div标签，等会用js初始化，比如我这个时间选择器在顶部，我就拿个id为app的div包裹起来，然后new一个Vue。
使用vue2-org-tree html demo和问题
weixin_43859180的博客
12-23 1261
使用vue2-org-tree html demo和问题 想让每次点击展示的子层显示不同颜色，用css选择器修改笨笨的不灵活，看出来节点是有规律的，而且点击选中也不起作用了，修改整体颜色也不起作用了，有没有好方法改，烦躁ing <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-org-tree</title> &
html创建树控件,构建HtmlElement对象树
weixin_33334565的博客
06-08 394
这样做// On screen webbrowser controlwebBrowserControl.Navigate("about:blank");webBrowserControl.Document.Write("This will change");var elementToReplace = webBrowserControl.Document.GetElementById("div1"...
vue之el-tree
weixin_46016219的博客
11-10 855
vue之el-tree1.结构2.数据转变树形格式结尾 1.结构 代码如下（示例）： <el-tree :data="data" //存放数据 props="defaultProps" :expand-on-click-node="false"// 点击节点时展开或者收缩节点 highlight-current //是否高亮 :node-key="id" //其值为节点数据中的一个字段名，该字段在整棵树中是唯一的 @check-change=
html树形结构主从命名,VUE实战7：树形结构，文件树，节点树共用一套代码 NodeTree，admin后台...
weixin_42210038的博客
06-05 303
本次介绍的内容，稍稍复杂了一点，用 VUE 实现树形结构。目前这个属性结构还没有编辑功能，仅仅是展示。明天再开一篇文章，介绍如何增加编辑功能，标题都想好了。先看今天的展示效果：构建树必须用到递归，使用 slot 这种直观明了的方式，已经行不通了。只能通过属性参数，传递一个树形的数据结构给组件，传入的数据结构大致是这个样子：[{title:‘页面 ’selected:false,opened:fal...
ElementUI组件el-select与el-tree融合技巧
2. ElementUI：作为Vue的UI框架，ElementUI提供了一套基于Vue的完整组件库，el-select和el-tree均为ElementUI中的组件。el-select-tree是建立在这些组件之上的封装。 3. 组件化开发：el-select-tree体现了组件化开发...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值