性格左右命运,气度影响格局。——余世雅博士
件地址:https://ext.dcloud.net.cn/plugin?id=5718
作者: luyj
介绍:
无限极树形结构。支持搜索、面包屑导航、单项选择、多项选择。
代码块
luyj-tree
内包含luyj-tree-search
、luyj-tree-navigation
、luyj-tree-item
duplication is found under a single shadow root. The first one was accepted
,还未找到解决方案。本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
在 template
中使用组件
复制代码<!-- 基础用法 -->
<luyj-tree v-slot:default="{item}" :max="max" :trees="tree">
<!-- 内容插槽 -->
<view>
<view class="content-item">
<view class="word">{{item.name}}</view>
</view>
</view>
</luyj-tree>
复制代码import dataList from '@/common/data.js'; // 引用数据
export default {
data() {
return {
tree: dataList,
max: 5,
}
},
}
luyj-tree-search
说明
luyj-tree-search
是 luyj-tree
内的组件,作为搜索框,可以单独引用。
在 template
中使用组件
<luyj-tree-search></luyj-tree-search>
luyj-tree-navigation
是 luyj-tree
内的组件,作为面包屑导航栏,可以单独引用。
luyj-tree-item
是 luyj-tree
内的组件,是树的选择项。包含单选、多选的样式,可以单独引用。
在template
中使用组件
复制代码<!-- 普通使用 -->
<luyj-tree-item :item="item" :isCheck="ischecked" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem">
</luyj-tree-item>
<!-- 使用插件 -->
<luyj-tree-item :item="item" :isCheck="isCheck" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem">
<!-- 自定义插件内容 -->
<template slot="body" >
{{ item.label }}
</template>
<!-- 自定义插件内容 -->
</luyj-tree-item>
对应的数据及方法如下:
复制代码import dataItem from '../../common/item-data.js';
export default {
data() {
return {
item : dataItem, // 当前item值
isCheck : true, // 是否可选
ischecked : true, // 是否选中
multiple : false, // 是否多选
comparison :{
value : 'value', // 选中值
label : 'label', // 显示名称
children:'children', // 子级名称
},
test :124
}
},
onLoad:function(){
},
methods: {
// 修改change
change : function(e , item){
console.log("修改当前值=>" ,e , item);
},
// 点击当前项目
clickItem : function(item , hasChildren){
console.log("点击当前项目");
}
}
}
选了好几个,看着这个还不错,试着在项目中用了一下,确实可以,源码逻辑也很容易看懂