Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: “cascader” repair unexpected error #21759

Merged
merged 1 commit into from
Jun 2, 2022
Merged

Conversation

louiebb
Copy link
Contributor

@louiebb louiebb commented Mar 23, 2022

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow Element's contributing guide (中文 | English | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer relative issues for you PR.

Scenes:
"cascader" changes depending on the change of a certain A field. After returning, change the A field, clear the "value" of "cascader" and the "options" of "cascader", and initiate an interface request at the same time, get data A after the request, and put the data A is assigned to "cascader options", and an error occurs
problem causes:
The watch queue of the cascader-panel file is ["options", "value"]. When the value is cleared and the options are cleared, the execution order is the options monitoring event, and then the value monitoring event. The function call chain in the options monitoring event is as follows,
Function call chain:
options(handler) > initStore > syncMenuState > syncActivePath > getNodeByValue(node.getValue()) get [ null ] > expandNodes > handleExpand
Reproduce address
Detailed article
solution:
The watch queue is modified to [ "value", "options"]

@louiebb louiebb changed the title fix: repair unexpected error fix: “cascader” repair unexpected error Mar 30, 2022
@xinguanhua xinguanhua merged commit 934826c into ElemeFE:dev Jun 2, 2022
hzsrc pushed a commit to hzsrc/element that referenced this pull request Feb 2, 2023
Co-authored-by: louie <liguanzhi@youxin.cloud>
@xinguanhua
Copy link
Collaborator

@louiebb 你好,我是element-ui官方维护团队的xinguanhua,非常感谢你以pr的方式,为element-ui组件库的完善贡献了一份力量。element-ui有一份礼物将会寄给你,希望能够提供寄件地址及联系方式,可以发送邮件到 xinguanhua@gmail.com

@xinguanhua
Copy link
Collaborator

@louiebb 你好,最后截止时间是2月26日,过期不候哦~

@2140509722
Copy link

2140509722 commented Feb 23, 2023

出现类似bug。@xinguanhua
思路:有个巨大的数组存储a1;casdader的options使用小数组a2,默认是a1的前100项;当输入关键字时,从a1中筛选结果赋值给a2;
复现方法:1. 随意选择一个选项;2. 在before-filter属性定义方法,筛选a1得出数组,赋值给a2,此时a2数组内已经没有步骤1内已被选中的选项(即使a2数组有上一次选中的项目,有也一样报错);3. 这时候,或者再选中某项时,就会报错,不影响使用,只是报错。
<template lang="pug"> el-cascader(:key="cascaderKey" ref="customerOption" placeholder='客户' v-model="screen.customer" :props="{ checkStrictly: true }" :options="customerOption" @change="search" clearable filterable :before-filter="onFilter") </template>

onFilter(query = '') { const size = this.customerOptionSize; // query是输入框中的检索条件 var arr = this.customerOption.filter(item => { return item.label.includes(query) }) // 根据检索条件筛选出来的选项,只取前30条 if (arr.length > size) { arr = arr.slice(0, size) } // chosen表示已被选择的选项 const chosen = this.getChosenItemsArr() this.customerOptionTop100 = [...chosen.filter(item => !arr.includes(item)),...arr] // this.$nextTick(); return false; },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants