antdesign vue tree 重置后 默认选中值的背景颜色未选中

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值