建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
vue實(shí)現(xiàn)的樹(shù)形結(jié)構(gòu)加多選框示例
本文實(shí)例講述了vue實(shí)現(xiàn)的樹(shù)形結(jié)構(gòu)加多選框。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供上林網(wǎng)站建設(shè)、上林做網(wǎng)站、上林網(wǎng)站設(shè)計(jì)、上林網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、上林企業(yè)網(wǎng)站模板建站服務(wù)，10余年上林做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
前面說(shuō)了如何用遞歸組件來(lái)寫(xiě)vue樹(shù)形結(jié)構(gòu)，寫(xiě)了樹(shù)形結(jié)構(gòu)還要在前面加多選框，然后往數(shù)組里push選項(xiàng)，并在左邊顯示出來(lái)，然后左邊進(jìn)行拖拽排序，拖拽排序上一篇文章我已經(jīng)介紹過(guò)了，在這我就不介紹了，如何用阿里巴巴矢量圖標(biāo)庫(kù)我也有相關(guān)文章，也不介紹了，本節(jié)主要介紹vue樹(shù)形結(jié)構(gòu)加多選框，并實(shí)現(xiàn)一定的邏輯，比如全選，單選，全選和單選之間的聯(lián)動(dòng)
先看下目錄結(jié)構(gòu)
下面我直接貼下代碼
首先是pages文件夾中tree.vue頁(yè)面中引用組件
下面是tree.vue的代碼
然后是tree.vue引入的index.js的代碼
import Tree from '../../components/tree/tree';
import axios from 'axios';
export default{
data(){
return{
msg:"這是登錄頁(yè)面",
depth:0,
menus:[],
actId:"",
}
},
components:{
Tree
},
methods:{
//用ajax獲取數(shù)據(jù)
getData(){
return axios.get('/static/json/data.json');
},
// 調(diào)用ajax函數(shù)
async getTree(){
var last = await this.getData();
if(last.data.code == 1){
this.menus = last.data.data;
//在每一項(xiàng)中添加selectArr和show
this.addShow(this.menus);
}
},
//遞歸函數(shù)在每一項(xiàng)中添加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)
}
}
},
//點(diǎn)擊箭頭使樹(shù)展開(kāi)收縮
selectItem(data){
if(data.userList && data.userList.length > 0){
//如果此項(xiàng)下有userList且length大于0，則切換展開(kāi)與折疊狀態(tài)
data.show = !data.show;
}else{
//如果此項(xiàng)下沒(méi)有userList或length等于0，則將選中的id賦值給actId
this.actId = data.id;
}
},
//進(jìn)行多選勾選
checkItem(data){
if(data.selectArr.length > 0){
//如果這一項(xiàng)的selectArr有值，說(shuō)明是被勾選狀態(tài)，要把selectArr清空，清空勾選
data.selectArr = [];
//如果此選項(xiàng)清空勾選后，如果下面有userList的話(huà)，那么也同時(shí)要清空
if(data.userList && data.userList.length > 0){
this.clearChild(data.userList);
}
//如果此選項(xiàng)清空勾選后，要把所有的父元素，也全部清空勾選，因?yàn)樗还催x了，所有父元素的狀態(tài)不可能還處于勾選狀態(tài)，不管它勾選不勾選，我們都要清除一遍，以防萬(wàn)一
this.clearFather(this.menus,data);
}else{//如果這一項(xiàng)的selectArr為[]，說(shuō)明是未被勾選狀態(tài)，在selectArr里加id值，添加勾選
data.selectArr.push(data.id);
//如果此選項(xiàng)清空勾選后，如果下面有userList的話(huà)，那么也同時(shí)勾選下面所有的孩子
if(data.userList && data.userList.length > 0){
this.addChild(data.userList);
}
//如果此選項(xiàng)勾選后，要判斷所有的上級(jí)元素是不是應(yīng)該全部打勾
this.selectFather(this.menus,data);
}
},
//定義函數(shù)清空所有孩子的勾選
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);
}
}
},
//定義函數(shù)添加所有孩子的勾選
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);
}
}
},
//定義函數(shù)一層一層的往上尋找父元素的userList
clearFather(father,data){
for(var i = 0; i < father.length;i++){
if(father[i].id == data.id){
//找到data所在的userList為father，然后再通過(guò)這個(gè)userList找到擁有這個(gè)userList的父元素
this.clearRealFather(this.menus,father);
}else if(father[i].userList && father[i].userList.length > 0){
this.clearFather(father[i].userList,data);
}
}
},
//定義函數(shù)根據(jù)找到的上層父元素的userList來(lái)尋找父元素，并將他們清除勾選
clearRealFather(menus,arr){
for(var i = 0; i < menus.length;i++){
if(menus[i].userList == arr){
//找到這個(gè)擁有userList的父元素后，將此selectArr清空
menus[i].selectArr = [];
//找到這個(gè)擁有userList的父元素后，再調(diào)用clearFather，再進(jìn)行向上尋找父元素，知道沒(méi)有父元素為止
this.clearFather(this.menus,menus[i]);
}else if(menus[i].userList && menus[i].userList.length > 0){
this.clearRealFather(menus[i].userList,arr);
}
}
},
//定義函數(shù)一層一層的往上尋找父元素的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]);
}
}
//判斷此數(shù)組中是不是所有的selectArr都有值，如果有值，就執(zhí)行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);
}
}
},
//定義函數(shù)根據(jù)找到的上層父元素的userList來(lái)尋找父元素，并將他們清除勾選
selectRealFather(menus,arr){
for(var i = 0; i < menus.length;i++){
if(menus[i].userList == arr){
//找到這個(gè)擁有userList的父元素后，給selectArr賦值，使其勾選
menus[i].selectArr.push(menus[i].id);
//找到這個(gè)擁有userList的父元素后，再調(diào)用clearFather，再進(jìn)行向上尋找父元素，知道沒(méi)有父元素為止
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();
}
}
然后是樹(shù)形組件components文件夾中tree.vue的代碼
1.tree.vue
2.tree.vue中引入的index.js
export default{
name:"Tree",
props:["menus","depth","actId"],
data(){
return{
msg:"這是二級(jí)菜單樹(shù)",
}
},
methods:{
// 將selectItem方法暴露出去
selectItem(item){
this.$emit("selectItem",item);
},
// 將checkItem方法暴露出去
checkItem(item){
this.$emit("checkItem",item);
}
},
computed:{
//通過(guò)傳過(guò)來(lái)的depth計(jì)算下級(jí)目錄的偏移量，這里我用的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;
}
}
}
}
看一下模擬數(shù)據(jù)的data.json長(zhǎng)什么樣子吧
{
"code":1,
"data":[
{
"id":"1.2",
"name":"技術(shù)部",
"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":"普通"
}
]
}
]
}
至此，一個(gè)樹(shù)形組件加多選框就做好了
下面看下效果圖
ok，自此這一功能就實(shí)現(xiàn)啦，代碼講解我就不寫(xiě)了，注釋里寫(xiě)的清清楚楚的，看注釋就好啦！
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
文章名稱(chēng)：vue實(shí)現(xiàn)的樹(shù)形結(jié)構(gòu)加多選框示例
新聞來(lái)源：http://www.ef60e0e.cn/article/gpgheg.html
