溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue實現的樹形結構加多選框。分享給大家供大家參考，具體如下：
前面說了如何用遞歸組件來寫vue樹形結構，寫了樹形結構還要在前面加多選框，然后往數組里push選項，并在左邊顯示出來，然后左邊進行拖拽排序，拖拽排序上一篇文章我已經介紹過了，在這我就不介紹了，如何用阿里巴巴矢量圖標庫我也有相關文章，也不介紹了，本節主要介紹vue樹形結構加多選框，并實現一定的邏輯，比如全選，單選，全選和單選之間的聯動
先看下目錄結構
下面我直接貼下代碼
首先是pages文件夾中tree.vue頁面中引用組件
下面是tree.vue的代碼
<template>
<div class = "loginModuel">
<Tree :menus = "menus" :depth = "depth" @selectItem = "selectItem" :actId = "actId" @checkItem = "checkItem"></Tree>
</div>
</template>
<script src = "./index.js"></script>
<style lang = "scss" scoped src = "./index.scss"></style>
然后是tree.vue引入的index.js的代碼
import Tree from '../../components/tree/tree';
import axios from 'axios';
export default{
data(){
return{
msg:"這是登錄頁面",
depth:0,
menus:[],
actId:"",
}
},
components:{
Tree
},
methods:{
//用ajax獲取數據
getData(){
return axios.get('/static/json/data.json');
},
// 調用ajax函數
async getTree(){
var last = await this.getData();
if(last.data.code == 1){
this.menus = last.data.data;
//在每一項中添加selectArr和show
this.addShow(this.menus);
}
},
//遞歸函數在每一項中添加selectArr和show
addShow(arr){
for(var i = 0; i < arr.length;i++){
this.$set(arr[i],"show",true);
this.$set(arr[i],"selectArr",[]);
if(arr[i].userList && arr[i].userList.length > 0){
this.addShow(arr[i].userList)
}
}
},
//點擊箭頭使樹展開收縮
selectItem(data){
if(data.userList && data.userList.length > 0){
//如果此項下有userList且length大于0，則切換展開與折疊狀態
data.show = !data.show;
}else{
//如果此項下沒有userList或length等于0，則將選中的id賦值給actId
this.actId = data.id;
}
},
//進行多選勾選
checkItem(data){
if(data.selectArr.length > 0){
//如果這一項的selectArr有值，說明是被勾選狀態，要把selectArr清空，清空勾選
data.selectArr = [];
//如果此選項清空勾選后，如果下面有userList的話，那么也同時要清空
if(data.userList && data.userList.length > 0){
this.clearChild(data.userList);
}
//如果此選項清空勾選后，要把所有的父元素，也全部清空勾選，因為它不勾選了，所有父元素的狀態不可能還處于勾選狀態，不管它勾選不勾選，我們都要清除一遍，以防萬一
this.clearFather(this.menus,data);
}else{//如果這一項的selectArr為[]，說明是未被勾選狀態，在selectArr里加id值，添加勾選
data.selectArr.push(data.id);
//如果此選項清空勾選后，如果下面有userList的話，那么也同時勾選下面所有的孩子
if(data.userList && data.userList.length > 0){
this.addChild(data.userList);
}
//如果此選項勾選后，要判斷所有的上級元素是不是應該全部打勾
this.selectFather(this.menus,data);
}
},
//定義函數清空所有孩子的勾選
clearChild(arr){
for(var i = 0; i < arr.length;i++){
arr[i].selectArr = [];
if(arr[i].userList && arr[i].userList.length > 0){
this.clearChild(arr[i].userList);
}
}
},
//定義函數添加所有孩子的勾選
addChild(arr){
for(var i = 0; i < arr.length;i++){
arr[i].selectArr.push(arr[i].id);
if(arr[i].userList && arr[i].userList.length > 0){
this.addChild(arr[i].userList);
}
}
},
//定義函數一層一層的往上尋找父元素的userList
clearFather(father,data){
for(var i = 0; i < father.length;i++){
if(father[i].id == data.id){
//找到data所在的userList為father，然后再通過這個userList找到擁有這個userList的父元素
this.clearRealFather(this.menus,father);
}else if(father[i].userList && father[i].userList.length > 0){
this.clearFather(father[i].userList,data);
}
}
},
//定義函數根據找到的上層父元素的userList來尋找父元素，并將他們清除勾選
clearRealFather(menus,arr){
for(var i = 0; i < menus.length;i++){
if(menus[i].userList == arr){
//找到這個擁有userList的父元素后，將此selectArr清空
menus[i].selectArr = [];
//找到這個擁有userList的父元素后，再調用clearFather，再進行向上尋找父元素，知道沒有父元素為止
this.clearFather(this.menus,menus[i]);
}else if(menus[i].userList && menus[i].userList.length > 0){
this.clearRealFather(menus[i].userList,arr);
}
}
},
//定義函數一層一層的往上尋找父元素的userList
selectFather(father,data){
for(var i = 0; i < father.length;i++){
if(father[i].id == data.id){
var arr = [];
for(var j = 0; j < father.length;j++){
if(father[j].selectArr.length > 0){
arr.push(father[i]);
}
}
//判斷此數組中是不是所有的selectArr都有值，如果有值，就執行selectRealFather，將上層父元素也勾選
if(arr.length == father.length){
this.selectRealFather(this.menus,father);
}
}else if(father[i].userList && father[i].userList.length > 0){
this.selectFather(father[i].userList,data);
}
}
},
//定義函數根據找到的上層父元素的userList來尋找父元素，并將他們清除勾選
selectRealFather(menus,arr){
for(var i = 0; i < menus.length;i++){
if(menus[i].userList == arr){
//找到這個擁有userList的父元素后，給selectArr賦值，使其勾選
menus[i].selectArr.push(menus[i].id);
//找到這個擁有userList的父元素后，再調用clearFather，再進行向上尋找父元素，知道沒有父元素為止
this.clearFather(this.menus,menus[i]);
}else if(menus[i].userList && menus[i].userList.length > 0){
this.selectRealFather(menus[i].userList,arr);
}
}
}
},
mounted(){
this.getTree();
}
}
然后是樹形組件components文件夾中tree.vue的代碼
1.tree.vue
<template>
<ul class = "treeMoudel">
<li v-for = "(item,index) in menus" :key = "index">
<!-- 遍歷menus，如果傳過來的depth等于0，就添加topNode的class，如果不等于0，就添加noTopNode的class -->
<div :class = "{'itemTree':true,'topNode':depth == 0,'noTopNode':depth != 0,'active':actId == item.id}">
<!-- 判斷如果含有name字段就顯示name字段 -->
<span :style = "transform" v-if = "item.name" :class = "{'topSpan':depth == 0,'noTopSpan':depth != 0}">
<!-- 如果item有孩子且item.show為false,那么圖標為折疊圖標 -->
<i class = "el-icon-caret-right" v-if = "item.userList && item.userList.length > 0 && !item.show" @click = "selectItem(item)"></i>
<!-- 如果item有孩子且item.show為true,那么圖標為展開圖標 -->
<i class = "el-icon-caret-bottom" v-if = "item.userList && item.userList.length > 0 && item.show" @click = "selectItem(item)"></i>
<i class = "selectBox" @click = "checkItem(item)">
<!-- 如果item的selectArr.length是大于0的，也就是里面有值的話就是勾選狀態，否則就是不勾選狀態 -->
<i :class = "{'checkName iconfont':true, 'gouxuan5':item.selectArr.length > 0}" ></i>
</i>
{{item.name}}
</span>
<!-- 判斷如果含有username字段就顯示username字段 -->
<span :style = "transform" v-if = "item.username" :class = "{'topSpan':depth == 0,'noTopSpan':depth != 0}">
<!-- 如果item有孩子且item.show為false,那么圖標為折疊圖標 -->
<i class = "el-icon-caret-right" v-if = "item.userList && item.userList.length > 0 && !item.show" @click = "selectItem(item)"></i>
<!-- 如果item有孩子且item.show為true,那么圖標為展開圖標 -->
<i class = "el-icon-caret-bottom" v-if = "item.userList && item.userList.length > 0 && item.show" @click = "selectItem(item)"></i>
<i class = "selectBox" @click = "checkItem(item)">
<!-- 如果item的selectArr.length是大于0的，也就是里面有值的話就是勾選狀態，否則就是不勾選狀態 -->
<i :class = "{'checkUsername iconfont':true, 'gouxuan5':item.selectArr.length > 0}"></i>
</i>
{{item.username}}
</span>
</div>
<el-collapse-transition>
<!-- 遞歸組件就是自己調用自己，這里是在自己的組件內再次調用自己，但是務必要和pages中的tree頁面中使用的一模一樣才可以，否則樹不會生效 -->
<Tree v-if = "item.userList && item.userList.length > 0 && item.show" :menus = "item.userList" :depth = "depth+4" @selectItem = "selectItem" :actId = "actId" @checkItem = "checkItem"></Tree>
</el-collapse-transition>
</li>
</ul>
</template>
<script src = "./index.js"></script>
<style src = "./index.scss" lang = "scss" scoped></style>
2.tree.vue中引入的index.js
export default{
name:"Tree",
props:["menus","depth","actId"],
data(){
return{
msg:"這是二級菜單樹",
}
},
methods:{
// 將selectItem方法暴露出去
selectItem(item){
this.$emit("selectItem",item);
},
// 將checkItem方法暴露出去
checkItem(item){
this.$emit("checkItem",item);
}
},
computed:{
//通過傳過來的depth計算下級目錄的偏移量，這里我用的transform
transform(){
return 'transform:translateX(' + this.depth*10 + 'px)';
}
}
}
3.tree.vue中引入的index.scss
.treeMoudel{
li{
.itemTree{
width: 100%;
padding-left:30px;
position: relative;
&:hover{
background:#2B9EEE;
color:#fff;
}
.selectBox{
display: inline-block;
width: 16px;
height:16px;
border:1px solid #ccc;
border-radius: 3px;
position: relative;
background: #fff;
top:2px;
.checkName{
position: absolute;
top:-16px;
left:0px;
color:#333;
}
.checkUsername{
position: absolute;
top:-12px;
left:0px;
color:#333;
}
}
span{
display: inline-block;
position: absolute;
font-size:14px;
}
.topSpan{
font-size:16px;
}
.noTopSpan{
font-size:14px;
}
}
.topNode{
height:55px;
line-height: 55px;
font-size:16px;
cursor: pointer;
}
.active{
background:#2B9EEE;
color:#fff;
}
.noTopNode{
height:45px;
line-height:45px;
&:hover{
background:#2B9EEE;
cursor: pointer;
color:#fff;
}
}
}
}
看一下模擬數據的data.json長什么樣子吧
{
"code":1,
"data":[
{
"id":"1.2",
"name":"技術部",
"userList":[
{
"id":"788d",
"username":"html",
"role":"主管"
},
{
"id":"sda",
"username":"vue",
"role":"普通"
}
]
},
{
"id":"1.3",
"name":"策劃部",
"userList":[
{
"id":"dsf",
"username":"jack",
"role":"主管"
},
{
"id":"asdf",
"username":"rose",
"role":"普通"
}
]
}
]
}
至此，一個樹形組件加多選框就做好了
下面看下效果圖
ok，自此這一功能就實現啦，代碼講解我就不寫了，注釋里寫的清清楚楚的，看注釋就好啦！
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
