VUE2+Element-ui树形控件tree结构的值获取和传给后台

1年前作者：一个小辣椒分类：Toy博客阅读(46)违法举报

这篇具有很好参考价值的文章主要介绍了VUE2+Element-ui树形控件tree结构的值获取和传给后台。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近做到了权限管理模块

其中的菜单权限需要用到tree结构进行多选功能的渲染操作

废话少说，直接上代码

VUE2+Element-ui树形控件tree结构的值获取和传给后台

将tree结构放在form中配合表单使用并附带全选和全不选，展开和折叠功能

其中的show-checkbox作用是对tree数据的多选模式

VUE2+Element-ui树形控件tree结构的值获取和传给后台

要写在data中的数据

其中defaultProps一定不能忘记

里边的children代表的是你子级目录的名称，我的就是children

label代表的是要渲染上去的名字，我的为label

VUE2+Element-ui树形控件tree结构的值获取和传给后台

这个函数是指你所选的那些需要给后台传的数据

我的后台需要id，那么就循环每一项的id，别忘了数组去重哦

得到的menuArr就是装满id的数组，也是后台需要获取的数据

喜欢的给点个赞吧文章来源地址https://www.toymoban.com/news/detail-446043.html

到了这里，关于VUE2+Element-ui树形控件tree结构的值获取和传给后台的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

element-ui树形控件（tree）
1.基础用法通过:data绑定了数据源，通过:props绑定了属性绑定对象，其中label代表着我们看到的是哪个属性对应的值，children代表父子节点通过哪个属性实现嵌套的 2.为树形控件添加show-checkbox属性，可实现复选框效果。如果要求选中的是文本对应的id值，而不是文本值本身。可
2024年02月13日
浏览(46)
Element-UI定制化Tree 树形控件
说明：复制Tree树形控件。说明：每一个label前面都有一个定制图标或者说明：将默认箭头形式变成加号形式。
2024年02月04日
浏览(80)
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
定义模板（做循环遍历处理）： tree的参数说明请参考官方文档 el-tree 定义模板数据： js部分：指示线样式部分：实际效果：
2024年02月11日
浏览(47)
element-ui树形控件el-tree详解
概述这里我利用element-ui开发一个vue的树形组件引入element-ui 安装element-plus 安装按需导入修改vite.config.js配置按需加载 tree树形控件详解属性名说明类型可选值默认值 data 展示数据 array — — empty-text 内容为空的时候展示的文本 string — — node-key 每个树节点用来作为唯一标
2024年02月07日
浏览(244)
element-ui tree树形结构全选、取消全选，展开收起
控制树形结构全选、取消全选，展开收起
2024年01月17日
浏览(13)
element ui tree树形控件实现单选操作
template div class=\\\"createPost-container\\\" el-form ref=\\\"postForm\\\" :model=\\\"postForm\\\" class=\\\"form-container\\\" div class=\\\"createPost-main-container\\\" el-row el-col :span=\\\"24\\\" el-form-itemspan style=\\\"color:red;\\\"提示：带
2024年02月06日
浏览(43)
element UI中实现tree树形控件部分选中时父级节点也被选中
最近有一个很奇葩的需求，在使用element UI中的tree树形控件选中功能时，子节点部分选中时父级节点也要被选中，并且回显也要保留部分子节点选中父节点半选中状态。按照平时正常逻辑来处理，提交时只需要获取选中项的父级节点一并提交即可，这样正常提交是没有任何问
2024年02月08日
浏览(46)
Element Ui Tree组件实现增、删、改、查、拖拽节点的树形结构
介绍：首先组件 | Element官网某些功能都具备了，这里我就把这些功能结合在一起更完美的使用，其次编辑节点官网是没有实例，所以这里搞了一套较完整的功能，其次编辑和添加，这里直接使用了弹窗（顾及到多个参数设置），接下来效果图展示！效果图如下： 1，其中点
2024年02月13日
浏览(45)
element ui el-tree控制树形结构全选、取消全选，展开收起
控制树形结构全选、取消全选，展开收起
2024年02月11日
浏览(14)
element-ui el-table 树形结构父子级联动
el-table 表格为 select 和 select-all 设置回调函数简要数据格式单选全选操作 ids 不再设置 selection-change 回调函数，直接监听ids 感谢 element-ui el-table 实现全选且父级子级联动提供的思路另附 el-table 文档
2024年02月10日
浏览(54)