el-tree 默认选中第一个节点

html 复制代码
<el-tree
          ref="nodeTree"
          node-key="id"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
</el-tree>
javascript 复制代码
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
    }
  },
  watch: {
    treeData: {
      handler(val) {
        if(val) {
          this.$nextTick(() => {
            document.querySelector('.el-tree-node__content').click()
          })
        }
      },
      immediate: true
    }
  },
}
相关推荐
樱花开了几轉11 分钟前
element ui下拉框踩坑
开发语言·javascript·ui
故事不长丨28 分钟前
【Java SpringBoot+Vue 实现视频文件上传与存储】
java·javascript·spring boot·vscode·后端·vue·intellij-idea
Jeffrey__Lin2 小时前
解决Grid布局下el-table自适应缩小失败的问题
vue.js·elementui·html
时间的情敌2 小时前
Vue3的异步DOM更新:nextTick的正确使用方法
前端·javascript·vue.js
咖啡の猫2 小时前
vue 项目中常用的 2 个 Ajax 库
vue.js·ajax·okhttp
一个假的前端男3 小时前
uniapp vue2 三端瀑布流
前端·javascript·uni-app
前端架构师-老李3 小时前
React中useContext的基本使用和原理解析
前端·javascript·react.js
CodeToGym3 小时前
Vue2 和 Vue3 生命周期的理解与对比
前端·javascript·vue.js
Glommer3 小时前
验证码滑动轨迹浅谈
javascript·逆向
疯狂暴龙GG帝4 小时前
项目中使用el-table实现行合并及合并后序号不连续解决方案
前端·vue.js