【Element】el-tree 只需要选中最末级节点(回显数据)

最新推荐文章于 2024-08-18 12:46:06 发布

土生土长的IU

最新推荐文章于 2024-08-18 12:46:06 发布

阅读量3k

点赞数 1

分类专栏： Element 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/121603077

版权

Element 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

筛选出没有下一级的节点（核心代码如下）

 	console.log(SelectedObj.checkedNodes) // 这是选中的节点数组
	 this.chosedData.departmentList = SelectedObj.checkedNodes.filter(item => {
          return item.childList.length === 0
     })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

土生土长的IU

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

element tree封装为可控制只可选末级或都可选(1)

莫逸雪的博客

12-16

2453

要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制. 要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选. 要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传封装的组件代码: <template> <vab-dialog ref="di

el-tree只能点击最后⼀级

TodayStartWJH的博客

10-17

2633

el-tree只能点击最后⼀级

参与评论您还未登录，请先登录后发表或查看评论

只能选择叶子节点

简单点的博客

07-23

397

1.只能选择叶子节点。

定位到选中的el-tree树状控件节点的位置

最新发布

你若盛开，清风自来

08-18

1008

本文将介绍如何使用el-tree树状控件定位到选中的节点的位置，帮助读者更好地理解el-tree树状控件的使用方法，提高前端开发的效率。el-tree树状控件是Vue.js中的一个树状控件组件，它允许开发者轻松地展示和操作树状数据结构。丰富的功能：el-tree树状控件提供了丰富的功能，如节点选择、节点拖拽、节点编辑等。简洁的API：el-tree树状控件使用简洁的API，使得树状控件的使用更加直观和易于理解。良好的兼容性：el-tree树状控件具有良好的兼容性，可以在不同的环境中使用。

el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点

yinzisang的博客

12-30

7794

设置el-tree层级线，并且只能选中无子节点的叶节点

el-tree只有最后一级可以选中

Nefertar的博客

12-02

4877

el-tree最后一级可以选择，其他禁用并把复选框隐藏

单选el-tree组件,只可选最后一个层级

weixin_44899044的博客

05-30

3226

/ 输出父节点数组。label: '子节点1-1-1'label: '子节点1-1-2'label: '子节点1-1',parentMap: {} // 父节点映射关系。label: '子节点1-2'// 获取当前选中子节点的所有父节点。label: '节点1',label: '节点2'// 只选中最后一个层级节点。// 展开点击的节点。

element-ui 的el-tree控件动态加载更新

weixin_43766801的博客

01-22

2161

标题# 学习目标：提示：这里可以添加学习目标例如：一周掌握 Java 入门知识学习内容：提示：这里可以添加要学的内容例如： 1、搭建 Java 开发环境 2、掌握 Java 基本语法 3、掌握条件语句 4、掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如： 1、周一至周五晚上 7 点—晚上9点 2、周六上午 9 点-上午 11 点 3、周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如： 1、技术笔记 2 遍 2、CSDN 技术博客

修改Element-ui中tree组件最底层节点的样式

zhh369709919的博客

06-28

3480

