Vue

el-tree加载完成后默认触发点击事件非默认选中(上)选中第一

2020-03-13  本文已影响0人  小狐狸与小兔子

如果你浪费了自己的年龄,那是挺可悲的。因为你的青春只能持续一点儿时间——很短的一点儿时间。 —— 王尔德

前言

最近工作使用Vue+Element UI来进行开发,遇到部门树功能的时候选择了el-tree组件来展示,功能都完成了,但需要在加载完成后默认点击第一个节点,从而查询右侧对应的部门人员信息,但官方没有提供默认触发node-click事件,通过Google找到相关答案

效果图:


部门树

代码如下

watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
    // 默认点击Tree第一个节点
    deptTreeData(val) {
        if (val) {
            this.$nextTick(() => {
                document.querySelector('.el-tree-node__content').click()
            })
        }
    }
  },

通过watch观测对象值的变化,从而获取第一个节点的DOM元素,触发点击事件,相关issue

关于支持选中任意节点触发点击事件,请前往

el-tree加载完成后默认触发点击事件非默认选中(下)支持自定义节点

上一篇下一篇

猜你喜欢

热点阅读