elementui el-tree,element-ui tree

　　这篇文章主要为大家详细介绍了某视频剪辑软件元素之树的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　某视频剪辑软件元素之树的使用，供大家参考，具体内容如下

前端代码

　　模板

　　差异

　　el-dialog title=终端通讯录：可见。sync=已打开 class= El-dialog-mini

　　div class=窗体-菜单-图标

　　！-

　　点击检查节点：设置是否在选汉字的时候，复选框也选中

　　道具：定义节点和自己提供字段的匹配（例：名称对应数据库查询出来的名字属性)

　　数据：树中的数据，其中字段可以自定义，可以多添加业务字段，再点击的时候调用函数获取该值

　　节点键：唯一，意味着选中节点的时候使用哪个字段作为唯一标识

　　呈现内容：内容渲染，如果想要在树菜单上添加图标等样式使用这个属性，配置一个渲染函数即可

　　检查-更改：当复选框状态改变时候，触发次函数，这个主要用来做单选操作，和业务处理使用

　　显示复选框：显示复选框

　　突出显示-当前：高亮显示选中节点

　　严格检查：在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为错误的

　　El-tree:data= treeData :props= tree props :check-strict= true node-key= id ref= tree form :render-content= render content @ check-change= handle click show-checkbox highlight-current class= add tree style= height:275 px；

　　/el-tree

　　el-col class=窗体-搜索栏-中心

　　el-button @click=提交

　　style= font-size:15px；/i确定

　　/el-button

　　el-button @click=关闭

　　style= font-size:16px；/i关闭

　　/el-button

　　/el-col

　　/div

　　/el-dialog

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　isOpen:假，

　　ifonlyTerminal: 1，

　　treeData: []，

　　treeProps: {

　　标签:"标签",

　　孩子："孩子",

　　已禁用：此.已禁用Fn

　　}

