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())

在这里插入图片描述

相关文章
|
9天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
55 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1328 1
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
2月前
|
前端开发 Linux C#
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
112 10
|
3月前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
731 6
|
3月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
107 0
|
4月前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
456 0
|
6月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
156 1
|
6月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
346 0
|
6月前
|
JavaScript
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
在Vue 3和Element Plus项目中实现具有懒加载功能的el-tree树形控件,以优化大数据量时的页面性能。
1119 0
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
147 1

热门文章

最新文章