Vue+ElementUIのTreeの使い方


Vue+Element UI 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 @click="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>
                                        </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">
                                            <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>

                                </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></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, value, 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: '       ',
                    trigger: 'blur'
                }],
                startTime: [{
                    required: true,
                    message: '       ',
                    trigger: 'blur'
                }],
                meetDetails: [{
                    required: true,
                    message: '       ',
                    trigger: 'blur'
                }],
                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",
   "parentId": "17",
   "nodeType": 0,
   "icon": null,
   "kids": [{
    "label": "\u9662\u529E\u516C\u5BA4\u4E00\u5904",
    "id": "24",
    "parentId": "23",
    "nodeType": 0,
    "icon": null,
    "kids": null
   }, {
    "label": "\u9662\u529E\u516C\u5BA4\u4E8C\u5904",
    "id": "25",
    "parentId": "23",
    "nodeType": 0,
    "icon": null,
    "kids": null
   }]
  }]
 }, {
  "label": "\u6E56\u5317\u77012020\u5E74\u9AD8\u8003\u5E94\u6025\u673A\u6784",
  "id": "18",
  "parentId": "18",
  "nodeType": 0,
  "icon": null,
  "kids": [{
   "label": "\u4E2D\u5FC3\u94F6\u884C",
   "id": "A06E0C6FFB29198EE053437CA8C07A48",
   "parentId": "18",
   "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",
   "parentId": "18",
   "nodeType": 0,
   "icon": null,
   "kids": [{
    "label": "\u6B66\u6C49\u4E00\u4E2D\u5E94\u6025\u6307\u6325\u4E2D\u5FC3",
    "id": "22",
    "parentId": "20",
    "nodeType": 0,
    "icon": null,
    "kids": null
   }]
  }, {
   "label": "\u6B66\u6C49\u4E8C\u4E2D\u8003\u70B9\u5E94\u6025\u529E",
   "id": "21",
   "parentId": "18",
   "nodeType": 0,
   "icon": null,
   "kids": null
  }]
 }, {
  "label": "2020\u5E74\u7814\u7A76\u751F\u8003\u8BD5\u5E94\u6025\u673A\u6784",
  "id": "19",
  "parentId": "19",
  "nodeType": 0,
  "icon": null,
  "kids": [{
   "label": "\u738B\u7269\u6D41",
   "id": "A0BA62D5108D1565E053437CA8C0C74B",
   "parentId": "19",
   "nodeType": 1,
   "icon": "el-icon-user",
   "kids": null,
   "terminalType": 1,
   "terminalNum": "15010330199",
   "serialNum": "15010330199"
  }, {
   "label": "\u6B66\u6C49\u8003\u533A",
   "id": "27",
   "parentId": "19",
   "nodeType": 0,
   "icon": null,
   "kids": [{
    "label": "\u6B66\u6C49\u4E00\u533A\u5E94\u6025\u529E",
    "id": "28",
    "parentId": "27",
    "nodeType": 0,
    "icon": null,
    "kids": null
   }, {
    "label": "\u6B66\u6C49\u4E8C\u533A\u5E94\u6025\u529E",
    "id": "41",
    "parentId": "27",
    "nodeType": 0,
    "icon": null,
    "kids": null
   }]
  }]
 }, {
  "label": "\u6E56\u5317\u77012019\u5E74\u9AD8\u8003\u5E94\u6025",
  "id": "26",
  "parentId": "26",
  "nodeType": 0,
  "icon": null,
  "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("
{}", 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("
[ ]
{}",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",
            YJJGMC AS "label",
            FBMID||'' as "parentId",
            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>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。