Vue+ElementUI之Tree的使用方法
更新時(shí)間：2021年05月31日 09:59:52 作者：CnNoter
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI之Tree的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Vue+ElementUI之Tree的使用，供大家參考，具體內(nèi)容如下
前端代碼
<template>
<div>
<el-dialog title="終端通訊錄" :visible.sync="isOpen" class="el-dialog-mini">
<div class="forms-menu-con">
<!--
check-on-click-node:設(shè)置是否在選漢字的時(shí)候,復(fù)選框也選中
props:定義節(jié)點(diǎn)和自己提供字段的匹配(例:名稱對(duì)應(yīng)數(shù)據(jù)庫(kù)查詢出來(lái)的name屬性)
data:Tree中的數(shù)據(jù),其中字段可以自定義,可以多添加業(yè)務(wù)字段,再點(diǎn)擊的時(shí)候調(diào)用函數(shù)獲取該值
node-key:唯一,意味著選中節(jié)點(diǎn)的時(shí)候使用哪個(gè)字段作為唯一標(biāo)識(shí)
render-content:內(nèi)容渲染,如果想要在樹菜單上添加圖標(biāo)等樣式使用這個(gè)屬性,配置一個(gè)渲染函數(shù)即可
check-change:當(dāng)復(fù)選框狀態(tài)改變時(shí)候,觸發(fā)次函數(shù),這個(gè)主要用來(lái)做單選操作,和業(yè)務(wù)處理使用
show-checkbox:顯示復(fù)選框
highlight-current:高亮顯示選中節(jié)點(diǎn)
check-strictly:在顯示復(fù)選框的情況下,是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法,默認(rèn)為 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>關(guān) 閉
</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);
/** 該節(jié)點(diǎn)作用為永遠(yuǎn)單選*/
//$this.$refs.treeForm.setCheckedNodes([data]);
/** 該節(jié)點(diǎn)作用為多選*/
$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: '初始化失敗,網(wǎng)絡(luò)走丟啦...',
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="添加預(yù)約會(huì)議" :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="請(qǐng)輸入主題"></el-input>
</el-form-item>
</div>
</div>
<div class="el-colum-xs12">
<div class="form-group el-display">
<el-form-item label="開始時(shí)間" 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="選擇會(huì)議開始時(shí)間"></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="會(huì)議時(shí)長(zhǎng)" prop="meetTime">
<el-select v-model="addForm.meetTimeHour" placeholder="請(qǐng)選擇" 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">小時(shí)</span>
<el-select v-model="addForm.meetTimeMin" placeholder="請(qǐng)選擇" 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="會(huì)議詳情" prop="meetDetails" style="width:700px;">
<el-input type="textarea" :rows="3" v-model="addForm.meetDetails" placeholder="請(qǐng)輸入會(huì)議概要信息..."></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="參會(huì)人員" prop="noselect" style="width:700px;">
<el-input v-model="terminalNum" placeholder="請(qǐng)輸入手機(jī)號(hào)、終端號(hào)、終端序列號(hào)點(diǎn)擊『確定』按鈕添加"></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">(本次選擇結(jié)果，將只包含終端，不包含用戶)</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="參會(huì)人員" prop="name" style="width:700px;">
<el-input v-model="terminalNum" placeholder="請(qǐng)輸入手機(jī)號(hào)、終端號(hào)、終端序列號(hào)點(diǎn)擊『確定』按鈕添加"></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">(本次選擇結(jié)果，將只包含終端，不包含用戶)</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="會(huì)議設(shè)置" prop="sex">
<el-checkbox-group v-model="ifAutoRecord">
<el-checkbox label="A"> <span style="color:#44b5ff">會(huì)議開始時(shí)自動(dòng)呼叫參會(huì)終端</span></el-checkbox><br>
</el-checkbox-group>
<el-checkbox-group v-model="ifAutoCall">
<el-checkbox label="B"> <span style="color:#44b5ff">自動(dòng)錄制</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="選擇云會(huì)議室" prop="meetRoomId">
<el-form-item label="" style="width:200px;">
<el-select v-model="addForm.meetRoomId" placeholder="請(qǐng)選擇會(huì)議室">
<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>關(guān) 閉
</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('請(qǐng)選擇會(huì)議時(shí)長(zhǎng)'));
}
callback();
}
let terminalsValid = function (rule, value, callback) {
if ($this.addForm.terminals.length == 0) {
callback(new Error('請(qǐng)選擇參會(huì)終端/用戶'));
}
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: '請(qǐng)輸入會(huì)議主題',
trigger: 'blur'
}],
meetRoomId: [{
required: true,
message: '請(qǐng)選擇云會(huì)議室',
trigger: 'blur'
}],
startTime: [{
required: true,
message: '請(qǐng)選擇開始時(shí)間',
trigger: 'blur'
}],
meetDetails: [{
required: true,
message: '請(qǐng)輸入會(huì)議詳情',
trigger: 'blur'
}],
meetTime: [{
validator: meetTimeTimeValid,
trigger: 'change'
}],
terminals: [{
validator: terminalsValid,
trigger: 'change'
}]
},
startTimeValid: {
disabledDate: (time) => {
return time.getTime() <= Date.now();
}
}
}
},
mounted() {
console.log("歡迎使用應(yīng)急平臺(tái)-預(yù)約會(huì)議...");
},
methods: {
open() {
let $this = this;
$this.$httpclient.get("/reminder/getMeetRooms", {}, function (res) {
if (res.success == true) {
$this.meetRooms = res.data;
} else {
$this.$message({
message: '云會(huì)議室沒找到,網(wǎng)絡(luò)走丟啦...',
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: '[網(wǎng)絡(luò)忙],' + 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);
},
/**
* 這個(gè)函數(shù) 組件端會(huì)用到,如果想修改函數(shù)名稱
* 則將調(diào)用組件中 *this.$parent.setTerminals(list);*這行代碼修改即可完成替換.
* 也可以有其他方式,例如父容器給子容器傳遞函數(shù)等等..
* 本人還是喜歡使用這樣的方式,畢竟能少些倆行代碼,哈哈~~
*/
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: '當(dāng)前終端已選擇,不用再次添加..',
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: '當(dāng)前終端未找到,請(qǐng)認(rèn)真查看你是否輸入正確..',
type: 'warning'
});
}
});
}
}
}
}
</script>
返回Json數(shù)據(jù)格式
{
"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
}]
}
后臺(tái)代碼
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;
/**
* 預(yù)約會(huì)議業(yè)務(wù)類
* 作者: 吳 波
* 時(shí)間: 2020-03-09 17:28
* 筆名: 那年秋天的茄子^^
*/
@Slf4j
@Service
@Transactional
public class MeetReminderService {
@Autowired
private MeetReminderMapper meetReminderMapper;
@Autowired
private TerminalMapper terminalMapper;
@Autowired
private ReminderTerminalLinkMapper reminderTerminalLinkmapper;
/**
* 獲取通訊終端樹
* 作者: 吳 波
* 時(shí)間: 2020-03-14 10:32
* 筆名: 那年秋天的茄子^^
*/
public ResBean getContacts(Integer ifonlyTerminal) {
List<TreeBean> root = this.meetReminderMapper.getRootContacts();
getKidContacts(root, ifonlyTerminal);
return ResBean.success(root);
}
/**
* 獲取終端通訊錄子節(jié)點(diǎn)
* 作者: 吳 波
* 時(shí)間: 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);
}
}
/**
* 獲取已選中的終端
* 作者: 吳 波
* 時(shí)間: 2020-03-14 21:36
* 筆名: 那年秋天的茄子^^
*/
public ResBean getTerminals(CMap param) {
List<CMap> list=this.reminderTerminalLinkmapper.getTerminals(param);
log.info("\n[獲取到預(yù)約會(huì)議呼叫的終端設(shè)備]\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>
<!-- 獲取通訊錄子節(jié)點(diǎn) -->
<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 -- 為前端設(shè)定圖標(biāo)使用(為了方便直接寫數(shù)據(jù)庫(kù),介意前端判斷)
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
組件間通信簡(jiǎn)單來(lái)說(shuō)就是組件間進(jìn)行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫?，就是通訊的一種方式，你把話說(shuō)給我聽，我把話說(shuō)給你聽，說(shuō)的話就是數(shù)據(jù)。電話就是通訊方式的一種。無(wú)論是 Vue 還是 React ，都得進(jìn)行組件間通信。2021-05-05
Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解
這篇文章主要為大家介紹了Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法
這篇文章主要介紹了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法,結(jié)合實(shí)例形式分析了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
無(wú)論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個(gè)最好用的Vue開源庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
Vue使用video標(biāo)簽實(shí)現(xiàn)視頻播放
這篇文章主要為大家詳細(xì)介紹了Vue使用video標(biāo)簽實(shí)現(xiàn)視頻播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
解決Vue 瀏覽器后退無(wú)法觸發(fā)beforeRouteLeave的問(wèn)題
這篇文章主要介紹了解決Vue 瀏覽器后退無(wú)法觸發(fā)beforeRouteLeave的問(wèn)題,需要的朋友可以參考下2017-12-12
分享12個(gè)Vue開發(fā)中的性能優(yōu)化小技巧(實(shí)用!)
一般來(lái)說(shuō),你不需要太關(guān)心vue的運(yùn)行時(shí)性能,它在運(yùn)行時(shí)非常快,但付出的代價(jià)是初始化時(shí)相對(duì)較慢,下面這篇文章主要給大家分享介紹了十二個(gè)Vue開發(fā)中的性能優(yōu)化小技巧,需要的朋友可以參考下2022-02-02
今天小編就為大家分享一篇對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
關(guān)于vue-treeselect綁值、回顯等常見問(wèn)題的總結(jié)
這篇文章主要介紹了關(guān)于vue-treeselect綁值、回顯等常見問(wèn)題的總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07