文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

手把手教你实现一个Vue无限级联树形表格（增删改）

2024-12-03 16:39

关注

本文转载自微信公众号「 前端历劫之路」，作者maomin9761。转载本文请联系 前端历劫之路公众号。

前言

平时我们可能在做项目时，会遇到一个业务逻辑。实现一个无限级联树形表格，什么叫做无限级联树形表格呢?就是下图所展示的内容，有一个祖元素，然后下面可能有很多子孙元素，你可以实现添加、编辑、删除这样几个功能。

资源

源码

这里需要重点说明的是，主要使用了递归的算法以及给数据标识的重要性。详细说明可以在源码中查看注释，也可以通过删改代码融会贯通。

  1.  
  2.             table-column> 
  3.         table> 
  4.  
  5.         -- 添加窗口 --> 
  6.         
  7.             title="添加" 
  8.             :visible.sync="addView" 
  9.             :close-on-click-modal="false" 
  10.             width="30%" 
  11.             @close="closeView" 
  12.         > 
  13.             "form" ref="form" :rules="rules"> 
  14.                 
  15.                     label="位置" 
  16.                     :label-width="formLabelWidth" 
  17.                     prop="location" 
  18.                 > 
  19.                     select 
  20.                         v-model="form.location" 
  21.                         placeholder="请选择位置" 
  22.                         @change="locationChange" 
  23.                         size="small" 
  24.                     > 
  25.                         option 
  26.                             v-for="item in locationData" 
  27.                             :key="item.id" 
  28.                             :label="item.name" 
  29.                             :value="item.id" 
  30.                         /> 
  31.                     select> 
  32.                  
  33.                 
  34.                     v-if="sonStatus" 
  35.                     label="子位置" 
  36.                     :label-width="formLabelWidth" 
  37.                     prop="childArr" 
  38.                 > 
  39.                     
  40.                         size="small" 
  41.                         :key="isResouceShow" 
  42.                         v-model="form.childArr" 
  43.                         placeholder="请选择子位置" 
  44.                         :label="'name'" 
  45.                         :value="'id'" 
  46.                         :options="tableData" 
  47.                         :props="{ checkStrictly: true }" 
  48.                         clearable 
  49.                         @change="getCasVal" 
  50.                     > 
  51.                  
  52.                 
  53.                     label="名称" 
  54.                     :label-width="formLabelWidth" 
  55.                     prop="label" 
  56.                 > 
  57.                     
  58.                         v-model="form.label" 
  59.                         size="small" 
  60.                         autocomplete="off" 
  61.                         placeholder="请输入名称" 
  62.                     > 
  63.                  
  64.              
  65.             "footer" class="dialog-footer"> 
  66.                 "addView = false" size="small" 
  67.                     >取 消
  68.                 > 
  69.                 "primary" @click="okAdd('form')" size="small" 
  70.                     >确 定
  71.                 > 
  72.              
  73.          
  74.  
  75.         -- 编辑窗口 --> 
  76.         
  77.             title="编辑" 
  78.             :visible.sync="editView" 
  79.             :close-on-click-modal="false" 
  80.             width="30%" 
  81.         > 
  82.             "data" ref="data" :rules="rules"> 
  83.                 
  84.                     label="位置" 
  85.                     :label-width="formLabelWidth" 
  86.                     prop="location" 
  87.                 > 
  88.                     select 
  89.                         v-model="data.location" 
  90.                         placeholder="请选择位置" 
  91.                         size="small" 
  92.                         @change="locationChange" 
  93.                     > 
  94.                         option 
  95.                             v-for="item in locationData" 
  96.                             :key="item.id" 
  97.                             :label="item.name" 
  98.                             :value="item.id" 
  99.                         /> 
  100.                     select> 
  101.                  
  102.                 
  103.                     v-if="sonStatus" 
  104.                     label="子位置" 
  105.                     :label-width="formLabelWidth" 
  106.                     prop="childArr" 
  107.                 > 
  108.                     
  109.                         :key="isResouceShow" 
  110.                         v-model="data.childArr" 
  111.                         placeholder="请选择子位置" 
  112.                         size="small" 
  113.                         :label="'name'" 
  114.                         :value="'id'" 
  115.                         :options="tableData" 
  116.                         :props="{ checkStrictly: true }" 
  117.                         clearable 
  118.                         @change="getCasVal" 
  119.                     > 
  120.                  
  121.                 
  122.                     label="名称" 
  123.                     :label-width="formLabelWidth" 
  124.                     prop="label" 
  125.                 > 
  126.                     
  127.                         v-model="data.label" 
  128.                         autocomplete="off" 
  129.                         placeholder="请输入名称" 
  130.                         size="small" 
  131.                     > 
  132.                  
  133.              
  134.             "footer" class="dialog-footer"> 
  135.                 "editView = false" size="small" 
  136.                     >取 消
  137.                 > 
  138.                 "primary" @click="okEdit('data')" size="small" 
  139.                     >确 定
  140.                 > 
  141.              
  142.          
  143.     
 
  •  
  •  
  •  
  •  
  • "scss" scoped> 
  • ::v-deep .el-form-item__content { 
  •     width: 203px; 
  • } 
    •

     

    来源：前端历劫之路内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    手把手教你实现一个Vue无限级联树形表格（增删改）

    后端开发Vue无限级2024-12-03

    Vue中怎么实现一个无限级联树形表格

    后端开发2024-04-02
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