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']
    },
  },

效果图:
重置前
在这里插入图片描述
重置后
在这里插入图片描述

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