Quasar Select禁用选项后切换选中项的实现方法

在Quasar的select组件场景中，当另一个字段选中某选项后，需要禁用当前select里的指定选项；如果该选项正处于选中状态，还得自动切换到其他可用选项。目前已经通过以下代码实现了选项禁用，现在要补充选中项自动切换的功能。

已实现的禁用逻辑代码 #

模板部分 #

<q-select 
  dense
  options-dense
  borderless
  v-model="selectedValue"
  :options="selectOptions"
  :option-disable="(val) => optionDisable(val)"
/>

注：补充了原代码遗漏的v-model和:options绑定，实际使用时需根据自身数据结构调整。

禁用判断方法 #

optionDisable(val) {
  if (this.otherField === 'val1') {
    return val.value === 'option1';
  } else {
    return val.value === 'option2';
  }
}

修正了原代码中多余的闭合括号，优化了判断逻辑写法。

实现选中项自动切换的步骤 #

要实现禁用时自动切换选中项，核心是监听otherField的变化，检查当前选中值是否被禁用，若被禁用则切换到可用选项：

• 监听另一个字段的变化：用Vue的watch监听otherField，值改变时触发检查逻辑
• 检查当前选中项状态：调用optionDisable方法，判断当前选中的selectedValue是否属于被禁用选项
• 切换到可用选项：筛选所有未被禁用的选项，将第一个可用选项的值赋值给selectedValue（也可指定固定默认项）

完整代码示例 #

<template>
  <div>
    <!-- 触发字段示例，可根据实际场景替换 -->
    <q-select
      v-model="otherField"
      :options="otherOptions"
      label="触发字段"
    />

    <q-select 
      dense
      options-dense
      borderless
      v-model="selectedValue"
      :options="selectOptions"
      :option-disable="(val) => optionDisable(val)"
      label="目标选择器"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      otherField: '',
      selectedValue: '',
      // 示例选项数据，按需调整
      otherOptions: [
        { label: '选项1', value: 'val1' },
        { label: '选项2', value: 'val2' }
      ],
      selectOptions: [
        { label: '选项A', value: 'option1' },
        { label: '选项B', value: 'option2' },
        { label: '选项C', value: 'option3' }
      ]
    };
  },
  watch: {
    otherField() {
      // 找到当前选中的选项对象
      const currentSelected = this.selectOptions.find(item => item.value === this.selectedValue);
      if (currentSelected && this.optionDisable(currentSelected)) {
        // 筛选可用选项
        const availableOptions = this.selectOptions.filter(item => !this.optionDisable(item));
        // 切换到第一个可用选项，也可替换为固定默认值
        this.selectedValue = availableOptions.length > 0 ? availableOptions[0].value : '';
      }
    }
  },
  methods: {
    optionDisable(val) {
      if (this.otherField === 'val1') {
        return val.value === 'option1';
      } else {
        return val.value === 'option2';
      }
    }
  },
  mounted() {
    // 页面加载时检查一次，避免初始状态就选中禁用项
    const currentSelected = this.selectOptions.find(item => item.value === this.selectedValue);
    if (currentSelected && this.optionDisable(currentSelected)) {
      const availableOptions = this.selectOptions.filter(item => !this.optionDisable(item));
      this.selectedValue = availableOptions.length > 0 ? availableOptions[0].value : '';
    }
  }
};
</script>

关键说明 #

• 确保selectOptions是完整的选项数组，才能正常筛选可用选项
• 若需要指定固定默认选项，直接把availableOptions[0].value替换为目标值即可
• 新增mounted钩子的检查逻辑，避免页面初始化时就出现选中禁用项的情况

内容的提问来源于stack exchange，提问作者Majsin