tree 重置后 默认选中值的背景颜色未选中
点重置后没有背景颜色没回到0-0
解决方法:
<a-button @click="reach">重置</a-button>
<a-input-search style="margin-bottom: 8px" v-model="searchValue" placeholder="Search" @change="onChange" />
<a-tree ref="transfer"
:expanded-keys="expandedKeys"
:selectedKeys="selectedKeys"
:auto-expand-parent="autoExpandParent"
:tree-data="gData"
@select="onSelect"
@expand="onExpand"
>
<template slot="title" slot-scope="{ title }">
<span v-if="title.indexOf(searchValue) > -1">
{{ title.substr(0, title.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
</span>
<span v-else>{{ title }}</span>
</template>
</a-tree>
methods: {
// 树形展开事件
onExpand(expandedKeys) {
console.log(expandedKeys, 'expandedKeys')
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
// tree选中事件
onSelect(selectedKeys, info) {
this.selectedKeys = selectedKeys
console.log('selected', selectedKeys, info)
},
// 搜索条件事件
onChange(e = '') {
const value = e.target.value
const expandedKeys = dataList
.map((item) => {
if (item.title.indexOf(value) > -1) {
return getParentKey(item.key, gData)
}
return null
})
.filter((item, i, self) => item && self.indexOf(item) === i)
Object.assign(this, {
expandedKeys,
searchValue: value,
autoExpandParent: true,
})
},
// 重置
reach() {
this.$set(this, 'searchValue', '')
this.expandedKeys = ['0-0']
this.selectedKeys = ['0-0']
},
},
效果图:
重置前
重置后