Tdesign TreeSelect 树形选择 多选

news2024/10/1 15:25:22

这里写自定义目录标题

  • 小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据

小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据

在这里插入图片描述

TreeSelect 树形选择

在原demo基础上修改

const chineseNumber = '一二三四五六七八九十'.split('');

const generateTree = function (deep = 0, count = 10, prefix) {
  const ans = [];

  for (let i = 0; i < count; i += 1) {
    const value = prefix ? `${prefix}-${i}` : `${i}`;
    const rect = {
      label: `选项${chineseNumber[i]}`,
      value,
    };

    if (deep > 0) {
      rect.children = generateTree(deep - 1, 10, value);
    }
    ans.push(rect);
  }

  return ans;
};

Component({
  data: {
    options: generateTree(1),
    value: ['0', ['0-0', '0-1']],
    allValue: [
      ['0', ['0-0', '0-1']],
      ['1', ['1-0', '1-1']]
    ],
  },

  methods: {
    onChange(e) {
      this.setData({
        value: e.detail.value,
      });
      if (e.detail.level == 0) {
        //点击一级分类 从allValue中找到历史值 替换
        const value = this.data.allValue.find(array => array[0] === e.detail.value[0])
        if (value == null) {
          this.setData({
            value: e.detail.value,
          });
        } else {
          this.setData({
            value: value,
          });
        }
      } else {
        //判断是否包含一级分类数据
        var result = this.data.allValue.some(item => {
          if (item[0] == e.detail.value[0]) {
            return true
          }
        })
        if (result) {
          // 使用 map() 方法替换元素
          let newArr = this.data.allValue.map(item => {
            if (e.detail.value[0] == item[0]) {
              return e.detail.value;
            } else {
              return item;
            }
          });
          console.log(newArr)
          this.setData({
            allValue: newArr
          })
        } else {
          //添加元素
          this.data.allValue.push(e.detail.value)
        }

      }


    },
  },
});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

音视频入门基础:FLV专题(9)——Script Tag简介

一、SCRIPTDATA 根据《video_file_format_spec_v10_1.pdf》第75页到76页&#xff0c;如果某个Tag的Tag header中的TagType值为18&#xff0c;表示该Tag为Script Tag&#xff08;脚本Tag&#xff0c;又称Data Tag、SCRIPTDATA tag&#xff09;。这时如果Filter的值不为1表示未加…

昇思MindSpore进阶教程--使能图算融合

大家好&#xff0c;我是刘明&#xff0c;明志科技创始人&#xff0c;华为昇思MindSpore布道师。 技术上主攻前端开发、鸿蒙开发和AI算法研究。 努力为大家带来持续的技术分享&#xff0c;如果你也喜欢我的文章&#xff0c;就点个关注吧 正文开始 图算融合是MindSpore特有的网络…

十二生肖国庆姓氏专属头像

关注▲洋洋科创星球▲领取十二生肖国庆姓氏专属头像定制&#xff01; 庆祝祖国75周年华诞&#xff0c;在这个举国欢庆的国庆节时刻&#xff0c;我们特别为您准备了一份独特的礼物——十二生肖国庆姓氏专属头像定制。 十二生肖&#xff0c;又称属相&#xff0c;是中国传统文化中…

Linux 安装redis主从模式+哨兵模式3台节点

下载 https://download.redis.io/releases/ 解压 tar -zxvf redis-7.2.4.tar.gz -C /opt chmod 777 -R /opt/redis-7.2.4/安装 # 编译 make # 安装&#xff0c; 一定是大写PREFIX make PREFIX/opt/redis-7.2.4/redis/ install配置为系统服务 cd /etc/systemd/system/主服务…

盒子是什么? -- 第四课

文章目录 前言一、盒子是什么&#xff1f;二、元素介绍1.边框 - border2.内边距 - padding3. 外边距属性 -- margin 三、拓展知识1.块元素垂直外边距的合并2. 嵌套块元素垂直外边距的合并 四、背景属性五、元素的浮动1.浮动2.清除浮动3.元素定位4. 特殊定位 -- 黏性定位5. z-in…

Python selenium库学习使用实操二

系列文章目录 Python selenium库学习使用实操 文章目录 系列文章目录前言一、模拟登录二、表单录入 前言 在上一篇文章中&#xff0c;我们完成Selenium环境的搭建&#xff0c;和简单的自动化。今天继续深入学习。今天的目标是完成模拟登录&#xff0c;和表单录入。 一、模拟登…

什么是网络准入控制系统?2024年有哪些好用的网络准入控制系统?

网络准入控制系统&#xff08;Network Access Control, NAC&#xff09;是一种网络安全解决方案&#xff0c;旨在确保只有符合特定安全策略的设备和用户才能访问网络资源。NAC系统通过在设备连接到网络之前对其进行身份验证、授权和健康状态检查&#xff0c;从而防止未经授权的…

YOLOv11改进 | 注意力篇 | YOLOv11引入GAM注意力机制

