无限级树状图html5,无限树状列表的实现

树状列表示例效果.png

(1) 组件源码 tree-item.vue

{ {item.name}}

∨

∧

{ {item.name}}

export default {

name: "tree-item",

props:{

data: {

type: Array,

default: function(e) {

return []

}

}

},

data() {

return {

opends: [],

};

},

onLoad() {

console.log("tree-item onLoad")

},

methods:{

onOpends(item,i){

this.$nextTick(function(){

this.$set(this.opends,i,!this.opends[i])

})

}

}

}

.tree-box{

display: inline-block;

width: 220px;

border: 1px solid #eee;

overflow: hidden;

border-radius: 4px;

}

.tree-item{

display: flex;

overflow: hidden;

height: 32px;

border-bottom: 1px solid #eee;

}

.tree-item>label{

flex: 1;

line-height: 32px;

font-size: 14px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.tree-item>span{

width: 32px;

height: 32px;

text-align: center;

line-height: 32px;

}

.isTrue{

padding-left: 15px;

}

(2) index.vue中调用

该组件只能在h5端实现树状列表;无法实现微信小程序和android端的树状列表,只能显示一级而无法展开下级列表

import treeFolder from "@/components/tree/tree-item.vue";

export default {

components: {

treeFolder

},

data() {

return {

lists:[

{

name:"椒江新厂",

code:"001",

children:[

{

name:"生产部门A",

code:"021",

children:[

{

name:"A-01",

code:"031",

},

{

name:"A-02",

code:"032",

},

{

name:"A-03",

code:"033",

}

]

},

{

name:"生产部门B",

code:"022",

children:[

{

name:"B-01",

code:"034",

}

]

},

{

name:"生产部门C",

code:"023",

}

]

},

{

name:"杭州工厂",

code:"002",

},

{

name:"西安工厂",

code:"003",

}

]

}

},

methods: {

}

}

page {

display: flex;

flex-direction: column;

box-sizing: border-box;

background-color: #fff;

}

备注：uni-app使用vue递归组件做无限级树形列表时，在H5页面能正常显示(H5兼容递归组件本身)，但是在微信小程序和android端只能显示第一级(小程序和安卓app无法递归)。该组件无法实现微信小程序和android端的树状列表，只能显示一级而无法展开下级列表。

(1) 组件源码mix-tree.vue

class="mix-tree-item"

:style="[{

paddingLeft: item.rank*15 + 'px',

zIndex: item.rank*-1 +50

}]"

:class="{

border: treeParams.border === true,

show: item.show,

last: item.lastRank,

showchild: item.showChild

}"

@click.stop="treeItemTap(item, index)"

>

{ {item.name}}

export default {

props: {

list: {

type: Array,

default(){

return [];

}

},

params: {

type: Object,

default(){

return {}

}

}

},

data() {

return {

treeList: [],

treeParams: {

defaultIcon: '/static/mix-tree/defaultIcon.png',

currentIcon: '/static/mix-tree/currentIcon.png',

lastIcon: '',

border: false

}

}

},

watch: {

list(list){

this.treeParams = Object.assign(this.treeParams, this.params);

console.log(this.treeParams, this.params);

this.renderTreeList(list);

}

},

onLoad() {

console.log("mix-tree onLoad")

},

methods: {

//扁平化树结构

renderTreeList(list=[], rank=0, parentId=[]){

list.forEach(item=>{

this.treeList.push({

id: item.id,

name: item.name,

parentId, // 父级id数组

rank, // 层级

showChild: false, //子级是否显示

show: rank === 0 // 自身是否显示

})

if(Array.isArray(item.children) && item.children.length > 0){

let parents = [...parentId];

parents.push(item.id);

this.renderTreeList(item.children, rank+1, parents);

}else{

this.treeList[this.treeList.length-1].lastRank = true;

}

})

},

// 点