<template>
<div class="left-factor-library-name">
<div class="left-tree">
<div class="tree-top">Table name</div>
<div class="sub-input">
<el-input clearable
placeholder="search"
@input="factorNameSearch()"
v-model="factorName"
size="small"
clear="el-inp" />
</div>
<div class="tree-content"
v-if="dataTree & amp; & amp;dataTree.length>0">
<!-- <el-collapse v-model="activeName"
accordion
v-for="(item,index) in dataTree"
:key="index">
<el-tooltip class="item"
effect="dark"
:content="item.name"
placement="right">
<div @click="menuClick(item)"
:class="[activeIndex === item.id ? 'bottom-tabs-active' : '','collapse-items']"
style="line-height:30px;">
{<!-- -->{ item.name }}
</div>
</el-tooltip>
</el-collapse> -->
<el-collapse v-model="activeName"
accordion
v-for="(item,index) in factorList"
:key="index">
<el-collapse-item :title="item.typeName"
:name="item.type"
v-if="item.data & amp; & amp;item.data.length>0">
<div v-for="(i,inx) in item.data"
:key="inx">
<el-tooltip class="item"
effect="dark"
:content="i.name"
placement="right">
<div @click="menuClick(i)"
:class="[activeIndex === i.id ? 'bottom-tabs-active' : '','collapse-items']"
style="line-height:30px;">
{<!-- -->{ i.name }}
</div>
</el-tooltip>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
dataTree: [],
activeIndex: '', // data name
activeName: ''
}
},
mounted () {
this.getMainUnit()
},
methods: {
// Get the menu on the left
getMainUnit () {
this.$http.get(``).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
// console.log(res.data)
// this.dataTree = res.data
this.activeIndex = res.data[0].id
// res.data returns an array object and needs to be modified. Divide new array objects according to different types
if (res.data & amp; & amp; res.data.length > 0) {
// res.data.map((i) => {
// console.log(i)
// })
// Traverse the array
for (var i = 0; i < res.data.length; i + + ) {
// Determine whether the newly defined array has a value. If there is no value, subtract the first class and assign it to it.
if (this.dataTree.length === 0) {
this.dataTree.push({
type: res.data[i].type,
typeName: res.data[i].typeName,
data: [res.data[i]]
})
} else { // After the first one is completed, the following ones have values. Use the findindex() method to compare. If it exists, it returns the subscript index. If it does not exist, it returns -1.
var index = this.dataTree.findIndex(item => {
return item.type === res.data[i].type
})
// Determine whether the index is greater than 0. If it is greater than 0, push the data of this category into the data of this category.
if (index >= 0) {
this.dataTree[index].data.push(res.data[i])
} else { // If it does not exist, create a new object and push it into arr2 as the second class.
this.dataTree.push({
type: res.data[i].type,
typeName: res.data[i].typeName,
data: [res.data[i]]
})
}
}
}
// console.log(this.dataTree)
}
})
},
// Click to get pagination
menuClick (id) {
// console.log(id, typeof id)
this.activeIndex = id // change style
// console.log(this.activeIndex, this.activeName)
}
}
}
</script>
<style lang="scss" scoped>
.left-factor-library-name {
width: 20%;
.left-tree {
width: 100%;
height: 100vh;
border: 1px solid rgb(222, 220, 220);
// margin-right: 20px;
border-radius: 4px;
.tree-top {
padding: 10px 20px;
border-bottom: 1px solid rgb(222, 220, 220);
}
.sub-input {
// background-color: #f0f0f0;
height: 46px;
display: flex;
justify-content: space-around;
align-items: center;
/deep/ .el-input {
width: 90%;
}
// /deep/ .el-button{
// width: 28%;
// }
}
.tree-content {
// overflow-y: scroll;
// padding: 10px 20px;
.el-collapse {
padding: 0px 14px;
}
.el-collapse-item__content {
padding-bottom: 0;
}
.bottom-tabs-active {
line-height: 30px;
background-color: #e7f7f1;
color: #21bb7e;
}
.collapse-items {
cursor: pointer;
line-height: 30px;
height: 30px;
border-bottom: 1px solid rgb(222, 220, 220);
//A single line of text exceeds the line break
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
</style>
About data processing
The backend returns
Need to group according to type changed to
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill tree Home page Overview 39523 people are learning the system