碼云地址

• 效果圖

  
  
  演示.gif

由于用的的遞歸組件，所以使用的是屬性傳函數(shù)的形式

<box-tree :pagec='pagec' :treeitem='treeitem' :list="list"></box-tree>

• 屬性 說明

• 詳細(xì)說明
  • pagec
    • 返回參數(shù) p
      返回當(dāng)前點(diǎn)擊分頁(yè)的頁(yè)數(shù)
    • 返回參數(shù) list
      返回對(duì)應(yīng)分頁(yè)的list ajax數(shù)據(jù)請(qǐng)求可以在這里替換數(shù)據(jù)

   pagec({ p, list }) {
      console.log(p, list)
      let arr = [{
         total: 2, //分頁(yè)總數(shù) 有該值顯示分頁(yè)
         page: 1, //當(dāng)前分頁(yè)
         id: a,//其他參數(shù)...
         t: a,//其他參數(shù)...
         arr: [{}] //子級(jí) 有該值顯示下級(jí)箭頭
       }]
       setTimeout(()=>{
           list.arr =arr
       })
     }

• treeitem
  • 返回參數(shù) item
    返回當(dāng)前點(diǎn)擊行的數(shù)據(jù)
  • 返回參數(shù) list
    返回當(dāng)前點(diǎn)擊列表的數(shù)據(jù) 可用于ajax數(shù)據(jù)請(qǐng)求可以在這里加載下級(jí)
  • 返回參數(shù) loads
    返回當(dāng)前點(diǎn)擊loads 狀態(tài)(true,false) 修改即可實(shí)現(xiàn) loading 效果
  • 返回參數(shù) index
    返回當(dāng)前點(diǎn)擊的item 在當(dāng)前l(fā)ist的index
  • 返回參數(shù) open
    返回當(dāng)前點(diǎn)擊item 下級(jí)是否打開 狀態(tài)(true,false) 修改即可實(shí)現(xiàn)展開關(guān)閉修改

       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)
               // 獲取數(shù)據(jù)
               setTimeout(() => {
                   this.$set(list.loads, 'type', false)
                   this.$set(list.open, 'type', true)
                   console.log(list)
               }, 1000)
           },

• list
  • 參數(shù) labelw
    標(biāo)題欄
    • label 名稱
    • prop col 下面對(duì)應(yīng)的key
  • 參數(shù) col
    • total 分頁(yè)總數(shù) 有該值顯示分頁(yè)
    • page 當(dāng)前頁(yè)可修改
    • arr 子級(jí) 有該值顯示下級(jí)箭頭
    • 其他參數(shù) 與 labelw 對(duì)應(yīng)的prop值皆可

      list: {
        labelw: [
          {
              label: '會(huì)員編號(hào)',
              prop: 'id'
          },
        ],
        col: {
          total: 2,
          page: 1,
          id: 1,
          t: 1,
          arr: [{}] //子級(jí) 有該值顯示下級(jí)箭頭
       }
     }