当前位置: 首页 > 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.dtcms.com/a/263235.html

相关文章:

  • ChatGPT、DeepSeek等大语言模型助力高效办公、论文与项目撰写、数据分析、机器学习与深度学习建模等科研应用
  • vipmro网站商品详情接口技术解析
  • Array.from()方法解析与应用
  • 容器化 vs 虚拟机:什么时候该用 Docker?什么时候必须用 VM?
  • 本地部署kafka4.0
  • RPC-Client模块
  • 从0到亿级数据抓取:亮数据如何破解全球采集难题?
  • 《燕云十六声》全栈技术架构深度解析
  • 算法与数据结构:解决问题的黄金搭档
  • 后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
  • spring-ai-alibaba 1.0.0.2 学习(四)——语句切分器、文档检索拦截器
  • JavaEE初阶第五期:解锁多线程,从 “单车道” 到 “高速公路” 的编程升级(三)
  • 区块链技术有哪些运用场景?
  • Nacos 3.0 架构全景解读,AI 时代服务注册中心的演进
  • SpringCloud微服务 Eureka服务注册与发现
  • python训练打卡DAY40
  • OpenCV计算机视觉实战(14)——直方图均衡化
  • 88.LMS当幅度和相位同时失配时,为啥最后权值w的相位angle(w(end))收敛到angle(mis)不是-angle(mis)
  • 【机器人】复现 HOV-SG 机器人导航 | 分层 开放词汇 | 3D 场景图
  • 洛谷 P1449:后缀表达式 ← 数组模拟栈
  • JAX study notes[11]
  • vue-32(部署一个 Nuxt.js 应用程序)
  • 【PaddleOCR】PP-OCRv5:通用 OCR 产线的卓越之选
  • 一文详解Modbus协议原理、技术细节及软件辅助调试
  • 2025 湖南大学程序设计竞赛(补题)
  • 基于F5TTS的零样本语音合成
  • 第9篇:Gin配置管理-Viper的实战使用
  • 《JMS 消息重试机制与死信队列配置指南:以 IBM MQ 与 TongLinkQ 为例》
  • Java中的锁思想
  • Java开发者转型AI时代的路径