　　方法：{

　　禁用Fn(数据，节点){

　　返回数据。nodetype==0；

　　手柄点击(数据，选中，节点){

　　让$这个=这个

　　如果（选中){

　　console.log(数据);

　　/** 该节点作用为永远单选*/

　　//$这个参考文献。树形。setcheckednodes([data])；

　　/** 该节点作用为多选*/

　　$这个参考文献。树形。set checked([data])；

　　}

　　renderContent(h，{

　　节点，

　　数据，

　　商店

　　}) {

　　返回（

　　 span class=自定义树节点

　　跨度

　　i class={data.icon} /i

　　{ data.label }

　　/span

　　);

　　打开（选择，ifonlyTerminal) {

　　让$这个=这个

　　$这个。treedata=[]；

　　$这个。ifonlyTerminal=ifonlyTerminal

　　$这个http客户端。get(/reminder/getTerminalContacts ，{

　　ifonlyTerminal:$这个。ifonlyTerminal

　　},函数(资源){

　　if (res.success==true) {

　　$这个。treedata=RES . data

　　$这个treeForm.setCheckedKeys(选择);

　　}否则{

　　$这个消息({

　　消息：初始化失败，网络走丢啦.,

　　类型："错误"

　　});

　　}

　　});

　　this.isOpen=true

　　提交(){

　　让selectionNode=this .$参考文献。树形。getcheckednodes()；

　　let list=[]；

　　对于(设I=0；iselectionNode.lengthi ){

　　let item=选择节点[I]；

　　list.push({

　　id:item.id，

　　终端名称：项目.标签，

　　terminalNum:item.terminalNum，

　　序列号：item.serialNum，

　　终端类型：item.terminalType

　　});

　　}

　　console.log(列表);

　　这个$家长。setterminals(列表)；

　　这个。close()；

　　close() {

　　this.isOpen=false

　　}

　　/脚本

引用组件

　　模板

　　差异

　　el-dialog title=添加预约会议：可见。sync= addModelOpen class= El-dialog-大型对话框类

　　div class=窗体-菜单3月10日

　　div class=窗体-菜单-标题

　　跨度

　　蔡丹FLT-l style= color:# 2681 EC；字体大小：20px上边距：-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-表单-项目标签=主题prop= title style= width:1050 px；

　　El-input v-model= addform。标题 placeholder=请输入主题/el-input

　　/El-表单-项目

　　/div

　　div class=el-colum-xs12

　　div class=form-group el-display

　　El-表单-项目标签=开始时间prop= start time style= margin-top:20px；宽度：700像素；

　　El-date-picker:picker-options=开始时间有效 @ change=新有效 v-model= addform。开始时间 type= datetime format= yyyy-MM-DD hh:MM value-format= yyyy-MM-DD hh:MM placeholder=选择会议开始时间/El-日期选择器

　　/El-表单-项目

　　/div

　　div class= El-colum-xs12 style= margin-top:20px；

　　div class=窗体-组

　　El-表单-项目标签=会议时长prop=开会时间

　　El-select v-model= addform。会议时间小时 placeholder=请选择style= width:100px；

　　埃尔选项标签=0 值=0/el选项

　　埃尔选项标签=1 值=1/el选项

　　埃尔选项标签=2 值=2/el选项

　　埃尔选项标签=3 值=3/el选项

　　埃尔选项标签=4 值=4/el选项

　　埃尔选项标签=5 值=5/el选项

　　埃尔选项标签=6 值=6/el选项

　　/el-select

　　span style=margin:0px 10px 小时/span

　　El-select v-model= addform。会议时间最小值 placeholder=请选择style= width:100px；

　　埃尔选项标签=0 值=0/el选项

　　埃尔选项标签=10 值=10/el选项

　　埃尔选项标签=20 值=20/el选项

　　埃尔选项标签=30 值=30/el选项

　　埃尔选项标签=45 值=45/el选项

　　埃尔选项标签=50 值=50/el选项

　　/el-select

　　span style=margin:0px 10px 分钟/span

　　/El-表单-项目

　　/div

　　div class= El-colum-xs12 style= margin-top:20px；

　　div class=窗体-组

　　El-表单-项目标签=会议详情prop=满足细节 style= width:700 px；

　　El-input type= textarea :rows= 3 v-model= addform。会议详细信息 placeholder=请输入会议概要信息./el-input

　　/El-表单-项目

　　/div

　　div class= El-colum-xs12 block style= margin-top:20px；

　　div class=form-group el-display

　　El-表单-项目标签=参会人员prop= no select style= width:700 px；

　　El-输入垂直模型=终端编号占位符=请输入手机号、终端号、终端序列号点击『确定』按钮添加/el-input

　　div class=" form-search " style=" display:inline "

　　El-button @ click=添加终端 I class= El-icon-document-checked style= font-size:16px；边距-顶部：6px/i确定/el-button

　　El-button @ click= openContactsModel I class= El-icon-plus style= font-size:16px；上边距：6px/i从通讯录添加/取消/el-button

　　/div

　　El-checkbox-group v-model= ifonlyTerminal

　　埃尔-复选框标签=A 仅终端span style=color:#44b5ff (本次选择结果，将只包含终端，不包含用户)/span/El-复选框

　　/el-checkbox-group

　　/El-表单-项目

　　El-表单-项目标签=已选终端/用户prop= terminals style= width:700 px；

　　El-input type= textarea class= textarea v-model= terminalsInfo readonly= readonly /El-input

　　/El-表单-项目

　　/div

　　！-div class= El-colum-xs12 block style= margin-top:20px；

　　div class=form-group el-display

　　El-表单-项目标签=参会人员prop= name style= width:700 px；

　　El-输入垂直模型=终端编号占位符=请输入手机号、终端号、终端序列号点击『确定』按钮添加/el-input

　　div class=" form-search " style=" display:inline "

　　El-button @ click=添加终端 I class= El-icon-document-checked style= font-size:16px；边距-顶部：6px/i确定/el-button

　　El-button @ click= openContactsModel I class= El-icon-plus style= font-size:16px；上边距：6px/i从通讯录添加/取消/el-button

　　/div

　　El-checkbox-group v-model= ifonlyTerminal

　　埃尔-复选框标签=A 仅终端span style=color:#44b5ff (本次选择结果，将只包含终端，不包含用户)/span/El-复选框

　　/el-checkbox-group

　　El-input type= textarea class= textarea v-model= terminalsInfo /El-input

　　/El-表单-项目

　　/div

　　/div -

　　div class= El-colum-xs12 block style= margin-top:20px；

　　div class=窗体-组

　　El-表单-项目标签=会议设置道具=性

　　El-checkbox-group v-model= ifAutoRecord

　　埃尔-复选框label= A span style= color:# 44 b5 ff 会议开始时自动呼叫参会终端/span/El-复选框英国铁路公司

　　/el-checkbox-group

　　El-checkbox-group v-model= ifAutoCall

　　埃尔-复选框label= B span style= color:# 44 b5 ff 自动录制/span/El-复选框

　　/el-checkbox-group

　　/El-表单-项目

　　/div

　　div class= El-colum-xs12 block style= margin-top:20px；

　　div class=窗体-组

　　El-表单-项目标签=选择云会议室prop=meetRoomId

　　El-form-item label= style= width:200 px；

　　El-select v-model= addform。meetroomid placeholder=请选择会议室

　　el-option v-for=会议室中的项目：key= item。 id :label= item。“房间名称”:值=“项目。id /El选项

　　/el-select

　　/El-表单-项目

　　/div

　　div class= El-colum-xs12 block style= margin-top:20px；

　　div class=窗体-组

　　el-col class=窗体-搜索栏-中心

　　El-button @ click= submit :disabled=被禁用

　　style= font-size:15px；/i保存

　　/el-button

　　el-button @click=关闭

　　style= font-size:16px；/i关闭

　　/el-button

　　br /br /

　　/el-col

　　/div

　　/el格式

　　/el-row

　　/div

　　/el-dialog

　　联系人ref=contactsModel/contacts

　　/div

　　/模板

　　风格。对话类.el-dialog {

　　高度：690像素

　　top:50%；

　　边距-顶部：-369像素！重要；

　　}。对话类.埃尔对话el-dialog__body {

　　高度：670像素

　　}

　　/风格

　　脚本

　　从" @/common/util.js "导入dateUtil

　　从"@/组件/会议/提醒/联系人"导入联系人；

　　导出默认值{

　　组件：{

　　联系人

　　data() {

　　让$这个=这个

　　设meetTimeTimeValid=function(规则，值，回调){

　　如果(($这个。addform。meetime hour $ this。addform。meetime min)==0){

　　回调（新错误(请选择会议时长));

　　}

　　回调();

　　}

　　设terminalsValid=function(规则，值，回调){

　　如果($这个。addform。终端。长度==0){

　　回调（新错误(请选择参会终端/用户));

　　}

　　回调();

　　}

　　返回{

　　addModelOpen: false，

　　terminalNum: ，

　　ifonlyTerminal: false，

　　终端信息： ,

　　ifAutoRecord:假，

　　ifAutoCall: false，

　　isDisabled: false，

　　会议室：[],

　　addForm: {

　　标题： ,

　　meetRoomId:" "，

　　开始时间： ,

　　房间号： ,

　　会议时间小时：" 0 "，

　　会议时间最小值： 20 ,

　　结束时间： ,

　　会议详细信息："",

　　ifAutoRecord:" "，

　　如果自动呼叫： ,

　　会议密码："",

　　控制密码： ,

　　终端：[]

　　规则：{

　　标题：[{

　　必填：真，

　　消息：请输入会议主题，

　　触发器："模糊"

　　}],

　　meetRoomId: [{

　　必填：真，

　　消息：请选择云会议室，

　　触发器："模糊"

　　}],

　　开始时间：[{

　　必填：真，

　　消息：请选择开始时间，

　　触发器："模糊"

　　}],

　　会议详细信息：[{

　　必填：真，

　　消息：请输入会议详情，

　　触发器："模糊"

　　}],

　　会议时间：[{

　　验证器：meetTimeTimeValid，

　　触发器："改变"

　　}],

　　终端：[{

　　验证器：terminalsValid，

　　触发器："改变"

　　}]

　　开始时间有效：{

　　禁用日期：(时间)={

　　返回时间。gettime()=date。now()；

　　}

　　已安装(){

　　console.log(欢迎使用应急平台-预约会议.);

　　方法：{

　　open() {

　　让$这个=这个

　　$这个http客户端。get(/reminder/getMeetRooms ，{}，function (res) {

　　if (res.success==true) {

　　$这个。meetingrooms=RES . data

　　}否则{

　　$这个消息({

　　消息：云会议室没找到，网络走丢啦.,

　　类型："警告"

　　});

　　}

　　});

　　this.addModelOpen=true

　　close() {

　　this.addModelOpen=false

　　newValid(){

　　这个refs[addForm].验证字段(“开始时间”)；

　　提交(){

　　让$这个=这个

　　$ this.btnStatus=true

　　$这个. refs.addForm.validate((有效)={

　　if (valid $this.btnStatus) {

　　$这个。addform。ifautorecord=$ this。ifautorecord？1 : 0;

　　$这个。addform。ifautocall=$ this。ifautocall？1 : 0;

　　对于(设I=0；我$这个。会议。长度；i ) {

　　让item=$ this。会议[I]；

　　如果(项。id==$ this。addform。meetroomid){

　　$这个。addform。房间号=项目。房间号；

　　}

　　$这个. httpclient.post(/reminder ，$this.addForm，function (res) {

　　$ this.btnStatus=false

　　if (res.success==true) {

　　$这个$家长。search()；

　　$这个。close()；

　　}否则{

　　$这个消息({

　　消息：[网络忙],

　　 + 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("\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 AS "id",

　　 YJJGMC AS "label",

　　 FBMID as "parentId",

　　 0 as "nodeType" -- 为了前端判断是否能选中用的

　　 FROM YJ_ZB_ZBJG

　　 WHERE 1=1 AND ID=FBMID

　　 </select>

　　 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>

　　 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}

　　 and TERMINAL_TYPE = 0

　　 </if>

　　</select>

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

前端代码

引用组件

后台代码

相关文章阅读