Ant Design Vue详解a-tree-select使用树形选择器,递归渲染数据,点击选项回显,一二级菜单是否可选等问题

后台给的树形数据:
{
    "code": 200,
    "data": [
        {
            "code": "jsd",
            "children": [
                {
                    "code": "hx",
                    "children": [],
                    "name": "航向",
                    "id": 8,
                    "libTableId": 149,
                    "parentId": 1
                },
                {
                    "code": "cx",
                    "children": [],
                    "name": "垂向",
                    "id": 9,
                    "libTableId": 149,
                    "parentId": 1
                },
                {
                    "code": "fx",
                    "children": [],
                    "name": "法向",
                    "id": 10,
                    "libTableId": 149,
                    "parentId": 1
                }
            ],
            "name": "加速度",
            "id": 1,
            "libTableId": 149,
            "parentId": 0
        },
        {
            "code": "cg",
            "children": [],
            "name": "磁感",
            "id": 2,
            "libTableId": 149,
            "parentId": 0
        },
        {
            "code": "dy",
            "children": [],
            "name": "电压",
            "id": 3,
            "libTableId": 149,
            "parentId": 0
        },
        {
            "code": "yw",
            "children": [],
            "name": "液位",
            "id": 4,
            "libTableId": 149,
            "parentId": 0
        },
        {
            "code": "zt",
            "children": [],
            "name": "状态",
            "id": 5,
            "libTableId": 149,
            "parentId": 0
        },
        {
            "code": "wd",
            "children": [],
            "name": "温度",
            "id": 6,
            "libTableId": 149,
            "parentId": 0
        },
        {
            "code": "yb",
            "children": [
                {
                    "code": "yh",
                    "children": [],
                    "name": "圆弧",
                    "id": 11,
                    "libTableId": 149,
                    "parentId": 7
                },
                {
                    "code": "zx",
                    "children": [],
                    "name": "直线",
                    "id": 12,
                    "libTableId": 149,
                    "parentId": 7
                },
                {
                    "code": "jg",
                    "children": [],
                    "name": "结构",
                    "id": 13,
                    "libTableId": 149,
                    "parentId": 7
                }
            ],
            "name": "应变",
            "id": 7,
            "libTableId": 149,
            "parentId": 0
        }
    ],
    "ext": {}
}
 HTML部分:
      <div class="selectTree-class">
        <div>{{ types.title }} :</div>
        <a-tree-select
          :dropdownStyle="{maxHeight:'300px'}"
          multiple  //是否多选
          placeholder="请选择"
          v-model="typeTreeTitle"  //选中菜单回填的值
          :replaceFields="replaceTypeTreeFields"  //替换treenode字段为后台数据对应的值
          :treeData="typeTreeData"  //后台数据 用来渲染菜单
          :selectedKeys='selectedTypeTreeKeys' //设置选中的树节点
          @select="handleSelectChange" //被选中时调用
        >
        </a-tree-select>
      </div>

data部分:
      typeTreeData: [],
      selectedTypeTreeKeys:[],
      typeTreeTitle:undefined,
      replaceTypeTreeFields: { //替换 treenode字段为treedata
        children: 'children',
        title: 'name',
        value: 'id',
        key: 'id',
      },
