To realize the tree structure, I found tki-tree in the official plug-in market for modification, and downloaded it myself: https://ext.dcloud.net.cn/plugin?id=702
- The parent layer can be selected
- When the parent layer is selected, all children are selected by default
. Page code:
<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" />
It should be noted that: Clicking on the picture to display the tree structure can only use fixed syntax
handlePopTree() {
let that = this
that.$refs.popTree._show()
},
rangeKey is the key. If you do not set rangeKey, the loaded data may not be displayed. Only the icon of the tree structure can be seen. rangKey corresponds to the field name of the data. :range="rangeList" binds the data. Click confirmLeftTree. Event triggering determined by tree structure
Changes within the plugin:
//优化了按钮的展示样式：
<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>
Optimize the original tree selection method
// _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)
},
Overall effect display:
