技術標籤：學習vuejavascript

在開發過程中遇到需要將分頁介面的資料展示在樹形結構中的需求

一、效果

二、實現

2.1後端介面

使用mock

// el-tree 資料介面 分頁
import Mock from 'mockjs'

const count = 100

const items = [
    {
        "id": 1,
        "appId": "00d39caf58c34b2a2a1f1e442f525268",
        "appName": "D應用"
 
,
        "userId": "1",
        "dUserName": "d",
        "createdTime": "2021-01-08T02:55:30.000+0000",
        "createdBy": "admin",
        "modifyBy": "admin",
        "modifyTime": "2021-01-11T07:31:30.000+0000"
 

      },
      {
        "id": 2,
        "appId": "018eae54ebcd78bbc22ef6aec213743f",
        "appName": "D應用",
        "userId": "1",
        "dUserName": "dcoos",
        "createdTime": "2021-01-08T02:55:30.000+0000"
 
,
        "createdBy": "admin",
        "modifyBy": "admin",
        "modifyTime": "2021-01-08T02:55:30.000+0000"
      },
      {
        "id": 3,
        "appId": "02030acd4bc549e866cc33d1d1b2d62b",
        "appName": "D應用",
        "userId": "1",
        "dUserName": "dcoos",
        "createdTime": "2021-01-08T02:55:30.000+0000",
        "createdBy": "admin",
        "modifyBy": "admin",
        "modifyTime": "2021-01-08T02:55:30.000+0000"
      }
];


export default [
    {
        url: '/tree/data',
        type: 'get',
        response: config => {
            const {page , limit = 10 } = config.query
            
            const pageList = items.filter((item,index) => index < limit * page && index >= limit * (page - 1))

            return {
                code: 20000,
                data: {
                    total: items.length,
                    items: pageList
                },
                msg: '查詢成功',
                traceId: '798215010391162880',
                success: true
            }
        }

    }
]

2.2 api介面

import request from '@/utils/request'

export function getTreeData(param) {
    let config = {
        params: param
    }
    return request({
        url: '/tree/data',
        method: 'get',
        ...config
    })
}

2.3 vue頁面實現

<template>
   <div>
        <el-tree
                class="filter-tree"
                :data="appData"
                node-key="id"
                :props="defaultProps"
                ref="tree"
                @node-click="handleNodeClick"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                        <i v-if="data.items&&data.items.length>0" class="el-icon-folder-add" style="padding-right:5px;color: #c0c4cc"/>
                    <i v-else /><span :title="node.label">{{ node.label }}</span>
                </span>
            </span>
        </el-tree>

        <!-- 分頁欄 -->
        <div class="bottom">
            <el-pagination background small :pager-count="5" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="appUserRel.page" :page-size="appUserRel.limit"
                            layout="prev, pager, next" :total="appUserRel.total"></el-pagination>
        </div>
    </div>
</template>

<script>
import { getTreeData } from '@/api/tree'

export default {
    name: 'index',
    data() {
        return {
            appData: [],
            // 配置選項: children-指定子樹為節點物件的某個屬性值; label-指定節點標籤為節點物件的某個屬性值;
            defaultProps: {
                children: 'items',
                label: 'appId'
            },
            appUserRelList: [],
            appUserRel: {
                limit: 10,
                total: 130,
                page: 1
            }
        }
    },
    created() {
        let param = {
                page: 1,
                limit: 10
            }
        this.queryTreeData(param)
    },
    methods: {
        queryTreeData(param) {
            getTreeData(param).then(response => {
                // console.log(response)
                let res = response.data
                let appData = []
                let appUserRelList = res.items
                if (appUserRelList.length!==0) {
                    appData = [
                        {appId: '所有APP', items: appUserRelList}
                    ]
                }
                this.appData = appData
                this.appUserRelList = appUserRelList
                this.appUserRel.total = res.total
            })
        },
        handleNodeClick(data) {
                this.appSelection = []
                if(data){
                    // this.appSelection.push(data.name)
                    // 根節點不查詢
                    console.log(data.appId)
                    if (data.appId==="所有APP") {
                        return
                    }
                    console.log(data.appId)
                }
        },
        // 當每頁數量改變
        handleSizeChange(val) {
            this.appUserRel.limit = val
        },
        handleCurrentChange(val) {
            console.log(`當前頁: ${val}`);
            this.appUserRel.page = val
            let param = {
                limit: 10,
                page: val
            }
            this.queryTreeData(param)
        }
    }
}
</script>

<style>
</style>