最近在项目中，设计将tree组件里最底层的节点布局设计成了多列，那要怎么实现呢？首先用自定义节点的方式渲染节点，在渲染方法里给最底层节点添加class renderContent(h, { node, data, store }) { let classname = ''; if (node.childNodes.length === 0) { classname = 'floatRight'; } else if (node.childNodes.length > 0) { clas

elementUI-Tree-懒加载树的选中与回填

u013269704的博客

10-12

5782

对于数据量较大的节点树，用elementUI的Tree自带的懒加载模式可以较为方便的进行展示。 1个关注叶子节点的例子：（由于懒加载未展开过的节点是没获取过子节点的，所以这里选中未展开过的非叶子节点时只能保存非叶子节点、选中展开过的才能保存其下叶子。理论上通过递归可以只保存需要的叶子节点，但代码复杂且浏览器消耗极大，不建议在前端进行递归展开。） HTML: <el-tree ref="dicTree" :props="levelProps" h

element tree封装为可控制只可选末级或都可选(2)

莫逸雪的博客

12-16

672

接上一篇文章改点需求要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点checkedbox的选择. 修改的封装组件的部分method代码: //点击节点触发 nodeClick(data) { if (!this.checkBoxFlag) { this.checkData = [] this.checkData = data } }, //获取

VueTreeselect 只能选择末级节点

xiaoyuer_2020的博客

02-18

1724

场景：有些需求会要求只能选择末级节点。

element UI 树形数据只能选择最后一级只能单选树形单选树形检索

Taurus_666

06-23

6553

直接上代码，如有疑问，欢迎交流 template里面 <el-tree class="filter-tree" :data="assetBigClassTreeData"// 树形data数据，具体按照官方文档格式 :props="defaultProps" //自定义props配置，如严格按照官方格式无需添加此项， @check="checkChange" //checkbox 选项变化事件 node-key="id" //勾选时按照哪个值显示，必须是唯一的值 accordion c

element tree树形组件获取最后一级数据

热门推荐

ZHANGWEI19930118的博客

05-24

1万+

最近做项目树形控件添加的有复选框，但是我要取最后一级的选择项获取数据使用的组件获取数据的方法：我是这样用的 let tree = this.$refs.tree.getCheckedKeys(); 但是这样取出来的是带着父级的，我只要取最后一级，百度好多都说要循环去取，但我又不想用循环。后来仔细看了一下方法的说明，发现这个方法还有一个boolean类型的参数，只要给的是true就可以只返回...

ElementUI中el-tree树形控件给叶子节点添加事件/只允许选中（末）叶子节点

hupei

03-10

7926

ElementUI中el-tree树形控件给叶子节点添加事件/只允许选中（末）叶子节点

JS框选树只选择最后一级

明仔丶的博客

10-10

1824

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SelectProviderType.aspx.vb" Inherits="CgZtb.SelectProviderType" %> <%@ Register TagPrefix="myLoader" Namespace="CustomCo

Element ui tree 组件获取到所有最后一级的节点

Happy Today

11-15

9297

获取tree组件中被选中的最后一级的节点需要获取被选中的所有节点 <el-tree :data="data" show-checkbox default-expand-all ...

element tree全选后拿到最末级节点

page_A的博客

06-01

1486

写帖子主意是自己碰到的一些小问题，然后害怕自己忘记了。以后便于查阅。不bb上干货。碰到过这么一个场景，后端要求传值是只要最末级节点的id，这个时候如果直接使用element tree提供的方法 this.$refs.tree.getCheckedNodes() 这样的话是会拿到所有节点组成的数组。这个时候只要循环这个数组判断哪条数据没有children子级然后拿到这条数据的id就ok了。ps：前端新手，记录自己碰到可能会忘记的一些问题 ...

treeselect中只能选择最底层

m0_69839414的博客

10-25

1096

加上 :disable-branch-nodes="true"

el-tree 不显示最末级

01-26

根据提供的引用内容，可以使用ElementUI的el-tree组件来实现不显示最末级的效果。具体的方法是通过设置el-tree组件的props参数中的show-last-level属性为false来实现。下面是一个示例代码： ```html <template> <el-tree :data="treeData" :props="treeProps"></el-tree> </template> <script> export default { data() { return { tree: [ { label: '一级节点', children: [ label: '二级节点', children: [ { label: '三级节点', children: [ { label: '四级节点' } ] } ] } ] } ], treeProps: { showLastLevel: false } }; } }; </script> ``` 在上述代码中，我们通过设置treeProps对象的showLastLevel属性为false来实现不显示最末级的效果。这样，四级节点将不会显示在el-tree组件中。

【Element】el-tree 只需要选中最末级节点(回显数据)

筛选出没有下一级的节点 （核心代码如下）

筛选出没有下一级的节点（核心代码如下）