需求就是从A页面点击名称,跳转到B页面,选中B页面的树节点并查询对应的数据。

这里的树形结构,并没有使用勾选框,选中的样式也进行了一些修改。
一开始没发现el-tree有设置默认选中的属性,还在想怎么操作dom实现该功能。
仔细看文档还是很重要的~
current-node-key可以实现我们想要的功能。但是有些坑需要注意。
在这里插入图片描述

在这里插入图片描述

1.先重写el-tree-node 选中的默认样式.。观察dom发现点击树节点后该节点会加上is-current样式,所以主要是修改is-current的样式类。

      /deep/ .el-tree-node.is-current > .el-tree-node__content {
        background: rgba(22, 119, 255, 0.1);
        border-right: 3px solid #1677ff;
        color: #187aff;
        /deep/ .el-tree-node__expand-icon {
          color: rgb(0, 112, 255);
        }
        /deep/ .is-leaf {
          color: rgba(0, 0, 0, 0);
        }
      }

2.el-tree设置 node-key 和 currentNode

在这里插入图片描述

3.监听路由,并执行查询函数

  watch: {
    $route(from, to) {
      console.log('route to', from, to)
      console.log('params', this.$route.params)

      if (this.$route.params.row) {
        const row = {
          value: from.params.row.acc_name,
          id: from.params.row.acc_code
        }
        this.clickQuery(row)
      }
    }
  },

  // 查询数据
    clickQuery(row) {
      console.log('query', row)
      if (row) {
        this.acc_name = row.value
        // 根据编码去查询数据
        this.popoverForm.acc_code = row.id
        // 设置选中的节点
        this.currentNode = row.id
        // 只是修改current-node-key的值,达不到效果。需要使用setCurrentKey属性,才能选中并高亮
        this.$refs.tree.setCurrentKey(row.id)

        this.refreshEvent()
      }
    },

注意事项:
这里有个坑,正常想法就是, 直接使用this.xxx 的方式去改变current-node-key的值,但是没有效果、
要实现选中该节点,并显示选中样式。需要使用setCurrentKey( )方法。
在这里插入图片描述

详细请看这篇文章的采坑实录
Element树形控件Tree踩坑:修改current-node-key无效

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