elementui树形组件默认点击第一个字节点

在做项目的时候遇到个问题,要默认点击树形组件的第一个子节点去获取数据因为只有子节点是有数据的搜了一下好像没有类似的文章记录一下

我的树形组件是作为一个子组件的结构就不放了

data() {
return {treeData : [],clickLeafTimes: 0  // 点击次数}
}// 首先在watch中监听树形组件的数据 在拿到树形组件的数据之后出发响应代码watch: {// 第一次点击使用watch监听来触发treeData (val) {if (val) {this.defaultClick()  // 业务主要代码 点击节点}},}methods: {
// 在树形组件上绑定节点点击事件
// 默认接受 obj 和 node 对象
nodeClick(obj,node) {if (!node.isLeaf) {// 如果不是子节点的话调用封装的函数if (this.clickLeafTimes >= 4) return  // 如果点击到了第一个子节点的话不再执行函数 4为点击的层数 自己可以优化一下动态计算 必须做一下这个限制 不然会有bugthis.defaultClick()} else {// 是子节点 发送请求获取数据 这里不写}
},
defaultClick () {this.$nextTick(() => {// 每次都获取到根节点//  然后通过点击次数判断现在要点击第几个节点const nodes = document.querySelectorAll('.el-tree-node__content')nodes[this.clickLeafTimes].click()// 点击完后点击次数++this.clickLeafTimes++})}
}

elementui树形组件默认点击第一个字节点相关推荐

【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞使用vue-content-menu定制可编辑树结构editableTree
好吧吐槽一下,公司决定之后的技术栈都是vue了,我又从React转战回来了.干巴爹好的生活方式,是和一群志同道合的人,一起奔跑在理想的路上!回头有一路的故事,低头有坚定的脚步,抬头有清晰的远方. 首 ...
Web前端-Vue ElementUI el-input组件绑定点击事件
1.element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"&g ...
ElementUI 树形结构默认展示某个节点
分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点.需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字 ...
layui 勾选不联动父项树形控件_layui树形组件重现勾选过程的办法
layui提供了两种初始化节点选中状态的方式一 tree.setChecked('demoId', [2,13,18,19]); //批量勾选 id 为2,13,18,19 的节点其中19是用户真 ...
自定义ElementUI风格树形组件，详解递归组件的使用及事件数据传递，视图更新等问题
组件视图样式当我们做多级菜单或者权限列表管理的时候,大多会采用树形结构来实现,有的朋友为了省事,不想多费脑力,多费时间,直接几层for循环就做了个差不多的树形组件,更省事的朋友直接拿ElementU ...
elementui组件中，树形组件的使用
项目场景: elementui组件中,树形组件的使用问题描述: 通过树形结构展示,点击勾选数据.没有展开树结构的情况下,勾选树节点时,其叶子节点全部被勾选,@check-change="h ...
element-ui 框架的checkbox组件：点击事件与选中判断 - 代码篇
vue + element-ui 框架的checkbox组件:点击事件与选中判断代码如下: html部分  <div class="btn ...
后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件
将js数组转换成tree树形组件要的数据格式,有时候后端返回的是数组没有处理成树状结构,这个时候就需要前端自行转换,这里采用递归方式转换要展示的效果上代码 <!DOCTYPE html> ...
elementui el-image组件点击按钮预览图片
今天遇到一个新的需求,点击按钮查看图片,且图片能放大缩小.如下图: 想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__p ...

elementui树形组件默认点击第一个字节点

elementui树形组件默认点击第一个字节点相关推荐

最新文章

热门文章