uniapp 树形结构展示

实现树形结构，在官网插件市场找了tki-tree进行改造，自行下载：https://ext.dcloud.net.cn/plugin?id=702

1. 父层可以选中
2. 父层选中默认的子级全部选中
   页面代码：

<img class='tree-icon' src="@/static/components/tree-icon.png" alt="" @click='handlePopTree()'>
<tki-tree ref="popTree" :range="rangeList" :multiple='true' rangeKey="title" @confirm='confirmLeftTree' :selectParent="true" confirmColor="#4e8af7" />

需要注意的是： 点击图片展示树形结构只能用固定语法

handlePopTree() {
    
    
	let that = this
	that.$refs.popTree._show()
},

rangeKey是关键，如果不设置rangeKey，有可能加载出来数据是不展示的，只能看到树形结构的图标，rangKey对应的是数据的字段名,:range="rangeList"绑定数据，confirmLeftTree点击树形结构确定的事件触发

插件内的改动：

//优化了按钮的展示样式：
<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)"
	v-if="selectParent?true:item.lastRank">
			<view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}"
				:style="{'border-color':confirmColor}">
				<!-- <view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}"></view> -->
				<img  src="@/static/components/right-icon.png" class='tki-tree-check-yes-b' alt="">
				 //替换选中图标的样式
			</view>
	<view class="tki-tree-check-no" v-else :class="{'radio':!multiple}"
		:style="{'border-color':confirmColor}"></view>
</view>

将原有的树形选中方法进行优化

// _treeItemSelect(item, index) {
    
    
	// 	this.treeList[index].checked = !this.treeList[index].checked
	// 	this._fixMultiple(index)
// },
_treeItemSelect(item, index) {
    
    
	// this.treeList[index].checked = !this.treeList[index].checked
	let id = item.id;
	item.checked = !item.checked
	let list = this.treeList;
	list.forEach(item => {
    
    
		if (item.parentId.includes(id)) {
    
    
			item.checked = !item.checked
		}
	})
	this._fixMultiple(index)
},

整体的效果展示：