开发项目里面遇到树桩样式的功能，在微信小程序里面仿写pc端的el-tree。
自定义组件
1、index.json(组件)
{
"component": true,
"usingComponents": {
"tree": "/components/el-tree/index"
}
}
2、index.scss(组件)
.tree_container {
width: auto;
box-sizing: border-box;
overflow: scroll;
background: #fff;
}
.tree-item {
width: auto;
box-sizing: border-box;
overflow-x: scroll;
padding: 10rpx 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.tree-item-name {
display: flex;
justify-content: flex-start;
align-items: center;
flex: 8;
}
.tree-item-title {
margin-left: 24rpx;
color: #1c2438;
font-size: 32rpx;
word-break: break-all;
}
.tree-item-onOff {
width: 40rpx;
display: flex;
justify-content: center;
align-items: center;
}
.collapse {
width: 36rpx;
height: 20rpx;
transform: rotate(-90deg);
}
.expand {
width: 36rpx;
height: 36rpx;
}
.check-box {
height: 32rpx;
width: 32rpx;
margin-left: 30rpx;
}
.tree-item-name-select {
// color: #0079FE;
}
3、index.ts(组件)
Component({
/**
* 组件的属性列表
*/
properties: {
dataTree: {
type: Array,
value: []
},
treeListIndex: { // 当期树形列表的索引
type: Number,
value: 1
},
isOpenAll: { // 是否展开全部节点
type: Boolean,
value: false
}
},
observers: {
'dataTree': function (params) {
this.setData({
tree: this._initSourceData(params)
})
}
},
/**
* 组件的初始数据
*/
data: {
tree: [],
allChoiceIdList: [] // 所有选中的id数组
},
/**
* 组件的方法列表
*/
methods: {
isOpen(e) {
const open = 'tree[' + e.currentTarget.dataset.index + '].open'
this.setData({
[open]: !this.data.tree[e.currentTarget.dataset.index].open
})
},
_initSourceData(nodes) {
nodes.forEach(element => {
if (element.checked === undefined) element.checked = 0
element.open = this.properties.isOpenAll // 是否展开
if (element.children && element.children.length > 0) element.children = this._initSourceData(element.children)
})
return nodes
},
// 选择
select(e) {
let item = e.currentTarget.dataset.item
item = this._handleClickItem(item)
// console.log('当前节点:', item)
this.data.tree = this._updateTree(this.data.tree, item)
this.setData({
tree: this.data.tree
})
this.data.allChoiceIdList = this.getAllChoiceId(this.data.tree)
var childrenId = this.getAllChildrenChoiceId(this.data.tree) // 子节点数据
this.triggerEvent('select', { item: item, idList: this.data.allChoiceIdList,childrenId:childrenId }, { bubbles: true, composed: true })
this.triggerEvent('clickItem', { item: item,childrenId:childrenId }, { bubbles: true, composed: true })
},
// 选择冒泡事件
handleSelect(e) {
let parent = e.currentTarget.dataset.parent
let currentTap = e.detail.item
// console.log('parent节点:', parent)
// 修正它的父节点
parent.children = this._updateTree(parent.children, currentTap)
const { half, all, none } = this.getChildState(parent.children)
// console.log(`half:${half},all:${all},none:${none}`)
if (half) parent.checked = -1
if (all) parent.checked = 1
if (none) parent.checked = 0
// 修正整个tree
this.data.tree = this._updateTree(this.data.tree, parent)
this.setData({
tree: this.data.tree
})
this.data.allChoiceIdList = this.getAllChoiceId(this.data.tree)
var childrenId = this.getAllChildrenChoiceId(this.data.tree)
this.triggerEvent('select', { item: parent, idList: this.data.allChoiceIdList,childrenId:childrenId }, { bubbles: true, composed: true })
},
/**
* @method 处理点击选择
* @param {Object} node 节点对象
* @returns {Object} node 处理完毕的节点
* @description 有子节点则全选中或全取消，当前为最底层单节点则选中或单取消
*/
_handleClickItem(node) {
switch (node.checked) {
case 0:
node.checked = 1
if (node.children && node.children.length > 0) node.children = this._allChoice(node.children)
break;
case 1:
node.checked = 0
if (node.children && node.children.length > 0) node.children = this._allCancel(node.children)
break;
default:
node.checked = 1
if (node.children && node.children.length > 0) node.children = this._allChoice(node.children)
break;
}
return node
},
/**
* @method 全选
* @param {Array} nodes 节点数组
* @returns {Array} nodes 处理完毕的节点数组
*/
_allChoice(nodes) {
if (nodes.length <= 0) return
for (let i = 0; i < nodes.length; i++) {
nodes[i].checked = 1
if (nodes[i].children && nodes[i].children.length > 0) nodes[i].children = this._allChoice(nodes[i].children)
}
return nodes
},
/**
* @method 全取消
* @param {Array} nodes 节点数组
* @returns {Array} nodes 处理完毕的节点数组
*/
_allCancel(nodes) {
if (nodes.length <= 0) return
for (let i = 0; i < nodes.length; i++) {
nodes[i].checked = 0
if (nodes[i].children && nodes[i].children.length > 0) nodes[i].children = this._allCancel(nodes[i].children)
}
return nodes
},
/**
* @method 更新tree
* @param {Array} tree 节点树
* @param {Object} newItem 需要替换新节点
* @description 找到tree中目标进行替换
*/
_updateTree(tree, newItem) {
if (!tree || tree.length <= 0) return
for (let i = 0; i < tree.length; i++) {
if (tree[i].id === newItem.id) {
tree[i] = newItem
break
} else {
if (tree[i].children && tree[i].children.length > 0) {
tree[i].children = this._updateTree(tree[i].children, newItem)
}
}
}
return tree
},
/**
* @method 获取子节点的状态
* @param {Array} node 节点数组
*/
getChildState(node) {
let all = true;
let none = true;
for (let i = 0, j = node.length; i < j; i++) {
const n = node[i];
if (n.checked === 1 || n.checked === -1) {
none = none && false;
}
if (n.checked === 0 || n.checked === -1) {
all = all && false
}
}
return { all, none, half: !all && !none };
},
// 获取所有选中的节点id
getAllChoiceId(nodes, res = []) {
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].checked === 1) res.push(nodes[i].id)
if (nodes[i].children && nodes[i].children.length > 0) this.getAllChoiceId(nodes[i].children, res)
}
return res
},
// 获取所有选中的子节点id
getAllChildrenChoiceId(nodes:any, res = []) {
// console.log('nodes=====',nodes);
for (let i = 0; i < nodes.length; i++) {
var item = nodes[i].children
// console.log('=====',item);
if(nodes[i].children && nodes[i].children.length > 0){
for(let j = 0; j < item.length; j++){
var childrenItem = item[j]
// console.log('=childrenItem====',childrenItem);
if(childrenItem.checked === 1){
res.push(childrenItem.id)
}
}
}
}
return res
},
}
})
4、index.wxml（组件）
<view wx:for="{{tree}}" wx:key="id" class="tree_container">
<!-- 一级菜单 -->
<view style="margin-left: {{treeListIndex*40}}rpx" class="tree-item">
<view class="tree-item-onOff" wx:if="{{item.children && item.children.length > 0}}" bindtap="isOpen" data-index="{{index}}">
<image src="../../static/my/home_ico_more@2x.png" class="{{item.open ? 'expand' : 'collapse'}}" />
</view>
<view class="tree-item-onOff" wx:else>
</view>
<view class="tree-item-name" bindtap="select" data-item="{{item}}" data-index="{{index}}">
<image wx:if="{{item.checked === 1}}" src="../../static/product/check_sel.png" class="check-box"></image>
<image wx:if="{{item.checked === 0}}" src="../../static/product/check_enabled.png" class="check-box"></image>
<image wx:if="{{item.checked === -1}}" src="../../static/product/check_enabled.png" class="check-box"></image>
<text class="tree-item-title {{item.checked === 1 ? 'tree-item-name-select' : '' }}">{{item.labelName}}</text>
</view>
</view>
<!-- 二级菜单 -->
<tree wx:if="{{item.children && item.children.length > 0 && item.open }}" data-parent="{{item}}" dataTree='{{ item.children }}' isOpenAll="{{isOpenAll}}" treeListIndex="{{treeListIndex+1}}" catch:select="handleSelect" />
</view>
注意
1、里面的图片需要替换 （…/…/static）
2、item.labelName、item.children等 需要替换成实际的字段。
3、在ts里面，获取子节点选中的方法（getAllChildrenChoiceId），这里实际上是获取的第二层节点的ID。这个是方法是传值的时候使用，如果不需要获取子节点ID就可以忽略。
项目中使用
1、index.json
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-empty": "@vant/weapp/empty/index",
"el-tree":"/components/el-tree/index"
}
2、index.wxml
<view>
<el-tree dataTree="{{groupTreeList}}" isOpenAll="true" bind:select="handleClick"></el-tree>
</view>
groupTreeList 是接口获取的列表数据。示例数据结构如下
var data =[{id:109,labelName:'尺寸',children: [{id:1091,labelName:'尺寸1',children:[]},{id:1092,labelName:'尺寸2',children:[]}]},
{id:108,labelName:'规格',children:[]},
{id:107,labelName:'轮胎',children:[{id:1071,labelName:'磨毛轮胎',children:[]}]},]
3、index.ts
handleClick(e:any){
console.log('====',e.detail);
var allId = e.detail.idList // 所有节点选中的数据，包括父节点
var childrenId = e.detail.childrenId // 第二层节点选中的数据
this.setData({
productNos:childrenId,
})
},
数据重组方法，是为了适配需求。截断到第二层，后面的层级不再显示。
如果不需要重组数据，这个方法可以忽略。
// 遍历数据并置空第二层的 children
emptyThirdLevelChildren(list:any) {
list.forEach(item => {
if (item.children && item.children.length > 0) {
item.children.forEach(child => {
if (child.children && child.children.length > 0) {
child.children = [];
}
});
}
});
} ,
// 在接口调用里面直接使用
// 获取分组
GetGroupTreeList(data:any){
var that = this;
API.groupTree(data).then((res: any) => {
if(res.code == 200 && res.success){
var vlist = res.data
this.emptyThirdLevelChildren(vlist)
that.setData({
groupTreeList:vlist
})
}
})
},
总结：
1、组件可以根据需要自行修改
2、例子数据显示两层，是因为我把数据重组了，最里面的children进行了判断置空。在实际中，直接会显示接口返回的层级数，有多少层就会展示多少层。
2945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
