122 lines
2.6 KiB
Markdown
122 lines
2.6 KiB
Markdown
<cn>
|
|
#### ๅฏๆ็ดข
|
|
ๅฏๆ็ดข็ๆ ใ
|
|
</cn>
|
|
|
|
<us>
|
|
#### Searchable
|
|
Searchable Tree.
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<div>
|
|
<a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
|
|
<a-tree
|
|
@expand="onExpand"
|
|
:expandedKeys="expandedKeys"
|
|
:autoExpandParent="autoExpandParent"
|
|
:treeNodes="gData"
|
|
>
|
|
<template slot="title" slot-scope="{key}">
|
|
<span v-if="key.indexOf(searchValue) > -1">
|
|
{{key.substr(0, key.indexOf(searchValue))}}
|
|
<span style="color: #f50">{{searchValue}}</span>
|
|
{{key.substr(key.indexOf(searchValue) + searchValue.length)}}
|
|
</span>
|
|
<span v-else>{{key}}</span>
|
|
</template>
|
|
</a-tree>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const x = 3
|
|
const y = 2
|
|
const z = 1
|
|
const gData = []
|
|
|
|
const generateData = (_level, _preKey, _tns) => {
|
|
const preKey = _preKey || '0'
|
|
const tns = _tns || gData
|
|
|
|
const children = []
|
|
for (let i = 0; i < x; i++) {
|
|
const key = `${preKey}-${i}`
|
|
tns.push({ key, scopedSlots: { title: 'title' }})
|
|
if (i < y) {
|
|
children.push(key)
|
|
}
|
|
}
|
|
if (_level < 0) {
|
|
return tns
|
|
}
|
|
const level = _level - 1
|
|
children.forEach((key, index) => {
|
|
tns[index].children = []
|
|
return generateData(level, key, tns[index].children)
|
|
})
|
|
}
|
|
generateData(z)
|
|
|
|
const dataList = []
|
|
const generateList = (data) => {
|
|
for (let i = 0; i < data.length; i++) {
|
|
const node = data[i]
|
|
const key = node.key
|
|
dataList.push({ key, title: key })
|
|
if (node.children) {
|
|
generateList(node.children, node.key)
|
|
}
|
|
}
|
|
}
|
|
generateList(gData)
|
|
|
|
const getParentKey = (key, tree) => {
|
|
let parentKey
|
|
for (let i = 0; i < tree.length; i++) {
|
|
const node = tree[i]
|
|
if (node.children) {
|
|
if (node.children.some(item => item.key === key)) {
|
|
parentKey = node.key
|
|
} else if (getParentKey(key, node.children)) {
|
|
parentKey = getParentKey(key, node.children)
|
|
}
|
|
}
|
|
}
|
|
return parentKey
|
|
}
|
|
export default {
|
|
data () {
|
|
return {
|
|
expandedKeys: [],
|
|
searchValue: '',
|
|
autoExpandParent: true,
|
|
gData,
|
|
}
|
|
},
|
|
methods: {
|
|
onExpand (expandedKeys) {
|
|
this.expandedKeys = expandedKeys
|
|
this.autoExpandParent = false
|
|
},
|
|
onChange (e) {
|
|
const value = e.target.value
|
|
const expandedKeys = dataList.map((item) => {
|
|
if (item.key.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,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
```
|