移动端列表以树的形式展示

之前写的本来是显示在下拉列表中的，但是客户要求以树的形式显示。在百度上找了半天也没找到合适的树组件。最后，我不得不自己做。显示效果如下：componenttreeNode.vue<脚本>从'linq'导入linq导出默认{数据：函数（）{返回{样式：{paddingLeft：''，borderBottom：'1pxsolid#dedede'}，vals：[]}}，道具：['node','ids','level'],methods:{//展开状态变化changeStatus:function(node){if(node){if(node.close){node.close=false}else{node.close=true}}},//递归设置子节点的状态setChildrenRole:function(node,val){varthat=thisif(node.children!==null&&node.children.length>0){node.children.forEach(function(item,index){item.isChecked=valif(item.children!==null){that.setChildrensRole(item,val)}})}},nodeClick:function(node){node.isChecked=!node.isCheckedthis.setChildrensRole(node,node.isChecked)},removeItem:function(val){letindex=linq.from(this.vals).indexOf(val)this.vals=this.vals.splice(index,1,0)console.log(this.vals)},push:函数(val){this.$emit('push',val)},remove:function(val){console.log(val)this.$emit('remove',val)}},watch:{节点:函数(){this.$set(this.node,'close',true)this.$set(this.node,'isChecked',false)},'node.isChecked':function(val){if(this.node.children&&this.node.children.length===0){if(val){this.$emit('push',{id:this.node.entityCode,text:this.node.entityTitle})}else{this.$emit('remove',{id:this.node.entityCode,text:this.node.entityTitle})}}}},创建:function(){this.$set(this.node,'close',true)this.$set(this.node,'isChecked',false)if(!this.level){this.level=0}this.style.paddingLeft=(this.level*10)+'px'},components:{TreeNode:resolve=>require(['./treeNode.vue'],resolve)}}2.组件tree.vueul.treeul{margin-left:0;}ul.treeli{margin:0;填充：0；行高：40px；颜色：#222；border-top-right-radius:0px;border-top-left-radius:0px;}ul.tree.licheckbox{float:left;width:20px;}.positionsulli:last-child{border-bottom:none!important;}.positions{border-right:1pxsolid;}3.应用到页面:labels.sync="orgSelectLabels"用于返回前面选择中的显示