Vue3 + vxe-table + Element Plus 实现树型表格权限树勾选、回显

最新推荐文章于 2024-07-23 18:01:52 发布
最新推荐文章于 2024-07-23 18:01:52 发布
阅读量813 收藏 5
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35272898/article/details/133137399
版权

背景

记录一下权限树选择、筛选、回显等复杂需求的处理，可能平常业务中很少遇到这种需求，由于前端接收的树形数据结构层级很深，数据都由前端缓存，点击提交按钮才会调用接口，我觉得这个案例对多层级的树型结构数据处理很有参考性，希望能给遇到类似问题的人一些思路。

首先需求需要满足以下功能：

  1. 权限组件弹窗展示，以树型表格展示，要求表格快速渲染；
  2. 支持输入子节点名称筛选（筛选数据由接口返回，也就是说每次筛选都会重新调用一次查询接口）；
  3. 未提交之前，无论筛选多少次，父、子节点的勾选都要支持勾选的回显；
  4. 统计勾选子节点的数量；
  5. 未点提交按钮之前缓存数据

开发框架

  • NodeJs 18.x
  • Vue 3.2.x
  • Element Plus
  • vxe-table 4.5.x

Demo 在沙盒中运行，使用的是Vite Vue3 模板，表格渲染使用vxe-table 库（很好用）；
Vue 使用 2.x 或 3.x 都可以，vxe-table 选择适合的版本就可以，这个 Demo 主要关注的是数据处理。

实现过程

  1. 安装依赖和引入组件
npm install element-plus --save
npm install vxe-table xe-utils --save

  1. 项目结构
    项目结构
    这是沙盒项目中的代码结构，TreeGird.vue 、TreeTableModal.vue、ConfigModal.vue 为关键组件，

  2. 页面介绍
    HomeView.vue
    入口文件，引入TreeTableModal。

TreeTableModal.vue
表格弹窗组件，引入TreeGrid.vue,ConfigModal.vue，表格头部配置、表格数据都是在这个组件完成，列表勾选，子节点筛选也是这里处理。

TreeGrid.vue
树形表格组件，统计叶子节点数量，数据由父组件传入。

ConfigModal.vue
编辑弹窗组件，对应树形组件的配置功能

功能截图

截图

编辑扩展配置截图，并缓存编辑内容
截图

Demo地址

代码可以直接在沙盒里预览、运行

沙盒地址

