文章詳情頁

Vue+ElementUI之Tree的使用方法

瀏覽：2日期：2022-09-29 10:32:14

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. idea導入maven項目的方法2. idea設置代碼格式化的方法步驟3. Spring+Http請求+HttpClient實現傳參4. PHP處理Ajax請求與Ajax跨域5. java構建OAuth2授權服務器6. asp文件如何打開7. ASP 信息提示函數并作返回或者轉向8. Java中的== 和equals()有什么方法實例9. PHP中為什么使用file_get_contents("php://input")接收微信通知10. IntelliJ IDEA 2020.3通過重命名內聯重構代碼

排行榜

					
					idea導入maven項目的方法
idea設置代碼格式化的方法步驟
java構建OAuth2授權服務器
Java中的== 和equals()有什么方法實例
ASP 信息提示函數并作返回或者轉向
asp文件如何打開
IntelliJ IDEA 2020.3.3現已發布!新增“受信任項目”功能
PHP中為什么使用file_get_contents("php://input")接收微信通知
IntelliJ IDEA 2020.3通過重命名內聯重構代碼
PHP處理Ajax請求與Ajax跨域
Spring+Http請求+HttpClient實現傳參
				