Vuetify v3多选Select组件@select/@remove事件绑定失效求助

问题分析 #

你在使用Vuetify多选v-select时，尝试通过@select和@remove事件获取单个选中/移除的选项对象，以此调用onToggleColumn切换表格列可见性，但这两个事件未按预期触发；改用@update:model-value只能拿到完整的选中值数组，无法直接获取单次操作的目标选项。

核心原因：Vuetify 3已移除@select和@remove事件，若你使用的是Vuetify 3版本，这两个事件自然不会生效。而Vuetify 2中这两个事件是支持的，但需确认配置是否正确。

解决方案 #

场景1：基于Vuetify 3开发 #

Vuetify 3的多选v-select没有单独的选中/移除事件，但可通过监听@update:model-value，对比新旧选中数组的差异，定位出本次操作的单个选项：

1. 组件代码调整：

<v-select
  multiple
  return-object
  name="t-columns"
  v-model="state.selectedColumns"
  :label="$t('column_visibility')"
  :items="vTableColumnVisibility"
  item-title="name"
  item-value="id"
  @update:model-value="handleColumnToggle"
>
</v-select>

2. 实现处理函数：

const handleColumnToggle = (newSelected: interfaces.ISelectOption[], oldSelected: interfaces.ISelectOption[]) => {
  // 找出新增的选项
  const addedOption = newSelected.find(item => !oldSelected.some(old => old.id === item.id));
  // 找出移除的选项
  const removedOption = oldSelected.find(item => !newSelected.some(newItem => newItem.id === item.id));

  const targetOption = addedOption || removedOption;
  if (!targetOption) return;

  // 执行列可见性切换逻辑
  const ctable = dataTable.value.dt;
  const column = ctable.column(targetOption.id);
  column.visible(!column.visible());
};

场景2：基于Vuetify 2开发 #

若你使用的是Vuetify 2版本，检查以下配置：

• 确认return-object属性已正确设置（你已添加该属性，此步无需调整）
• 验证@select和@remove的事件参数是否正确接收：@select返回选中的单个选项对象，@remove返回移除的单个选项对象
• 排查是否有其他逻辑阻止事件冒泡，或组件是否完成正确注册

额外提示 #

• Vuetify 3官方推荐通过新旧值对比处理单个选项变化，这是当前的标准实现方式
• 确保vTableColumnVisibility中的每个选项都有唯一的id字段，否则对比逻辑会失效

内容的提问来源于stack exchange，提问作者Yuan Hoong Koay