vue+ElementUI之Tree的使用，供大家參考，具體內容如下

前端程式碼

<template>
    <div>
        <el-dialog title="終端通訊錄" :visible.sync="isOpen" class="el-dialog-mini">
            <div class="forms-menu-con">
                <!-- 
                    check-on-click-node:設定是否在選漢字的時候,複選框也選中
                    props:定義節點和自己提供欄位的匹配(例:名稱對應
 
資料庫查詢出來的name屬性)
                    data:Tree中的資料,其中欄位可以自定義,可以多新增業務欄位,再點選的時候呼叫函式獲取該值
                    node-key:唯一,意味著選中節點的時候使用哪個欄位作為唯一標識
                    render-content:內容渲染,如果想要在樹選單上新增圖示等樣式使用這個屬性,配置一個渲染函式即可
                    check-change:當複選框狀態改變時候,觸發次函式,這個主要用來做單選操作,和業務處理使用
                    show-checkbox:顯示覆選框
                    highlight-current:高亮顯示選中節點
                    check-strictly:在顯示覆選框的情況下,是否嚴格的遵循父子不互相關聯的做法,預設為 false
                 -->
                <el-tree :data="treeData" :props="treeProps" :check-strictly="true" node-key="id" ref="treeForm" :render-content="renderContent" @check-change="handleClick" show-checkbox highlight-current class="addtree" style="height:275px;">
                </el-tree>
                <el-col class="form-search colum-center">
                    <el-button @cl
 
程式設計客棧ick="submit">
                        <i class="ump-save" style="font-size:15px;"></i>確 定
                    </el-button>
                    <el-button @click="close">
                        <i class="ump-quxiao3" style="font-size:16px;"></i>關 閉
                    </el-button>
                </el-col>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isOpen: false,ifonlyTerminal: 1,treeData: [],treeProps: {
                label: 'label',children: 'kids',disabled: this.disabledFn
            }
        }
    },methods: {
        disabledFn(data,node) {
            return data.nodeType == 0;
        },handleClick(data,checked,node) {
            let $this = this;
            if (checked) {
                console.log(data);
                /** 該節點作用為永遠單選*/
                //$this.$refs.treeForm.setCheckedNodes([data]);

    /** 該節點作用為多選*/
                $this.$refs.treeForm.setChecked([data]);
            }
        },renderContent(h,{
            node,data,store
        }) {
            return ( 
                <span class = "custom-tree-node" >
                <span >
                <i class = {data.icon} ></i>
                  { data.label } 
                </span>
                </span>
            );
        },open(selections,ifonlyTerminal) {
            let $this = this;
            $this.treeData=[];
            $this.ifonlyTerminal=ifonlyTerminal;
            $this.$httpclient.get("/reminder/getTerminalContacts",{
                ifonlyTerminal: $this.ifonlyTerminal
            },function (res) {
                if (res.success == true) {
                    $this.treeData = res.data;
                    $this.$refs.treeForm.setCheckedKeys(selections);
                } else {
                    $this.$message({
                        message: '初始化失敗,網路走丟啦...',type: 'error'
                    });
                }
            });
            this.isOpen = true;
        },submit() {
            let selectionNode = this.$refs.treeForm.getCheckedNodes();
            let list=[];
            for(let i=0;i<selectionNode.length;i++){
                let item=selectionNode[i];
                list.push({
                    id:item.id,terminalName:item.label,terminalNum:item.terminalNum,serialNum:item.serialNum,terminalType:item.terminalType
                });
            }
            console.log(list);
            this.$parent.setTerminals(list);
            this.close();
        },close() {
            this.isOpen = false;
        }
    }
}
</script>

引用元件