JS代码
    handleSelectChange(selectedKeys, event) {
      this.selectedTypeTreeKeys = selectedKeys;
      this.typeTreeTitleVal = event.$options.propsData.dataRef.name;//每个项目不一样
      this.typeTreeTitle  = this.typeTreeTitleVal; //设置选中的值回显到页面选项中
    },

    //从后台获取树形数据,并调用递归处理
    getTypeTreeData(){
      let params = {
        libTableId: this.selectedTreeRow.id,
      };
      getAction(this.url.typeTreeUrl, params).then((res) => {
        if (res.code === 200) {
          this.selectTableFlag = 'typeTree';
          this.typeTreeData = this.recursive(res.data); //这个函数只用看这行代码就行
        }
      });
    },
    //递归处理树形数据
    recursive(arr) {
      // 递归给数组的每一项增加scopedSlots: { title: 'customTitle',},
      return arr.map((item) => {
        return {
          ...item,
          children: item.children && item.children.length ? this.recursive(item.children) : [],
          selectable: (this.selectTableFlag == 'typeTree') ? true :item.parentId != 0, //这块selectable属性主要是判断一二级菜单的隐藏,代码翻译过来:如果是我当前这个树为true,一二级菜单都显示,否则一级不显示,只显示二级。 这块后台数据中我们是用parentId来区分的
          slots: { icon: item.parentId == 0 ? 'praent' : 'child' },
          scopedSlots: {},
        };
      });
    },

有不懂的欢迎留言!~~~~~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/344526.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue开始封装全局防抖和节流函数

封装文件 封装文件的实现思路如下&#xff1a; 首先&#xff0c;我们需要定义两个函数&#xff1a;防抖函数和节流函数。这两个函数的目的是为了减少频繁触发某个事件导致的性能问题&#xff1b;防抖函数的实现思路是创建一个计时器变量&#xff0c;用于延迟执行函数。当触发…

ubuntu下docker卸载和重新安装

卸载&#xff1a;步骤一&#xff1a;停止Docker服务 首先&#xff0c;我们需要停止正在运行的Docker服务。打开终端&#xff0c;执行以下命令&#xff1a; sudo systemctl stop docker 步骤二&#xff1a;删除Docker安装包 接下来&#xff0c;我们需要删除已经安装的Docker软件…

Android 渲染机制

1 Android 渲染流程 一般情况下&#xff0c;一个布局写好以后&#xff0c;使用 Activity#setContentView 调用该布局&#xff0c;这个 View tree 就创建好了。Activity#setContentView 其实是通过 LayoutInflate 来把布局文件转化为 View tree 的&#xff08;反射&#xff09;…

笔记本外接显示器的配置方法

目录 第一步 点击左下角&#xff0c;选择“设置” 第二步 选择系统&#xff0c;默认进入屏幕页面&#xff0c;页面往下拉&#xff0c;找到多显示器下拉框 前提&#xff1a;插好显示器的电源插头且插上笔记本HDMI线 第一步 点击左下角&#xff0c;选择“设置” 第二步 选择系…

STL第一讲

一、认识headers、版本、重要资源 1. C Standard Library和Standard Template Library 前者&#xff1a;c标准库&#xff1b;后者直译为“标准模板库” 区别: C标准库&#xff1a;是c编译器提供的自带的头文件(不带.h后缀)新版兼容C的头文件的形式cxxxx&#xff1b;旧版的xxx…

高清网络视频监控系统技术方案

目 录 一、概述 二、建设目标及需求 &#xff08;一&#xff09;建设总目标 &#xff08;二&#xff09;需求分析 三、设计依据与设计原则 &#xff08;一&#xff09;设计依据 &#xff08;二&#xff09;设计原则 四、建设方案设计 &#xff08;一&…

OpenKruiseGame × KubeSphere 联合发布游戏服运维控制台,推动云原生游戏落地

作者&#xff1a;云原生游戏社区 近日&#xff0c;云原生游戏开源社区旗下 OpenKruiseGame&#xff08;以下简称&#xff1a;OKG&#xff09;基于 KubeSphere 4.0 LuBan 架构开发的游戏服运维控制台 OKG Dashboard 正式发布&#xff01;现已上架 KubeSphere Marketplace 云原生…

MySQL 常用的数据类型【小林出品,必属精品】

数值类型 分为整型和浮点型&#xff1a; 扩展资料&#xff1a; 数值类型可以指定为无符号&#xff08;unsigned&#xff09;&#xff0c;表示不取负数。 1字节&#xff08;bytes&#xff09; 8bit。 对于整型类型的范围&#xff1a; 1. 有符号范围&#xff1a;-2^&#xff08;…

