实现树形结构,在官网插件市场找了tki-tree进行改造,自行下载:https://ext.dcloud.net.cn/plugin?id=702
- 父层可以选中
- 父层选中默认的子级全部选中
页面代码:
<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)
},
整体的效果展示: