Quasar：如何将自定义参数传递给Q-SELECT过滤器

发布于 2025-02-10 05:59:17 字数 781 浏览 1 评论 0原文

Q-Select具有带有3个选项的方法@filter（Val，Update，Aprolt）。我需要将额外的参数传递给该功能。

传递的update（）函数作为参数对于选择显示可用选项至关重要。

尝试在表中获取对数据的任何访问是不可能的。

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

传递参数时，Update（）函数通常传递给@filter。

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

原文

q-select has the method @filter with 3 options (val, update, abort).
I need to pass extra parameters to the function.

The passed update() function as an argument is critical for the select to display available options.

And trying to get any access to the data in a table is not possible.

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

When passing arguments, the update() function normally passed to @filter is not available.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

趁微风不噪 2025-02-17 05:59:17

这是为了文档目的的格式，最初是来自其他论坛的。

解决方案是：

<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>

...

customFn(val, update,abortFn,row){
            update(() => {
                if (val === '') {//reset|show original
                    row.availableOptions =  this['SomeArrayWithAllOriginalOptions'];
                }else{
                    row.availableOptions =  this['SomeArrayWithAllOriginalOptions'];.filter(v => v.availableOptionsKey.toLowerCase().indexOf(val.toLowerCase()) > -1)
                } 
            })
        },

This is formatted for documentation purposes and originally from a different forum.

The solution is:

<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>

...

customFn(val, update,abortFn,row){
            update(() => {
                if (val === '') {//reset|show original
                    row.availableOptions =  this['SomeArrayWithAllOriginalOptions'];
                }else{
                    row.availableOptions =  this['SomeArrayWithAllOriginalOptions'];.filter(v => v.availableOptionsKey.toLowerCase().indexOf(val.toLowerCase()) > -1)
                } 
            })
        },

回复收藏 0 原文

~没有更多了~