Vue+ElementUI之Tree的使用方法
更新時間：2021年05月31日 09:59:52 作者：CnNoter
這篇文章主要為大家詳細介紹了Vue+ElementUI之Tree的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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:設置是否在選漢字的時候,復選框也選中
props:定義節(jié)點和自己提供字段的匹配(例:名稱對應數(shù)據(jù)庫查詢出來的name屬性)
data:Tree中的數(shù)據(jù),其中字段可以自定義,可以多添加業(yè)務字段,再點擊的時候調(diào)用函數(shù)獲取該值
node-key:唯一,意味著選中節(jié)點的時候使用哪個字段作為唯一標識
render-content:內(nèi)容渲染,如果想要在樹菜單上添加圖標等樣式使用這個屬性,配置一個渲染函數(shù)即可
check-change:當復選框狀態(tài)改變時候,觸發(fā)次函數(shù),這個主要用來做單選操作,和業(yè)務處理使用
show-checkbox:顯示復選框
highlight-current:高亮顯示選中節(jié)點
check-strictly:在顯示復選框的情況下,是否嚴格的遵循父子不互相關聯(liá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>關 閉
</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é)點作用為永遠單選*/
//$this.$refs.treeForm.setCheckedNodes([data]);
/** 該節(jié)點作用為多選*/
$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)絡走丟啦...',
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: '云會議室沒找到,網(wǎng)絡走丟啦...',
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)絡忙],' + 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);
},
/**
* 這個函數(shù) 組件端會用到,如果想修改函數(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: '當前終端已選擇,不用再次添加..',
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數(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
}]
}
后臺代碼
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è)務類
* 作者: 吳 波
* 時間: 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);
}
/**
* 獲取終端通訊錄子節(jié)點
* 作者: 吳 波
* 時間: 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="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é)點 -->
<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ù)據(jù)庫,介意前端判斷)
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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Flutter部件內(nèi)部狀態(tài)管理小結之實現(xiàn)Vue的v-model功能
本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結，從部件的基礎開始，到部件的狀態(tài)管理，并且在過程中實現(xiàn)一個類似 Vue 的 v-model 的功能，感興趣的朋友跟隨小編一起看看吧2019-06-06
el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章通過實例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3 的響應式和以前有什么區(qū)別，Proxy 無敵？
這篇文章主要介紹了Vue3 的響應式和以前有什么區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
今天小編就為大家分享一篇vue-element-admin 菜單標簽失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
VUE實現(xiàn)一個Flappy Bird游戲的示例代碼
這篇文章主要介紹了VUE實現(xiàn)一個Flappy Bird的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
本篇文章主要介紹了詳解vue-cli 腳手架項目-package.json，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue中$refs的用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-06-06