V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
coollest
V2EX  ›  Vue.js

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

  •  
  •   coollest · 51 天前 · 738 次点击
    这是一个创建于 51 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    2 条回复    2024-11-05 13:16:41 +08:00
    zhhbstudio
        1
    zhhbstudio  
       50 天前
    你的 item 是循环出来的吗?下边是按照不是循环的写的,你可以根据这个思路改改

    const options = ref([])

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

    报错那行:options.value = filteredOptions
    coollest
        2
    coollest  
    OP
       50 天前
    @zhhbstudio 谢谢老哥!确实可以,可能得要大改一下之前的代码结构。再次感谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1509 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:07 · PVG 01:07 · LAX 09:07 · JFK 12:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.