Vue.js点击combobox按钮仅显示对应select-list的实现问题

问题原因 #

你当前所有下拉列表都绑定了同一个全局的isActivate状态，任意按钮点击修改这个状态时，所有绑定该状态的下拉列表都会同步更新显隐，因此会出现点击一个按钮所有下拉框全部展开的问题。

解决方案 #

这里提供两种可直接落地的实现方式：

方案1：封装独立Combobox组件（推荐，可复用性更高）

把单个combobox的逻辑封装成独立子组件，组件内部自己维护激活状态，每个组件实例的状态互不干扰，后续新增下拉框直接调用组件即可，无需额外写重复逻辑。

1. 新建子组件Combobox.vue：

<template>
  <div class="m-combobox">
    <div class="select-list" :class="{'sl-activate':isActivate}">
      <div class="select-item" v-for="item in options" :key="item[valueKey]">
        <i class="fas fa-check"></i>
        <div class="select-item-text">{{item[labelKey]}}</div>
      </div>
    </div>
    <div class="select">
      <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin">
      <div class="m-combobox-button" @click="activateCbb">
        <i class="fas fa-angle-down"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 下拉选项列表
    options: {
      type: Array,
      required: true
    },
    // 选项主键字段名
    valueKey: {
      type: String,
      default: 'id'
    },
    // 选项显示名称字段名
    labelKey: {
      type: String,
      default: 'name'
    }
  },
  data() {
    return {
      // 每个组件实例独立维护自己的激活状态
      isActivate: false
    }
  },
  methods: {
    activateCbb() {
      this.isActivate = !this.isActivate;
    }
  }
}
</script>

2. 父组件调用：

<template>
  <div>
    <Combobox 
      :options="departments" 
      value-key="DepartmentId" 
      label-key="DepartmentName" 
    />
    <Combobox 
      :options="positions" 
      value-key="PositionId" 
      label-key="PositionName" 
    />
  </div>
</template>
<script>
import Combobox from './Combobox.vue'
export default {
  components: { Combobox },
  data() {
    return {
      positions: [],
      departments: []
    }
  }
}
</script>

方案2：不封装组件，用独立状态字段控制

如果暂时不想做组件封装，可以给每个下拉框定义独立的激活状态，点击时传入标识区分要操作的下拉框即可。

1. 修改HTML部分：

<div class="m-combobox">
  <div class="select-list" :class="{'sl-activate':isActivateDept}">
    <div class="select-item" v-for="item in departments" :key="item.DepartmentId">
      <i class="fas fa-check"></i>
      <div class="select-item-text">{{item.DepartmentName}}</div>
    </div>
  </div>
  <div class="select">
    <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin">
    <div class="m-combobox-button" @click="activateCbb('dept')">
      <i class="fas fa-angle-down"></i>
    </div>
  </div>
</div>
<div class="m-combobox">
  <div class="select-list" :class="{'sl-activate':isActivatePos}">
    <div class="select-item" v-for="item in positions" :key="item.PositionId">
      <i class="fas fa-check"></i>
      <div class="select-item-text">{{item.PositionName}}</div>
    </div>
  </div>
  <div class="select">
    <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin">
    <div class="m-combobox-button" @click="activateCbb('pos')">
      <i class="fas fa-angle-down"></i>
    </div>
  </div>
</div>

2. 修改data部分：

data: function () {
  return {
    positions: [],
    departments: [],
    // 两个下拉框分别用独立的状态控制
    isActivateDept: false,
    isActivatePos: false
  };
}

3. 修改method部分：

methods:{
  activateCbb(type) {
    if(type === 'dept') {
      this.isActivateDept = !this.isActivateDept
      // 可选配置：点击当前下拉时关闭另一个下拉
      this.isActivatePos = false
    } else if(type === 'pos') {
      this.isActivatePos = !this.isActivatePos
      this.isActivateDept = false
    }
  },
}

内容的提问来源于stack exchange，提问作者Viet Quang Fresher