当前位置: 首页 > news >正文

uniapp+vue2 ba-tree-picker下拉项多选 树形层级选择器(支持单选、多选、父级选择、映射)

组件介绍:

ba-tree-picker 是一款uniapp树形层级选择器插件,picker弹窗形式的,样式和比例参照uniapp的picker和uni-data-picker组件。

  • 支持单选、多选、父级选择,当然也支持单层选择
  • 支持Object对象属性自定义映射
  • 支持显示全部选中、部分选中、未选中三种状态
  • 支持快速自定义简单样式(分割线、按钮、标题、对齐等),深入样式可复写css  

页面展示:

组件使用方法:

  1. 下载后的文件放到 components 下(代码地址:https://gitee.com/shi_xiao_chen/multiple-selection-in-dropdown.git)
  2. vue页面引入文件,并编写代码使用
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"export default {components: {baTreePicker}

3.在 script 中定义打开方法,和选择监听

        methods: {// 显示选择器showPicker() {this.$refs.treePicker._show();},//监听选择(ids为数组)selectChange(ids, names) {console.log(ids, names)}}//在 template 中调用打开<view @click="showPicker">调用选择器</view>
//listData放到data下的return中
listData = [{"value": "699791401616932870","label": "1","remark1": "42001","children": null},{"value": "699791401616932871","label": "2","remark1": "42002","children": null},{"value": "699791401616932872","label": "3","remark1": "42003","children": null},{"value": "699791401616932873","label": "4","remark1": "42004","children": null},{"value": "699791401616932874","label": "5","remark1": "42005","children": null},{"value": "699791401616932875","label": "6","remark1": "42006","children": null}
]

原组件借鉴地址:ba-tree-picker树形层级选择器(支持单选、多选、父级选择、映射) - DCloud 插件市场

http://www.lqws.cn/news/583813.html

相关文章:

  • 百度文心大模型4.5系列正式开源,同步开放API服务
  • JAVA-JWT
  • Web3 + RWA 餐饮数字化解决方案白皮书(试点版)
  • 【Debian】2-1 frp内网穿透原理
  • 直播 APP 开发需要多少成本
  • 大模型在急性左心衰竭预测与临床方案制定中的应用研究
  • MIT 6.824学习心得(2) 浅谈多线程和RPC
  • leetcode:693. 交替位二进制数(数学相关算法题,python3解法)
  • 七天学会SpringCloud分布式微服务——06——Sentinel
  • Android阴影效果的艺术与实现:从入门到精通
  • WIFI 低功耗保活知识系列---三.WiFi AP如何广播自己的缓存区信息
  • 为何 SQL 性能调优的重要性更为突出
  • 工业级PHP任务管理系统开发:模块化设计与性能调优实践
  • Linux驱动学习day11(定时器)
  • 华为云Flexus+DeepSeek征文| 使用华为云CCE容器部署Dify-LLM高可用方案的验证与测试
  • Spring Security 鉴权与授权详解(前后端分离项目)
  • 基础算法合集-图论
  • 银河麒麟系统上利用WPS的SDK进行WORD的二次开发
  • 2025 年 6 月 TIOBE 指数
  • 浪潮和曙光服务器的ipmi配置教程
  • 带修莫队(三维莫队)
  • K8S初始化master节点不成功kubelet.service failed(cgroup driver配置问题)
  • Pyhton-EXCEL与Mysql数据对比
  • 引爆点:ImageNet、AlexNet与深度学习的惊雷
  • VBA代码解决方案第二十六讲:如何新建EXCEL工作簿文件
  • Windows Excel文档办公工作数据整理小工具
  • 飞纳台式扫描电镜能谱一体机:元素分析与高分辨率成像的完美结合
  • FPGA实现CameraLink视频解码转SDI输出,基于LVDS+GTX架构,提供2套工程源码和技术支持
  • 如何读取运行jar中引用jar中的文件
  • GitHub Actions 入门指南:从零开始自动化你的开发流程