本人之前一直是耕耘后臺研發(fā)，最近接了個小需求需要接觸到vue，記錄一下我遇到的一些前端解決時間長的問題
需求：
1：每次動態(tài)請求接口獲取下一節(jié)點數(shù)據(jù)
2：接口返回的數(shù)據(jù)是list，不帶子節(jié)點，用pid來維護父子之間的關(guān)系
3：帶有搜索框，搜索框為請求遠程數(shù)據(jù)，數(shù)據(jù)為不帶子節(jié)點數(shù)據(jù)用pid來維護
4：簡單?。?！
頁面：

需要組件：
下載三方插件 使用arrayTotree插件 將扁平化數(shù)組轉(zhuǎn)換為樹形結(jié)構(gòu)數(shù)組 并賦值給list

npm install array-to-tree --save

import arrayToTree from ‘a(chǎn)rray-to-tree’

data中的自定義數(shù)組 = arrayToTree(獲取請求的數(shù)組, { parentProperty: ‘父級id’, customID: ‘二級id’});

代碼：

<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="成員" name="first">
            <!--左邊-->
            <el-container>
                <el-aside width="200px">
                    <el-input
                            placeholder="Search by name"
                            prefix-icon="el-icon-search"
                            v-model="inputStr"
                            class="name-email-search"
                            size="small"
                            clearable
                            @blur="initSearch"
                            @clear="initSearch">
                    </el-input>

                    <el-tree
                            :data="treeList"
                            ref="tree"
                            class="vue-tree"
                            lazy
                            :load="loadNode"
                            :highlight-current="true"
                            :node-key="nodeKey"
                            @node-click="nodeClick"
                            :expand-on-click-node="false"
                            :props="defaultProps"
                    ></el-tree>
                </el-aside>


                <!--右邊-->
                <el-main>{{str}}</el-main>

            </el-container>
        </el-tab-pane>


        <el-tab-pane label="組織" name="second">組織

        </el-tab-pane>
    </el-tabs>

</template>
<script>

    import {childNodes, search} from "../api/dept";
    import  arrayToTree  from  'array-to-tree';
    import {treeList} from "../api/system/msg";

    export default {
        data() {
            return {
                activeName: 'first',
                //輸入框輸入的值
                inputStr: '',
                defaultProps: {
                    children: "children",
                    label: "name",
                    isLeaf: "isLeaf",
                },
                currentNodeKey: "",
                //當(dāng)前樹用到的list
                treeList: [],
                str: 'aaa'
            };
        },

        methods: {
        	//搜索框
            async initSearch(resolve) {
                const param = {
                    orders: [],
                    conditions: [{field: 'name', value: this.inputStr}]
                };
                const res = await search(param)
                //將搜索出來的扁平數(shù)據(jù)轉(zhuǎn)換成tree樹狀數(shù)據(jù)
				//再將搜索出來的數(shù)據(jù)替換之前加載的tree數(shù)據(jù)
                this.treeList = arrayToTree(res.data.data,
                    {parentProperty:'pid', customID:'deptId'}) ;
            },
            // 懶加載獲取樹形結(jié)構(gòu)
            loadNode(node, resolve) {
                //調(diào)用接口時，我們的需求是第一級傳參為0，后面為當(dāng)前節(jié)點的唯一表示id，可以根據(jù)需求而定
                // node.level為0時，就是tree的第一級
                const spaceParentGuid = node.level === 0 ? 0 : node.data.deptId
                childNodes(spaceParentGuid).then(({data}) => {
                    resolve(
                        data.data.map(item => {
                            return {
                                ...item,
                                leaf: !item.hasChildren // 此參數(shù)用來判斷當(dāng)前節(jié)點是否為葉子節(jié)點
                            }
                        })
                    )
                })
            },
            nodeClick() {
                this.str = 'changede';
            }

        },
        mounted() {
        }
    };
</script>

后端查詢接口接口返回數(shù)據(jù)格式：

{
  "success": true,
  "message": null,
  "data": [
    {
      "deptId": 1,
      "pid": 0,
      "subCount": 0,
      "name": "默認組織",
      "deptSort": 0,
      "createBy": null,
      "updateBy": null,
      "createTime": 1682229715,
      "updateTime": 1682229715,
      "hasChildren": false,
      "leaf": true,
      "top": true
    },
    {
      "deptId": 1231231,
      "pid": 354122786547134460,
      "subCount": 0,
      "name": "xw部門2",
      "deptSort": 999,
      "createBy": null,
      "updateBy": null,
      "createTime": null,
      "updateTime": null,
      "hasChildren": false,
      "leaf": true,
      "top": false
    }]
    }

到上面的就結(jié)束了，下面是是筆者自己記錄的，記得替換成自己的

請求的接口：dept.js

import request from '../utils/request'

const localHost = 'http://localhost:8081'

export function search(data) {
  return request({
    url: localHost+'/plugin/dept/search',
    method: 'post',
    data
  })
}

export function childNodes(data) {
  return request({
    url: localHost+'/plugin/dept/childNodes/'+data,
    method: 'post',
    data
  })
}

接口攔截器：request.js文章來源地址http://www.zghlxwxcb.cn/news/detail-448000.html

import axios from 'axios'
import Config from '@/settings'
import { getToken } from '../utils/auth'

const TokenKey = Config.TokenKey

let service = axios.create({
    timeout: 10000
})

// request interceptor
service.interceptors.request.use(
    config => {
        console.log(getToken())
        config.headers[TokenKey] =getToken() ;
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// Response interceptor for API calls
service.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if(error.response.status == 403){
            refreshToken()
        }
    }
);


const refreshToken= ()=>{
    // gets new access token
}


export default service

到了這里，關(guān)于vue+element Ui 樹型組件tree懶加載+搜索框遠程請求數(shù)據(jù)為平鋪類型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！