文章详情页

Vue+ElementUI之Tree的使用方法

【字号：大中小】日期：2022-09-29 10:32:14浏览：3作者：猪猪

Vue+ElementUI之Tree的使用，供大家参考，具体内容如下

前端代码

<template> <div><el-dialog :visible.sync='isOpen' class='el-dialog-mini'> <div class='forms-menu-con'><el-tree :data='treeData' :props='treeProps' :check-strictly='true' node-key='id' ref='treeForm' :render-content='renderContent' @check-change='handleClick' show-checkbox highlight-current style='height:275px;'></el-tree><el-col class='form-search colum-center'> <el-button @click='submit'><i style='font-size:15px;'></i>确定 </el-button> <el-button @click='close'><i 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 ><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 :visible.sync='addModelOpen' class='el-dialog-large dialogClass'> <div class='forms-menu mar-10'><div class='forms-menu-tit'> <span><i 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 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 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 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 style='display: inline'> <el-button @click='addTerminal'><i style='font-size:16px;margin-top:6px;'></i>确定</el-button> <el-button @click='openContactsModel'><i 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' v-model='terminalsInfo' readonly='readonly'></el-input> </el-form-item></div> </div>  <div 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 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 style='margin-top:20px;'><div class='form-group'> <el-col class='form-search colum-center'><el-button @click='submit' :disabled='isDisabled'> <i style='font-size:15px;'></i>保存</el-button><el-button @click='close'> <i 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': 'u6E56u5317u7701u8003u8BD5u9662', 'id': '17', 'parentId': '17', 'nodeType': 0, 'icon': null, 'kids': [{ 'label': 'u9662u529Eu516Cu5BA4', 'id': '23', 'parentId': '17', 'nodeType': 0, 'icon': null, 'kids': [{ 'label': 'u9662u529Eu516Cu5BA4u4E00u5904', 'id': '24', 'parentId': '23', 'nodeType': 0, 'icon': null, 'kids': null }, { 'label': 'u9662u529Eu516Cu5BA4u4E8Cu5904', 'id': '25', 'parentId': '23', 'nodeType': 0, 'icon': null, 'kids': null }] }] }, { 'label': 'u6E56u5317u77012020u5E74u9AD8u8003u5E94u6025u673Au6784', 'id': '18', 'parentId': '18', 'nodeType': 0, 'icon': null, 'kids': [{ 'label': 'u4E2Du5FC3u94F6u884C', 'id': 'A06E0C6FFB29198EE053437CA8C07A48', 'parentId': '18', 'nodeType': 1, 'icon': 'el-icon-monitor', 'kids': null, 'terminalType': 0, 'terminalNum': '769025', 'serialNum': '7D1846124E640764' }, { 'label': 'u6B66u6C49u5E02u4E00u4E2Du8003u70B9u5E94u6025u529E', 'id': '20', 'parentId': '18', 'nodeType': 0, 'icon': null, 'kids': [{ 'label': 'u6B66u6C49u4E00u4E2Du5E94u6025u6307u6325u4E2Du5FC3', 'id': '22', 'parentId': '20', 'nodeType': 0, 'icon': null, 'kids': null }] }, { 'label': 'u6B66u6C49u4E8Cu4E2Du8003u70B9u5E94u6025u529E', 'id': '21', 'parentId': '18', 'nodeType': 0, 'icon': null, 'kids': null }] }, { 'label': '2020u5E74u7814u7A76u751Fu8003u8BD5u5E94u6025u673Au6784', 'id': '19', 'parentId': '19', 'nodeType': 0, 'icon': null, 'kids': [{ 'label': 'u738Bu7269u6D41', 'id': 'A0BA62D5108D1565E053437CA8C0C74B', 'parentId': '19', 'nodeType': 1, 'icon': 'el-icon-user', 'kids': null, 'terminalType': 1, 'terminalNum': '15010330199', 'serialNum': '15010330199' }, { 'label': 'u6B66u6C49u8003u533A', 'id': '27', 'parentId': '19', 'nodeType': 0, 'icon': null, 'kids': [{ 'label': 'u6B66u6C49u4E00u533Au5E94u6025u529E', 'id': '28', 'parentId': '27', 'nodeType': 0, 'icon': null, 'kids': null }, { 'label': 'u6B66u6C49u4E8Cu533Au5E94u6025u529E', 'id': '41', 'parentId': '27', 'nodeType': 0, 'icon': null, 'kids': null }] }] }, { 'label': 'u6E56u5317u77012019u5E74u9AD8u8003u5E94u6025', '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@Transactionalpublic 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 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_ZBJGWHERE 1=1 AND ID=FBMID </select>  <select 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_ZBJGWHERE 1=1 AND ID||’’ != #{parentId} AND FBMID||’’ = #{parentId} </select>  <select 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_TERMINALwhere 1=1and ORG_ID||’’ =#{parentId}<if test='ifonlyTerminal==1'> and TERMINAL_TYPE = 0</if></select>

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

Vue

上一条：Vue中ElementUI分页组件Pagination的使用方法下一条：Vue必学知识点之forEach()的使用

相关文章：

1. 将properties文件的配置设置为整个Web应用的全局变量实现方法2. asp画中画广告插入在每篇文章中的实现方法3. 在Asp.net core项目中使用WebSocket4. PHP的FTP学习（一）5. ASP.NET MVC使用异步Action的方法6. XML入门精解之结构与语法7. PHP字符串前后字符或空格删除方法介绍8. JavaScript实现组件化和模块化方法详解9. 利用FastReport传递图片参数在报表上展示签名信息的实现方法10. SpringMVC+Jquery实现Ajax功能

排行榜

					
					将properties文件的配置设置为整个Web应用的全局变量实现方法
PHP的FTP学习（一）
PHP字符串前后字符或空格删除方法介绍
XML入门精解之结构与语法
ASP.NET MVC使用异步Action的方法
asp画中画广告插入在每篇文章中的实现方法
在Asp.net core项目中使用WebSocket
JavaScript实现组件化和模块化方法详解
SpringMVC+Jquery实现Ajax功能
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
Ajax实现表格中信息不刷新页面进行更新数据
				

热门标签