element-plus el-select-v2 组件 filter-method 方法给 option 赋值报错

[coollest]

html 部分是这样的

<div v-if="item.type=='multi-select'">
    <el-select-v2 
        ref="selectMultiRef"
        class="bar"
        v-model="selectedValues[item.value]"
        filterable
        placeholder="Select"
        clearable
        highlight-current-row
        :options="filteredOptions(item).value"
        @change="updateOptions"
        :filter-method="filterMethod"
        multiple
        >
    </el-select-v2>
</div>

filterMethod 具体是

const filterMethod = (query:any) => {
    let options = selectMultiRef.value[0].allOptions
    const escapeStringRegexp = (string = '') => string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')

    const regexp = new RegExp(escapeStringRegexp(query), 'i')
    let filteredOptions = options.filter((opt: any) => {
        return query ? regexp.test(opt.label || '') : true
    }).sort((a: any, b: any) => {
        const aStartsWith = a.label.toLowerCase().startsWith(query.toLowerCase());
        const bStartsWith = b.label.toLowerCase().startsWith(query.toLowerCase());
        return (aStartsWith === bStartsWith) ? 0 : (aStartsWith ? -1 : 1);
    })

    selectMultiRef.value[0].options = filteredOptions //这行报错
};

报错信息：TypeError: 'set' on proxy: trap returned falsish for property 'options'

要实现需求：通过 filterMethod 将筛选后的选项与 query 字符串前缀排序

搜了一下，stackoverflow 上类似报错的答案是把:options="filteredOptions(item).value"的 options 换成一个变量，之后 filterMethod 给这个变量赋值，最后达到效果。

现在的问题是整个代码是一个组件，父组件传进来一个数组，之后再把每个 item 赋值给各个 select 组件。 这样就不好把每个 select 组件的 options 都设置一个变量。

请教各位大佬，有没有什么方法能直接通过 filterMethod 修改 select 的 options

[zhhbstudio]

你的 item 是循环出来的吗？下边是按照不是循环的写的，你可以根据这个思路改改

const options = ref([])

onMounted(() => {
options.value = filteredOptions(props.item)
})

报错那行：options.value = filteredOptions

[coollest]

@zhhbstudio 谢谢老哥！确实可以，可能得要大改一下之前的代码结构。再次感谢！