1.GAM介绍 摘要&#xff1a;为了提高各种计算机视觉任务的性能&#xff0c;人们研究了各种注意机制。然而&#xff0c;现有的方法忽略了保留通道和空间信息以增强跨维交互的重要性。因此&#xff0c;我们提出了一种通过减少信息减少和放大全球交互表示来提高深度神经网络性能的…

vue3 实现拖拽排序效果 sortablejs

效果图 依赖安装 npm i sortablejs -S <template><div class"warp"><div class"parent-box" v-for"pItem in sortData" :key"pItem.name"><h2 class"parent-name">{{ pItem.name }}</h2>&l…

程序计数器(学习笔记)

程序计数器是一块较小的内存空间&#xff0c;它的作用可以看做是当前线程所执行的字节码的信号指示器&#xff08;偏移地址&#xff09;&#xff0c;Java编译过程中产生的字节码有点类似编译原理的指令&#xff0c;程序计数器的内存空间存储的是当前执行的字节码的偏移地址 因为…

唱响红色志愿,赞歌献给祖国——杭州建德市庆祝中华人民共和国成立75周年联欢盛宴纪实

作者&#xff1a;华夏之音/李望 通讯员&#xff1a;王江平 9月30日上午&#xff0c;金桂的香气与红旗的鲜艳交相辉映&#xff0c;杭州建德市党群服务中心、建德市新时代文明实践中心内洋溢着一股浓厚的节日氛围。在这里&#xff0c;一场名为“唱响红色志愿、赞歌献给祖国”的联…

企业架构系列(15)ArchiMate第13节:战略视角

战略视角提供了对企业高层战略方向和构成的不同视角建模&#xff0c;使建模者能够专注于某些特定方面。 一、战略视角概览 战略视角主要包括&#xff1a; 战略视角&#xff1a;提供企业战略、能力、价值流和资源以及预期成果的高层概述。能力地图视角&#xff1a;提供企业能力…

MySQL基础篇 part1

为什么使用数据库和数据库基本概念 想在vscode用markdown了&#xff0c;为什么不直接拿pdf版本呢&#xff1f; DB:数据库(Database) 即存储数据的“仓库”&#xff0c;其本质是一个文件系统。它保存了一系列有组织的数据。 DBMS:数据库管理系统(Database Management System)…

Oracle控制文件全部丢失如何使用RMAN智能恢复?

1.手动删除所有控制文件模拟故障产生 2.此时启动数据库发现控制文件丢失 3.登录rman 4.列出故障 list failure; 5.让RMAN列举恢复建议 advise failure; 6.使用RMAN智能修复 repair failure;

当AI遇上金融科技,创新业务场景和案例涌现

大家好&#xff0c;我是Shelly&#xff0c;一个专注于输出AI工具和科技前沿内容的AI应用教练&#xff0c;体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具&#xff0c;拥抱AI时代的到来。 在这个信息爆炸的时代&#xff0c;我们每天…

【路径规划】使用 RRT、RRT* 和 BIT* 进行网格图的路径规划

摘要 本文比较了三种路径规划算法&#xff1a;快速随机树&#xff08;RRT&#xff09;、快速随机树星&#xff08;RRT* &#xff09;和批量信息树&#xff08;BIT*&#xff09;&#xff0c;在网格图环境中进行路径规划的效果。通过仿真分析这些算法在路径质量、计算效率和收敛…

程序员哪里累了?

程序员是最不累的&#xff0c;最不辛苦的职业&#xff0c;非要说有什么门槛&#xff0c;那只需要你有点智力而已。 在这么多的职业中&#xff0c;比程序员轻松的职业可不多&#xff0c;跟程序员的比起来&#xff0c;大部分的职业更苦、更累。 这些问题经常在网上谈论来谈论去&…

永磁电机与普通电机的比较:结构、原理、性能及应用场景分析

创作不易&#xff0c;您的打赏、关注、点赞、收藏和转发是我坚持下去的动力&#xff01; 永磁电机和普通电机在结构、运行原理、性能以及应用场景上都有较大的不同。为了详细回答这些问题&#xff0c;先分别介绍两种电机的基本特点&#xff0c;再分析其异同点及适用场景。 一…

YOLOv11,地瓜RDK X5开发板,TROS端到端140FPS!

YOLOv11 Detect YOLOv11 Detect YOLO介绍性能数据 (简要) RDK X5 & RDK X5 Module 模型下载地址输入输出数据公版处理流程优化处理流程步骤参考 环境、项目准备导出为onnxPTQ方案量化转化使用hb_perf命令对bin模型进行可视化, hrt_model_exec命令检查bin模型的输入输出情况…

录屏+GIF一键生成,2024年费软件大揭秘

视频和 GIF 动图那可都是咱日常生活和工作里少不了的东西。不管是教学的时候用用、直播打个游戏&#xff0c;还是在社交媒体上分享点啥&#xff0c;高质量的录屏和 GIF 制作工具那可老重要了。今天呢&#xff0c;咱就一起来瞅瞅三款在 2024 年特别受推崇的免费录屏和 GIF 制作软…