STL之unordered_map使用方法

这里写目录标题 STL之unordered_map使用方法1.什么是STL呢2.unordered_map2.1 头文件&#xff1a;2.2 怎么创建&#xff1a;2.3 初始化&#xff1a;2.4 根据key获取对应value值&#xff1a;2.5 遍历&#xff0c;判断key是否存在&#xff1a;2.6 怎么根据迭代器it获取key和value…

docker 安装docker-compose

首先需要把如下文件 安装到centos7中的/usr/local/bin 下 执行如下命令

vue修改element面包屑样式

vue修改element面包屑样式 element面包屑默认后边的是浅颜色的&#xff0c;前边的是深色的&#xff0c; 现在UI设计图要修改成前面是浅色的&#xff0c;后面是深色的 如果直接修改样式会无法区分一级或者二级路由&#xff0c;用一下方法可以实现&#xff1a; <el-breadc…

装完32G内存条 电脑飞跃提升!

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 大家…

Unity - 角色控制

Test_05 角色控制 创建一个3D对象作为角色&#xff0c;添加 “CharacterController” 组件来控制角色移动&#xff0c;绑定脚本"PlayerControl"。 PlayerControl public class PlayerControl : MonoBehaviour {private CharacterController player;void Start(){p…

Power Apps 向Power Automate传一个数组参数

Power Apps传Power Automate数组参数 背景Power Apps传参方法画布开发我们现在power apps中设置一个集合**ArrCollect**准备一个按钮 Power Automate接收总结画布流 背景 我们通常会从Power Apps界面传递参数给Flow中&#xff0c;但是很多时候仅仅是一个字符串类型的已经不适用…

Qt/Qt Creator窗体界面集成自定义MyRibbon工具栏Qt纯代码实现-升级版2-非第三方Ribbon工具

程序示例精选 Qt/Qt Creator窗体界面集成自定义MyRibbon工具栏Qt纯代码实现-升级版2-非第三方Ribbon工具 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《Qt/Qt Creator窗体界面集成自定义M…

github配置ssh的时候 ssh: connect to host github.com port 22: Connection timed out

今天配置ssh的时候最后一步验证是否能够连接成功的时候&#xff0c;出现了这个报错 查看了一下 .ssh 文件夹&#xff0c;发现只有两个文件 但是看到网上别人的都是有一个config文件&#xff0c;所以我们也要创建一个config文件&#xff08;这个文件是没有文件类型的&#xff0…

大模型-提示词工程

提示原则 1.编写明确具体的指令 策略一&#xff1a;使用分隔符清晰地表示输入的不同部分&#xff0c;分隔符可以是&#xff1a;&#xff0c;“”&#xff0c;<>&#xff0c; 你可以使用任何明显的标点符号将特定的文本部分与提示的其余部分分开。这可以是任何可以使模型…

Navicat 技术干货 | 保护关系数据库安全的措施

在当今的数字信息时代&#xff0c;数据是组织的生命线。因此&#xff0c;保护数据安全从未如此重要。为了防止敏感数据受到未经授权的访问、泄露或其他的安全威胁&#xff0c;实施强有力的安全措施非常有必要。本文将为大家列举一些保护关系数据库安全的措施建议。 访问控制 数…

微信小程序(十三)生命周期-更新应用提醒

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1.onLaunch用法 2.onShow用法 3.onHide用法 4.应用更新API的调用模板 源码&#xff1a; App({//小程序初始化时触发&#xff0c;全局只触发一次onLaunch(option) {//可以获取场景值和启动参数&#xff0c;eg.optioncons…

golang通过go-git下载gitlab源码

1 申请令牌 方法1&#xff1a;具体项目下申请&#xff1a; 方法2&#xff1a;全局申请 2 获取token 3 下载代码 package mainimport ("fmt""os""github.com/go-git/go-git/v5" )func main() {_, err : git.PlainClone("/tmp/foo",…