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

uniapp uview 页面多个select组件回显处理,默认选中

 

 

<view class="add-item column space-around" @click="selectClick(1)"><text class="w-s-color-3 f-28">商品分类</text><view class="w-100 space-between"><!-- 第一个参数为你的单选数组,第二个参数为所需要id --><input type="text" :value="echoInputFun(categoryList,query.category_id)" placeholder="请选择" disabledplaceholder-class="phColor" class="one" /><u-icon name="arrow-right" color="#999" size="24"></u-icon></view></view><view class="add-item column space-around" @click="selectClick(2)"><text class="w-s-color-3 f-28">商品等级</text><view class="w-100 space-between"><!-- 第一个参数为你的单选数组,第二个参数为所需要id --><input type="text" :value="echoInputFun(typeList,query.type)" placeholder="请选择" disabledplaceholder-class="phColor" class="one" /><u-icon name="arrow-right" color="#999" size="24"></u-icon></view></view>

选择框 

<u-select v-model="selectShow" :default-value="defaultValue" :list="list"@confirm="confirmSelectClick"></u-select>

 select所需要的数据

selectShow: false,
list: [],
typeList: [{value: 1,label: "一级"},{value: 2,label: "二级"},{value: 3,label: "三级"}],
categoryList: [],
//记录第几个点开的select框
selectIndex: 1,
//选中的下标
defaultValue: [],
      selectClick(index) {this.selectIndex = indexif (index == 1) {this.list = this.categoryListthis.echoFun(this.query.category_id)} else {this.list = this.typeListthis.echoFun(this.query.type)}this.selectShow = true},confirmSelectClick(e) {if (this.selectIndex == 1) {this.query.category_id = e[0].value} else {this.query.type = e[0].value}},// 回显到input上面echoInputFun(list, value) {if (!value) returnlet textlist.map(item => {if (item.value == value) {text = item.label}})return text},// 回显到select表上面echoFun(value) {this.list.map((item, index) => {if (item.value == value) {this.defaultValue = [index]}})},

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

相关文章:

  • linux中playbook的控制语句
  • MongoDB介绍
  • 再看参数校验
  • 计算机存储术语: 扇区,磁盘块,页
  • 解决IDEA编译/启动报错:Abnormal build process termination
  • Jetpack DataStore
  • 在Portainer创建Nginx容器并部署Web静态站点实现公网访问
  • 泛微e-cology XmlRpcServlet文件读取漏洞复现
  • 当下流行的直播技术demo演示
  • Zabbix自动发现并注册已安装agent的主机
  • Jtti:linux搭建开源ldap服务器的方法
  • Gazebo GUI模型编辑器
  • pycharm运行正常,但命令行执行提示module不存在的多种解决方式
  • GBASE南大通用GBase 8a ODBC的安装文件
  • 重新配置torch1.8 cuda11.1 torchtext0.9.0虚拟Pytorch开发环境
  • 【动画图解】一次理清九大排序算法!面试官问到再也不慌!
  • 组播地址段及其作用
  • Vue+ElementUI前端添加展开收起搜索框按钮
  • 速盾网络:sdk游戏盾有什么作用?
  • 理解BeEF的架构
  • esp32-s3训练自己的数据进行目标检测、图像分类
  • 华为设备VRP基础
  • 论文笔记 | ICLR 2023 WikiWhy:回答和解释因果问题
  • LC24. 两两交换链表中的节点
  • 使用redis-rds-tools 工具分析redis rds文件
  • C# Onnx yolov8 plane detection
  • Oracle定时任务的创建与禁用/删除
  • Asp.Net Core 项目中常见中间件调用顺序
  • 【JVM】一、认识JVM
  • [SWPUCTF 2021 新生赛]Do_you_know_http已