<template>
    <div>
        <el-dialog title="新增預約會議" :visible.sync="addModelOpen" class="el-dialog-large dialogClass">
            <div class="forms-menu mar-10">
                <div class="forms-menu-tit">
                    <span>
                        <i class="ump-caidan flt-l" style="color:#2681ec;font-size:20px;margin-top:-3px;"></i>
                        基本資訊
                    </span>
                </div>

                <div class="forms-menu-con par-T10">
                    <el-row>
                        <el-form :model="addForm" :rules="rules" ref="addForm" :inline="true" label-position="right">
                            <div class="el-colum-xs12 block">
                                <div class="form-group el-display">
                                    <el-form-item label="主題" prop="title" style="width:1050px;">
                                        <el-input v-model="addForm.title" placeholder="請輸入主題"></el-input>
                                    </el-form-item>
                                </div>
                            </div>

                            <div class="el-colum-xs12">
                                <div class="form-group el-display">
                                    <el-form-item label="開始時間" prop="startTime" style="margin-top:20px;width:700px;">
                                        <el-date-picker :picker-options="startTimeValid"  @change="newValid" v-model="addForm.startTime" type="datetime" format="yyyy-MM-dd hh:mm" value-format="yyyy-MM-dd hh:mm" placeholder="選擇會議開始時間"></el-date-picker>
                                    </el-form-item>
                                </div>
                            </div>

                            <div class="el-colum-xs12" style="margin-top:20px;">
                                <div class="form-group">
                                    <el-form-item label="會議時長" prop="meetTime">
                                        <el-select v-model="addForm.meetTimeHour" placeholder="請選擇" style="width:100px;">
                                            <el-option label="0" value="0"></el-option>
                                            <el-option label="1" value="1"></el-option>
                                            <el-option label="2" value="2"></el-option>
                                            <el-option label="3" value="3"></el-option>
                                            <el-option label="4" value="4"></el-option>
                                            <el-option label="5" value="5"></el-option>
                                            <el-option label="6" value="6"></el-option>
                                        </el-select>
                                        <span style="margin:0px 10px">小時</span>
                                        <el-select v-model="addForm.meetTimeMin" placeholder="請選擇" style="width:100px;">
                                            <el-option label="0" value="0"></el-option>
                                            <el-option label="10" value="10"></el-option>
                                            <el-option label="20" value="20"></el-option>
                                            <el-option label="30" value="30"></el-option>
                                            <el-option label="45" value="45"></el-option>
                                            <el-option label="50" value="50"></el-option>
                                        &http://www.cppcns.comlt;/el-select>
                                        <span style="margin:0px 10px">分鐘</span>
                                    </el-form-item>
                                </div>
                            </div>

                            <div class="el-colum-xs12" style="margin-top:20px;">
                                <div class="form-group">
                                    <el-form-item label="會議詳情" prop="meetDetails" style="width:700px;">
                                        <el-input type="textarea" :rows="3" v-model="addForm.meetDetails" placeholder="請輸入會議概要資訊..."></el-input>
                                    </el-form-item>
                                </div>
                            </div>

                            <div class="el-colum-xs12 block" style="margin-top:20px;">
                                <div class="form-group el-display">
                                    <el-form-item label="參會人員" prop="noselect" style="width:700px;">
                                        <el-input v-model="terminalNum" placeholder="請輸入手機號、終端號、終端序列號點選『確定』按鈕新增"></el-input>
                                        <div class="form-search" style="display: inline">
                                            <el-button @click="addTerminal"><i class="el-icon-document-checked" style="font-size:16px;margin-top:6px;"></i>確 定</el-button>
                                            <el-button @click="openContactsModel"><i class="el-icon-plus" style="font-size:16px;margin-top:6px"></i>從通訊錄新增/取消</el-button>
                                        </div>
                                        <el-checkbox-group v-model="ifonlyTerminal">
       RlctnVscK                                     <el-checkbox label="A">僅終端 <span style="color:#44b5ff">(本次選擇結果，將只包含終端，不包含使用者)</span></el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                    <el-form-item label="已選終端/使用者" prop="terminals" style="width:700px;">
                                        <el-input type="textarea" class="textarea" v-model="terminalsInfo" readonly="readonly"></el-input>
                                    </el-form-item>

                               http://www.cppcns.com </div>
                            </div>

                            <!-- <div class="el-colum-xs12 block" style="margin-top:20px;">
                                <div class="form-group el-display">
                                    <el-form-item label="參會人員" prop="name" style="width:700px;">
                                        <el-input v-model="terminalNum" placeholder="請輸入手機號、終端號、終端序列號點選『確定』按鈕新增"></el-input>
                                        <div class="form-search" style="display: inline">
                                            <el-button @click="addTerminal"><i class="el-icon-document-checked" style="font-size:16px;margin-top:6px;"></i>確 定</el-button>
                                            <el-button @click="openContactsModel"><i class="el-icon-plus" style="font-size:16px;margin-top:6px"></i>從通訊錄新增/取消</el-button>
                                        </div>
                                        <el-checkbox-group v-model="ifonlyTerminal">
                                            <el-checkbox label="A">僅終端 <span style="color:#44b5ff">(本次選擇結果，將只包含終端，不包含使用者)</span></el-checkbox>
                                        </el-checkbox-group>
                                        <el-input type="textarea" class="textarea" v-model="terminalsInfo"></el-input>
                                    </el-form-item>
                                </div>
                            </div> -->

                            <div class="el-colum-xs12 block" style="margin-top:20px;">
                                <div class="form-group">
                                    <el-form-item label="會議設定" prop="sex">
                                        <el-checkbox-group v-model="ifAutoRecord">
                                            <el-checkbox label="A"> <span style="color:#44b5ff">會議開始時自動呼叫參會終端</span>&程式設計客棧lt;/el-checkbox><br>
                                        </el-checkbox-group>
                                        <el-checkbox-group v-model="ifAutoCall">
                                            <el-checkbox label="B"> <span style="color:#44b5ff">自動錄製</span></el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </div>
                            </div>

                            <div class="el-colum-xs12 block" style="margin-top:20px;">
                                <div class="form-group">
                                    <el-form-item label="選擇雲會議室" prop="meetRoomId">
                                        <el-form-item label="" style="width:200px;">
                                            <el-select v-model="addForm.meetRoomId" placeholder="請選擇會議室">
                                                <el-option v-for=" item in meetRooms" :key="item.id" :label="item.roomName" :value="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>

                                    </el-form-item>
                                </div>
                            </div>
                            <div class="el-colum-xs12 block" style="margin-top:20px;">
                                <div class="form-group">
                                    <el-col class="form-search colum-center">
                                        <el-button @click="submit" :disabled="isDisabled">
                                            <i class="ump-save" style="font-size:15px;"></i>儲存
                                        </el-button>
                                        <el-button @click="close">
                                            <i class="ump-quxiao3" style="font-size:16px;"></i>關 閉
                                        </el-button>
                                        <br /><br />
                                    </el-col>
                                </div>
                            </div>
                        </el-form>
                    </el-row>
                </div>
            </div>
        </el-dialog>

        <contacts ref="contactsModel"></contacts>

    </div>
