vue-element-tree 无限下级的树形组件（加分页）

码云地址

---

• 效果图

  
  
  演示.gif

由于用的的递归组件，所以使用的是属性传函数的形式

• 属性 说明

名称	类型	示例	说明
pagec	Fn	pagec({ p, list }) {}	返回当前点击分页数据和
treeitem	Fn	treeitem({item,list,loads,index,open}) {}	返回当前行的数据
list	Obj	list: {labelw: [ ],col: {}}	label 为标题栏，col为显示数据

• 详细说明
  • pagec
    • 返回参数 p
      返回当前点击分页的页数
    • 返回参数 list
      返回对应分页的list ajax数据请求可以在这里替换数据

   pagec({ p, list }) {
      console.log(p, list)
      let arr = [{
         total: 2, //分页总数 有该值显示分页
         page: 1, //当前分页
         id: a,//其他参数...
         t: a,//其他参数...
         arr: [{}] //子级 有该值显示下级箭头
       }]
       setTimeout(()=>{
           list.arr =arr
       })
     }

• treeitem
  • 返回参数 item
    返回当前点击行的数据
  • 返回参数 list
    返回当前点击列表的数据 可用于ajax数据请求可以在这里加载下级
  • 返回参数 loads
    返回当前点击loads 状态(true,false) 修改即可实现 loading 效果
  • 返回参数 index
    返回当前点击的item 在当前list的index
  • 返回参数 open
    返回当前点击item 下级是否打开 状态(true,false) 修改即可实现展开关闭修改

       treeitem(list) {
               console.log(list)
             //展开控制
               if (list.open.type) {
                   this.$set(list.open, 'type', false) 
                   return
               }
               this.$set(list.loads, 'type', true)
               this.$set(list.open, 'index', list.index)
               this.$set(list.loads, 'index', list.index)
               // 获取数据
               setTimeout(() => {
                   this.$set(list.loads, 'type', false)
                   this.$set(list.open, 'type', true)
                   console.log(list)
               }, 1000)
           },

• list
  • 参数 labelw
    标题栏
    • label 名称
    • prop col 下面对应的key
  • 参数 col
    • total 分页总数 有该值显示分页
    • page 当前页可修改
    • arr 子级 有该值显示下级箭头
    • 其他参数 与 labelw 对应的prop值皆可

      list: {
        labelw: [
          {
              label: '会员编号',
              prop: 'id'
          },
        ],
        col: {
          total: 2,
          page: 1,
          id: 1,
          t: 1,
          arr: [{}] //子级 有该值显示下级箭头
       }
     }