VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)

简介: VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)

步骤:

模板中定义ref

<el-tree
  ref="tree"
  node-key="code"
  show-checkbox
  class="el-tree"
  :indent="0"
  :data="routeList"
  :props="defaultProps"
  :highlight-current="true"
  :default-expand-all="true"
  :expand-on-click-node="false"
  :render-content="renderContent"
  :default-checked-keys="menuIds"
  @check="handleCheckChange"
  @node-expand="handleExpand"
/>

定义方法

centerResourceArr() {
      const resourceArr = this.$refs.tree.getCheckedNodes().filter(item => {
        return !item.childrens
      })
      this.datas = resourceArr.map(vls => { //此处为接口需要数据格式
        return {
          resourceId: vls.id,
          permissionState: 1
        }
      })
      return resourceArr //为最后一级节点node(无子节点)
    }

看效果
打印 console.log(this.centerResourceArr())

在这里插入图片描述

相关文章
|
8天前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
4天前
|
JavaScript
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
在Vue 3和Element Plus项目中实现具有懒加载功能的el-tree树形控件,以优化大数据量时的页面性能。
10 0
|
5天前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
5 0
|
5天前
|
JavaScript 容器
Vue+Element UI
该博客文章介绍了如何在Vue中集成Element UI来构建后台管理系统的左侧菜单,包括使用`el-menu`、`el-submenu`和`el-menu-item`等组件,并通过Vue router动态构建菜单项及其路由设置。
|
1月前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
43 5
|
1月前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
37 1
|
1月前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
32 1
|
1月前
|
前端开发 JavaScript
vue + element-UI 图片压缩canvas【详解】(含完整demo)
vue + element-UI 图片压缩canvas【详解】(含完整demo)
139 1
|
1月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
99 1
|
1月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
69 0