</template>

<style>
.dialogClass .el-dialog {
    height: 690px;
    top: 50%;
    margin-top: -369px !important;
}

.dialogClass .el-dialog .el-dialog__body {
    height: 670px;
}
</style>

<script>
import dateUtil from '@/common/util.js'
import contacts from "@/components/meet/reminder/contacts";

export default {
    components: {
        contacts
    },data() {
        let $this = this;
        let meetTimeTimeValid = function (rule,value,callback) {
            if (($this.addForm.meetTimeHour + $this.addForm.meetTimeMin) == 0) {
                callback(new Error('請選擇會議時長'));
            }
            callback();
        }

        let terminalsValid = function (rule,callback) {
            if ($this.addForm.terminals.length == 0) {
                callback(new Error('請選擇參會終端/使用者'));
            }
            callback();
        }
        return {
            addModelOpen: false,terminalNum: "",ifonlyTerminal: false,terminalsInfo: "",ifAutoRecord: false,ifAutoCall: false,isDisabled: false,meetRooms: [],addForm: {
                title: "",meetRoomId: "",startTime: "",roomNum: "",meetTimeHour: "0",meetTimeMin: "20",endTime: "",meetDetails: "",ifAutoRecord: "",ifAutoCall: "",meetPassWord: "",controlPassWord: "",terminals: []
            },rules: {
                title: [{
                    required: true,message: '請輸入會議主題',trigger: 'blur'
                }],meetRoomId: [{
                    required: true,message: '請選擇雲會議室',startTime: [{
                    required: true,message: '請選擇開始時間',meetDetails: [{
                    required: true,message: '請輸入會議詳情',meetTime: [{
                    validator: meetTimeTimeValid,trigger: 'change'
                }],terminals: [{
                    validator: terminalsValid,trigger: 'change'
                }]
            },startTimeValid: {
                disabledDate: (time) => {
                    return time.getTime() <= Date.now();
                }
            }
        }
    },mounted() {
        console.log("歡迎使用應急平臺-預約會議...");
    },methods: {
        open() {
            let $this = this;
            $this.$httpclient.get("/reminder/getMeetRooms",{},function (res) {
                if (res.success == true) {
                    $this.meetRooms = res.data;
                } else {
                    $this.$message({
                        message: '雲會議室沒找到,type: 'warning'
                    });
                }
            });
            this.addModelOpen = true;
        },close() {
            this.addModelOpen = false;
        },newValid(){
            this.$refs["addForm"].validateField('startTime');
        },submit() {
            let $this = this;
            $this.btnStatus = true;
            $this.$refs.addForm.validate((valid) => {
                if (valid && $this.btnStatus) {
                    $this.addForm.ifAutoRecord = $this.ifAutoRecord ? 1 : 0;
                    $this.addForm.ifAutoCall = $this.ifAutoCall ? 1 : 0;
                    for (let i = 0; i < $this.meetRooms.length; i++) {
                        let item = $this.meetRooms[i];
                        if (item.id == $this.addForm.meetRoomId) {
                            $this.addForm.roomNum = item.roomNum;
                        }
                    }
                    $this.$httpclient.post("/reminder",$this.addForm,function (res) {
                        $this.btnStatus = false;
                        if (res.success == true) {
                            $this.$parent.search();
                            $this.close();
                        } else {
                            $this.$message({
                                message: '[網路忙],' + res.errorMsg,type: 'error'
                            });
                        }
                    });
                } else {
                    $this.btnStatus = false;
                    return false;
                }
            });
        },openContactsModel() {
            let list = [];
            for (let i = 0; i < this.addForm.terminals.length; i++) {
                let item = this.addForm.terminals[i];
                list.push(item.id);
            }
            this.$refs.contactsModel.open(list,this.ifonlyTerminal ? 1 : 0);
        },/** 
         *  這個函式 元件端會用到,如果想修改函式名稱
   *  則將呼叫元件中  *this.$parent.setTerminals(list);*這行程式碼修改即可完成替換.
   *  也可以有其他方式,例如父容器給子容器傳遞函式等等.. 
   *  本人還是喜歡使用這樣的方式,畢竟能少些倆行程式碼,哈哈~~
   */
        setTerminals(terminals) {
            this.addForm.terminals = terminals;
            let terminalsInfo = "";
            for (let i = 0; i < terminals.length; i++) {
                let terminal = terminals[i];
                terminalsInfo += "『[" + terminal.terminalName + "]-[" + terminal.terminalNum + "]』";
            }
            this.terminalsInfo = terminalsInfo;
        },addTerminal() {
            let $this = this;
            let terminals = $this.addForm.terminals;

            let flag = true;
            for (let i = 0; i < terminals.length; i++) {
                let item = terminals[i];
                if (item.terminalNum == $this.terminalNum || item.serialNum == $this.terminalNum) {
                    flag = false;
                    $this.terminalNum = "";
                    $this.$message({
                        message: '當前終端已選擇,不用再次新增..',type: 'warning'
                    });
                    break;
                }
            }

            if (flag) {
                $this.$httpclient.get('/terminal/getTerminal',{
                    terminalNum: $this.terminalNum
                },function (res) {
                    if (res.success == true) {
                        let terminal = res.data;
                        terminals.push(terminal);
                        $this.terminalsInfo += "『[" + terminal.terminalName + "]-[" + terminal.terminalNum + "]』";
                        $this.terminalNum = "";
                    } else {
                        $this.$message({
                            message: '當前終端未找到,請認真檢視你是否輸入正確..',type: 'warning'
                        });
                    }
                });
            }

        }
    }
}
</script>

返回Json資料格式

{
 "success": true,"errorCode": null,"errorMsg": null,"data": [{
  "label": "\u6E56\u5317\u7701\u8003\u8BD5\u9662","id": "17","parentId": "17","nodeType": 0,"icon": null,"kids": [{
   "label": "\u9662\u529E\u516C\u5BA4","id": "23","kids": [{
    "label": "\u9662\u529E\u516C\u5BA4\u4E00\u5904","id": "24","parentId": "23","kids": null
   },{
    "label": "\u9662\u529E\u516C\u5BA4\u4E8C\u5904","id": "25","kids": null
   }]
  }]
 },{
  "label": "\u6E56\u5317\u77012020\u5E74\u9AD8\u8003\u5E94\u6025\u673A\u6784","id": "18","parentId": "18","kids": [{
   "label": "\u4E2D\u5FC3\u94F6\u884C","id": "A06E0C6FFB29198EE053437CA8C07A48","nodeType": 1,"icon": "el-icon-monitor","kids": null,"terminalType": 0,"terminalNum": "769025","serialNum": "7D1846124E640764"
  },{
   "label": "\u6B66\u6C49\u5E02\u4E00\u4E2D\u8003\u70B9\u5E94\u6025\u529E","id": "20","kids": [{
    "label": "\u6B66\u6C49\u4E00\u4E2D\u5E94\u6025\u6307\u6325\u4E2D\u5FC3","id": "22","parentId": "20","kids": null
   }]
  },{
   "label": "\u6B66\u6C49\u4E8C\u4E2D\u8003\u70B9\u5E94\u6025\u529E","id": "21","kids": null
  }]
 },{
  "label": "2020\u5E74\u7814\u7A76\u751F\u8003\u8BD5\u5E94\u6025\u673A\u6784","id": "19","parentId": "19","kids": [{
   "label": "\u738B\u7269\u6D41","id": "A0BA62D5108D1565E053437CA8C0C74B","icon": "el-icon-user","terminalType": 1,"terminalNum": "15010330199","serialNum": "15010330199"
  },{
   "label": "\u6B66\u6C49\u8003\u533A","id": "27","kids": [{
    "label": "\u6B66\u6C49\u4E00\u533A\u5E94\u6025\u529E","id": "28","parentId": "27",{
    "label": "\u6B66\u6C49\u4E8C\u533A\u5E94\u6025\u529E","id": "41",{
  "label": "\u6E56\u5317\u77012019\u5E74\u9AD8\u8003\u5E94\u6025","id": "26","parentId": "26","kids": null
 }]
}

後臺程式碼

package com.itechhero.app.module.edu.meet.reminder.service;

import com.github.pagehelper.PageHelper;
import com.itechhero.app.module.edu.common.model.TreeBean;
import com.itechhero.app.module.edu.meet.reminder.mapper.MeetReminderMapper;
import com.itechhero.app.module.edu.meet.reminder.mapper.ReminderTerminalLinkMapper;
import com.itechhero.app.module.edu.meet.reminder.model.MeetReminder;
import com.itechhero.app.module.edu.meet.reminder.model.ReminderTerminalLink;
import com.itechhero.app.module.edu.meet.reminder.model.TerminalTreeBean;
import com.itechhero.app.module.edu.terminal.mapper.TerminalMapper;
import com.itechhero.app.module.edu.terminal.model.Terminal;
import com.itechhero.app.module.edu.utils.exceptions.ReqException;
import com.itechhero.app.module.edu.utils.req.CMap;
import com.itechhero.app.module.edu.utils.req.PageData;
import com.itechhero.app.module.edu.utils.req.ResBean;
import com.itechhero.app.module.edu.xylink.api.reminder.ReminderApi;
import com.itechhero.app.module.edu.xylink.util.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;


/**
 * 預約會議業務類
 * 作者: 吳 波
 * 時間: 2020-03-09 17:28
 * 筆名: 那年秋天的茄子^^
 */
@Slf4j
@Service
@Transactional
public class MeetReminderService {


    @Autowired
    private MeetReminderMapper meetReminderMapper;

    @Autowired
    private TerminalMapper terminalMapper;

    @Autowired
    private ReminderTerminalLinkMapper reminderTerminalLinkmapper;

    /**
     * 獲取通訊終端樹
     * 作者: 吳 波
     * 時間: 2020-03-14 10:32
     * 筆名: 那年秋天的茄子^^
     */
    public ResBean getContacts(Integer ifonlyTerminal) {
        List<TreeBean> root = this.meetReminderMapper.getRootContacts();
        getKidContacts(root,ifonlyTerminal);
        return ResBean.success(root);
    }

    /**
     * 獲取終端通訊錄子節點
     * 作者: 吳 波
     * 時間: 2020-03-14 11:07
     * 筆名: 那年秋天的茄子^^
     */
    private void getKidContacts(List<TreeBean> root,Integer ifonlyTerminal) {
        log.info("\n{}",root);
        for (TreeBean treeBean : root) {
            List<TreeBean> kidsContacts = new ArrayList<>();

            /*終端*/
            List<TerminalTreeBean> terminalContacts = this.terminalMapper.getTerminalKidsForTree(treeBean.getId(),ifonlyTerminal);
            if (terminalContacts != null && terminalContacts.size() != 0) {
                kidsContacts.addAll(terminalContacts);
            }

            /*部門*/
            List<TreeBean> orgKidsContacts = this.meetReminderMapper.getKidsContacts(treeBean.getId());
            if (orgKidsContacts != null && orgKidsContacts.size() != 0) {
                kidsContacts.addAll(orgKidsContacts);
            }

            if (kidsContacts.size() != 0) {
                treeBean.setKids(kidsContacts);
            }

            getKidContacts(kidsContacts,ifonlyTerminal);
        }


    }

    /**
     * 獲取已選中的終端
     * 作者: 吳 波
     * 時間: 2020-03-14 21:36
     * 筆名: 那年秋天的茄子^^
     */
    public ResBean getTerminals(CMap param) {
        List<CMap> list=this.reminderTerminalLinkmapper.getTerminals(param);
        log.info("\n[獲取到預約會議呼叫的終端裝置]\n{}",list);
        return ResBean.success(list);
    }
}

Mapper.xml

<!-- 獲取通訊錄 -->
    <select id="getRootContacts" resultType="com.itechhero.app.module.edu.common.model.TreeBean">
        select
               ID||'' AS "id",YJJGMC AS "label",FBMID||'' as "parentId",0 as "nodeType" -- 為了前端判斷是否能選中用的
        FROM YJ_ZB_ZBJG
        WHERE 1=1 AND ID=FBMID
    </select>

    <!-- 獲取通訊錄子節點 -->
    <select id="getKidsContacts" resultType="com.itechhero.app.module.edu.common.model.TreeBean">
        select
            ID||'' AS "id",0 as "nodeType"
        FROM YJ_ZB_ZBJG
        WHERE 1=1
          AND ID||'' != #{parentId}
          AND FBMID||'' = #{parentId}
    </select>

    <!-- 獲取終端通訊錄TREE -->
    <select id="getTerminalKidsForTree" resultType="com.itechhero.app.module.edu.meet.reminder.model.TerminalTreeBean">
        SELECT
               ID as "id",TERMINAL_NAME as "label",TERMINAL_TYPE,TERMINAL_NUM,SERIAL_NUM,ORG_ID||'' as "parentId",1 as "nodeType",case TERMINAL_TYPE              -- 為前端設定圖示使用(為了方便直接寫資料庫,介意前端判斷)
                   when 0 then 'el-icon-monitor'
                   else 'el-icon-user' end as  "icon"
        FROM YJ_TERMINAL
        where 1=1
        and ORG_ID||'' =#{parentId}
        <if test="ifonlyTerminal==1">
            and TERMINAL_TYPE = 0
        </if>

</select>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。