勤奋刘哈哈
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-virtual-tree:基于Vue3的大量数据的树组件
04-30
虚拟树 基于vue3封装的树组件，该树组件专用于大数据量，如果数据量不大，则使用此组件会有点浪费 英文＆ 如何使用 npm i vue-virtual-tree 全局注册，但这会丢失类型，如果您使用打字稿，则不建议使用此方法 import { createApp } from 'vue' ; import VirTree from 'vue-virtual-tree' ; createApp ( App ) . use ( VirTree ) . mount ( '#app' ) ; In components : < vir> 部分注册，您可以获得完整的类型 < template> < div xss=removed> < vir xss=removed> < / div > < / template > < s
vue3使用element-plus 树组件（el-tree）数据回显
m0_74359467的博客
04-08 694
非常好用，拿过来修改一下check事件，获取就直接可以使用了。
解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
热门推荐
学IT，找陈寒
10-24 1万+
在本文中，我们解决了Vue 3和Element Plus树形表格中的全选、多选、子节点勾选和父节点勾选等常见问题。方法，该方法接受父节点和一个布尔值，用于标识是否选中父节点。在方法中，我们将遍历父节点的所有子节点，并设置它们的选中状态。在树形表格中，通常希望当用户勾选父节点时，其所有子节点也会被自动勾选。现在，当用户选中所有子节点时，父节点也会自动被选中。数组将包含所有选中的节点。我们可以使用递归方法来检查子节点的选中状态，并设置父节点的选中状态。现在，当用户选中父节点时，所有子节点也会被自动勾选。
Vue+element实现树状表格结构编辑+上下左右移动聚焦的input框+回车插入行+可编辑树形结构
最新发布
Edosin_Hu的博客
07-23 270
备注的输入框按回车可以直接插入一行。直接上垃圾代码需要的自己改去吧。
vue3 element-plus 组件table表格 勾选框回显（初始化默认回显）完整静态代码
xiaoming4965的博客
10-22 4796
【代码】vue3 element-plus 组件table表格 勾选框回显（初始化默认回显）完整静态代码。
Vue3(递归组件) + 原生Table 实现树结构复杂表格
Etc.End的博客
03-14 6159
什么是递归，Javascript中经常能接触到递归函数。也就是函数自己调用自己。那对于组件来说也是一样的逻辑。平时工作中见得最多应该就是菜单组件，大部分系统里面的都是递归组件。文章中我做了按需引入的配置，所以看不到我引用组件、Vue3的相关API等等。需要了解的小伙伴可以看我的另一篇文章。
Vue实战（三）：实现树形表格
阿标的博客
03-21 1657
实现树形表格
vue3+element-plus 表格table实现树状结构父子级互不影响
weixin_43828003的博客
01-30 664
描述：点击子级默认之选中点击数据，子级以及父级不进行选中。
基于Vue实现可以拖拽的树形表格
weixin_43173924的博客
06-27 5091
1.安装 https://www.npmjs.com/package/drag-tree-table/v/1.2.1 2.这是别人写的 https://www.cnblogs.com/bfgis/p/9805928.html
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue3+element-plus+admin
04-12
Vue3 + Element-Plus + Admin ...这个项目实例适合学习 Vue3 的最新特性、Element-Plus 的使用，以及如何在实际项目中实现用户权限管理。开发者可以通过研究这个项目，掌握前端开发的最佳实践，并应用于自己的项目中。
laravel-8-vue：laravle8 + vue3 + vue-router4 + element-plus
02-26
我们认为，发展必须是一种令人愉快的，富有创造力的经历，才能真正实现。 Laravel减轻了许多Web项目中使用的常见任务，从而减轻了开发过程中的痛苦，例如： 。 。 用于和存储的多个后端。 直观的表达 。 数据库不...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
vue最强table vxe-table 虚拟滚动列表 前端导出
一步一个脚印，踏实努力，向着目标前进
12-19 6091
要自定义表格中的字段显示，你可以使用formatter属性。这个属性允许你对字段的值进行格式化或翻译。例如，假设你有一个字段名为status，它的值可能是01或2，你想将这些值显示为未开始进行中和已完成data() {return {// ... 其他数据 ...// ... 其他列定义 ...{ field: 'status', title: '状态', formatter: this.formatStatus }],},methods: {case 0: return '未开始';
vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法
weixin_44867717的博客
09-22 2974
【代码】vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法。
taro小程序 Vue3 递归实现动态树形表格
weixin_47432301的博客
01-05 720
taro vue3 树形表格
Vue3用el-table写树状表格遇到的问题（搜索时：行样式变更 以及 对应父节点展开）
weixin_50245419的博客
11-01 757
用el-table写树状表格时要求实现：搜索时，行样式变更 以及 对应父节点展开
vue3 + element plus实现树状表格无线层级拖拽功能
weixin_47551643的博客
04-08 6566
通过js使element-plus提供的table树状表格具有拖拽排序的能力
vue3+vxe-table+ts国际化
11-22
在Vue3中使用vxe-table和TypeScript进行国际化的步骤如下： 1. 首先，安装vxe-table和vue-i18n依赖： ```shell npm install vxe-table vue-i18n ``` 2. 在Vue的入口文件（通常是main.ts）中，引入vxe-table和vue-i18n，并进行相关配置： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import XEUtils from 'xe-utils'; import VXETable from 'vxe-table'; import 'vxe-table/lib/style.css'; import { createI18n } from 'vue-i18n'; // 导入vxe-table的国际化语言包 import zhCN from 'vxe-table/lib/locale/lang/zh-CN'; import enUS from 'vxe-table/lib/locale/lang/en-US'; // 创建vue-i18n实例 const i18n = createI18n({ locale: 'zh-CN', // 设置默认语言 messages: { 'zh-CN': zhCN, 'en-US': enUS } }); // 使用vxe-table const app = createApp(App); app.use(VXETable); app.use(i18n); app.mount('#app'); ``` 3. 在组件中使用vxe-table的国际化功能，可以通过`$t`方法来获取对应的翻译文本： ```html <template> <div> <vxe-table :data="tableData"> <vxe-table-column type="index" title="序号"></vxe-table-column> <vxe-table-column field="name" title="姓名"></vxe-table-column> <vxe-table-column field="age" title="年龄"></vxe-table-column> </vxe-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 } ] }; } }; </script> ``` 4. 在组件中使用vue-i18n的国际化功能，可以通过`$t`方法来获取对应的翻译文本： ```html <template> <div> <p>{{ $t('message.greeting') }}</p> </div> </template> <script> export default { mounted() { console.log(this.$t('message.greeting')); } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值