Recently, bloggers have encountered many styles of hierarchical lists.The bloggers have sorted out related ideas and provided them to everyone: the
left is a tab selection box, the bold on the right is the first-level directory, and the following non-bold is the second-level directory. Next, let's take a look at the implementation code:
<VuePerfectScrollbar :style="{'width':'calc(100% - '+firstListWidth+'px)','height':contentHeight+'px'}" ref="ps" :settings="settings" class="document-last-list">
<div v-if="fileClassifyObjKeys.length > 1">
<div v-for="(item,index) in fileClassifyObjChildrenKeys" :key="index" class="document-list-item">
<div class="document-list-item-title">
{{item}}
</div>
<div @click="selectClassify(chidrenItem)" v-for="(chidrenItem,chidrenIndex) in fileClassifyObj[selectedObjKey][item]" :key="chidrenIndex" :class="{'active': chidrenItem.itemLabel==selectedClassify.itemLabel}" class="document-last-list-item">
<Tooltip max-width="100%" :content="chidrenItem.itemLabel">
<div class="document-last-list-label">
{{chidrenItem.itemLabel}}
</div>
</Tooltip>
</div>
</div>
</div>
<div v-else>
<div @click="selectClassify(item)" v-for="(item,index) in fileClassifyObj[selectedObjKey]" :key="index" :class="{'active': item.itemLabel==selectedClassify.itemLabel}" class="document-last-list-item">
<Tooltip max-width="100%" :content="item.itemLabel">
<div class="document-last-list-label">
{{item.itemLabel}}
</div>
</Tooltip>
</div>
</div>
</VuePerfectScrollbar>
js:
/**
* 切换大类
*/
detectTab(key) {
this.selectedObjKey = key;
if (key) {
this.fileClassifyObjChildrenKeys = Object.keys(this.fileClassifyObj[key]);
let firstChildArr = this.fileClassifyObj[this.selectedObjKey][this.fileClassifyObjChildrenKeys[0]];
this.selectClassify(firstChildArr[0]);
} else {
let fileClassifyArr = this.fileClassifyObj[key]
this.selectClassify(fileClassifyArr[0]);
}
},
/**
* 创建标段循环
*/
makeBD(Obj) {
for (let key in Obj) {
let el = Obj[key];
if (el instanceof Array) {
for (let i = 0; i < el.length; i++) {
if (el[i].itemValue.indexOf("_BD") != -1) {
let tempIndex = i;
let addLabelIndex = el[i].itemLabel.indexOf("标段");
let tempValue = el[i].itemValue;
let tempLabel = el[i].itemLabel
for (let k = 1; k < this.bdCount + 1; k++) {
let objTemp = {
itemValue:tempValue + "_" + k,
itemLabel:tempLabel.slice(0,addLabelIndex)+k+tempLabel.slice(addLabelIndex)
}
el.splice(i+1, 0, objTemp);
i++
}
el.splice(tempIndex, 1);
i--;
}
}
} else {
this.makeBD(el)
}
}
},
Just to provide an idea, the specific situation needs to be analyzed in detail!
