<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" :treeData="gData" > <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> </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({ title: key, 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> ```