Quasar中如何向q-select组件的@filter事件传递自定义参数

在Vue模板中绑定事件时，通过内联箭头函数接收组件默认抛出的参数，再追加自定义参数一并传入处理函数，即可同时保留默认参数与自定义参数，不会破坏q-select原有渲染逻辑。

模板正确写法 #

@filter绑定处使用箭头函数接住组件默认抛出的val、update、abort三个参数，再追加需要传入的表格行数据：

<q-select label="Birth City:" 
          option-value="Id" 
          option-label="availableOptionsKey"
          map-options
          v-model="props.row.value" 
          :options="props.row.availableOptions"
          @filter="(val, update, abort) => customFn(val, update, abort, props.row)">
</q-select>

对应处理函数写法 #

调整自定义处理函数的参数列表，按传入顺序接收参数即可，原有依赖update的选项渲染逻辑无需改动：

const customFn = (val, update, abort, currentRow) => {
  // 业务逻辑：可直接访问当前表格行数据currentRow
  // 按原有规则调用update/abort即可，不影响下拉选项渲染
  if (!val) {
    update(() => {
      currentRow.availableOptions = allOptions
    })
    return
  }

  // 自定义过滤逻辑，比如针对当前行做选项筛选
  const filteredOptions = allOptions.filter(option => 
    option.availableOptionsKey.toLowerCase().includes(val.toLowerCase())
  )
  update(() => {
    currentRow.availableOptions = filteredOptions
  })
}

注意事项 #

• 禁止直接使用@filter="customFn(props.row)"的写法，该写法会覆盖组件默认抛出的所有参数，导致无法获取update等核心回调。
• 内联箭头函数的参数顺序必须和q-select @filter事件的抛出顺序严格一致：第一位是输入值val，第二位是更新回调update，第三位是终止回调abort，顺序错乱会导致下拉渲染异常。
• 如需传入更多自定义参数（如行索引、列配置），直接在箭头函数调用customFn时往后追加参数即可。

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