uniapp下拉框select组件

Question

问题遇到的现象和发生背景

一个页面使用多个uni-data-select组件，点击任意一个uni-data-select组件都可以展开

我想要达到的结果

单个页面同时只展开一个uni-data-select

Answer 1

下面列举几种常见的解决方案，仅供参考：
要实现单个页面同时只展开一个uni-data-select组件，可以使用以下方法：

• 给每个uni-data-select组件绑定一个唯一的id，例如id="select1"，id="select2"，以此类推。

• 在data中新增一个变量selectedId，初始值为null，用于存储当前选中的uni-data-select组件的id。

• 在每个uni-data-select组件的@click事件中，添加以下代码：

selectClick(id) {
  if (this.selectedId === id) {
    this.selectedId = null
  } else {
    this.selectedId = id
  }
},

• 在每个uni-data-select组件的v-show属性中，添加以下判断条件：

v-show="selectedId === 'select1'" // 以此类推

这样做的效果是，每次点击uni-data-select组件时，会根据当前的selectedId值来决定展开哪个uni-data-select组件，如果当前点击的组件和已经选中的组件相同，则将selectedId置为null，否则将selectedId设置为当前点击的组件的id，这样就保证了同一时间只展开一个uni-data-select组件的效果。