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

uni-app选择器( uni-data-picker)选择任意级别

背景说明 

uni-app 官方的插件市场有数据驱动选择器,可以用作多级分类的场景。引入插件后,发现做不到只选择年级,不选择班级(似乎,只能到最后子节点了)。

需求中,有可能选择的不是叶子。比如,选择部门的时候。所以,怎样才能任意层级的数据都是可选的呢? 

解决方案

当点击某一项(触发@nodeclick)时,暂存当前选中的项值;当关闭弹出层(@popupclosed)时,则选中某一项。

<template>
<uni-data-picker ref="class" placeholder="请选择文件夹" popup-title="请选择所在文件夹" :localdata="data_tree" v-model="classes" @change="chageClear" @popupclosed="chageClosed" @nodeclick="onnodeclick">
</uni-data-picker>
</template>
<script>export default {data() {return {item: '',classes: '',data_tree: [{_id: '123',text: "文章",value: "1-0",path: 'article-list',children: [{text: "1.1班",value: "1-1"} ]},
//也可以这样定义1.2班同级 注意parent_value和父value一致才能是子级
{_id: "646e3b230c801ca878cad126",parent_value: '1-0',text: "1.2班",value: "1-2"
},{_id: '1231',text: "反馈",value: "2-0",path: 'cloudstorage'},{_id: '12322',text: "用户图像",value: "3-0",path: 'user-list'},{_id: '233232',text: "apk",value: "4-0",disable: true,path: 'apk'},{_id: '233232',text: "模拟云文件",value: "5-0",path: '/'}],}},methods: {initDate() {this.item = ''},chageClosed() {//处理不同步this.$nextTick(() => {this.classes = this.item.valueif (!this.item) returnthis.chageValu(this.item)});},//只是清空下执行chageClear(e) {const value = e.detail.value[0]if (!value) {this.initDate()}},chageValu(value) {//do...},onnodeclick(e) {//如果是子级e会有内置的parent_value,同时方便后台数据渲染添加this.item = e},}}
</script>

http://www.lryc.cn/news/107424.html

相关文章:

  • 网络入侵探测器Pi.Alert
  • Flask项目打包为exe(附带项目资源,静态文件)
  • 无代码开发(BIP旗舰版-YonBuilder)
  • 誉天程序员-瀑布模型-敏捷开发模型-DevOps模型比较
  • flutter:占位视图(骨架屏、shimmer)
  • 【雕爷学编程】MicroPython动手做(30)——物联网之Blynk 4
  • python-网络爬虫.BS4
  • C# 开发规范
  • 【uniapp 样式】使用setStorageSync存储历史搜索记录
  • git remote add origin详解
  • 附录1-将uni-app运行到微信开发者工具
  • 【LeetCode】根据二叉树创建字符串
  • 【图论】强连通分量
  • 网络:VRP介绍
  • iOS - 解压ipa包中的Assert.car文件
  • 【Jmeter】配置不同业务请求比例,应对综合场景压测
  • TCP拥塞控制详解 | 1. 概述
  • 使用IPSEC VPN 在有防火墙的场景和有NAT转换的场景下实现隧道通信实验
  • Go和Java实现适配器模式
  • 接口相似数据结构复用率高?Apipost这招搞定!
  • 【零基础学Rust | 基础系列 | Hello, Rust】编写并运行第一个Rust程序
  • 代理模式.
  • BS框架说明
  • iOS——Block签名
  • Flutter 图片选取及裁剪
  • C语言每日一题:11.《数据结构》链表分割。
  • 记一次Oracle归档日志异常增长问题的排查过程
  • Java设计模式——类之间的关系
  • Dockerfile构建Redis镜像
  • C高级DAY2