Element: [Bug Report] el-cascader has a certain probability of failing to set default values in lazy mode

[hooray]

Element UI version

2.11.0

OS/Browsers version

chrome 75.0.3770.142

Vue version

2.6.10

Reproduction Link

https://codepen.io/anon/pen/zgKzGd

Steps to reproduce

比如这样一段代码

<el-form-item label="部门 / 职位" prop="departmentAndJob">
  <el-cascader v-model="departmentAndJob" :props="departmentAndJobProps" />
</el-form-item>

直接设置可以成功，但如果给个延迟，比如延迟1000ms就不行了，也不报错（我把延迟改成100ms，也可以设置成功）

// 这样可以设置默认值
this.departmentAndJob = [11, 13]
// 这样不行
setTimeout(() => {
  this.departmentAndJob = [11, 13]
}, 1000)

这样就会出现一种情况，比如编辑页要复原表单，需要先获取表单数据，再复原 el-cascader 组件，前一步获取表单数据需要时间，导致复原 el-cascader 组件有一点几率会失败。

What is Expected?

默认值能正常回显

What is actually happening?

默认值有几率不能回显

[element-bot]

Translation of this issue:

Element UI version

2.11.0

OS/Browsers version

Chrome 75.0.3770.142

Vue version

2.6.10

Reproduction Link

Https://codepen.io/anon/pen/zgKzGd

Steps to reproduce

For example, a piece of code like this

```js

Direct settings can be successful, but if you give a delay, such as 1000ms delay, you can't do it, and you don't make a mistake (I change the delay to 100ms, you can also set it up successfully).

```js
// This allows you to set default values

This. Department AndJob = 11, 13
// That's not going to work.

SetTimeout (() =>{
This. Department AndJob = 11, 13

} 1000)

This will lead to a situation, such as editing the page to restore the form, the need to obtain form data first, and then restore the el-cascader component, the previous step to obtain form data takes time, resulting in a slight probability of failure to restore the el-cascader component.

What is Expected?

Default values can be echoed normally

What is actually happening?

The default value has a probability that it cannot be echoed

[GonyMaster]

me too

[penjay]

一样。。。lazy模式赋值一直刷页面测试几次会有一两次没赋值上。。。。。。

[indingpig]

一样，本来想解决IE使用el-cascader组件爆内存的事，改用lazy模式，没想到回显出事

[timeLorder]

我也遇到了一样的问题。而且似乎是从1000ms延迟开始出现这种事，如果延迟为990ms似乎还没问题。

[wuzhoubo]

同样的问题遇到了

[chenhai]

同样问题等待解决，谢谢开发者

[Blueria]

遇到同样的问题
vue：2.6.10
element-ui：2.11.1

首先，我的数据是3级

情况1：

当选择的是第3级选项时，是可以回显的，但是下拉列表中，没有直接显示3级视图（虽然，第3级那个选项是处于选中状态的）

情况2：

当选择的是第2级选项时，无法回显，但是下拉列表中，两级都显示了，我选择的那个选项也处于选中状态

情况3：

跟情况2是一样的，只不过我现在选择的是第1级选项

[indingpig]

这个问题目前只能这么规避：先获取下拉框的回显值，并对它进行赋值之后，再获取省市区的数据进行渲染
https://codepen.io/indingpig/pen/wVrKaz?editors=1111

[indingpig]

这个…我也是用最新版的啊，2.11.0版本，本地测试也是成功的

sprogjavasprog [e-mail] 于2019年8月5日周一 下午3:23写道：

这个问题目前只能这么规避：先获取下拉框的回显值，并对它进行赋值之后，电子杂志再省市区的数据进行渲染
https://codepen.io/indingpig/pen/wVrKaz?editors=1111

不知道你是怎么成功的，我是用最新的版本做测试确无法达到最终效果，并且我跟踪了代码
[image: image]
https://user-images.githubusercontent.com/11442227/62445831-d13ca980-b793-11e9-8241-81f596752971.png
这里报了错误，
[image: image]
https://user-images.githubusercontent.com/11442227/62445883-ee717800-b793-11e9-8e86-71a33f15ee9c.png
这里“checkedNode”获取为空了，不知道是我定义错误还是这里的代码存在问题

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ElemeFE/element/issues/16745?email_source=notifications&email_token=AFI6HIVFDXNHZKH5SHFP5S3QC7IN5A5CNFSM4IG756V2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3Q5SNA#issuecomment-518117684,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFI6HIX3OC2JT7DN72LNGK3QC7IN5ANCNFSM4IG756VQ
.

--
伤心的时候
点支烟

[sprogjavasprog]

问题我找到了 ，不过这个回显没有以前的好用，必须加延时才能用，没法在保证回显的参数设置后，再进行layload初始化

[indingpig]

@sprogjavasprog 能否贴上代码？

[luckyCao]

@hooray 什么场景下需要延时设置默认值呢

[hooray]

@luckyCao 并不是延时设置，只是有这么个情况，比如要回显一个表单编辑页，获取表单数据并进行回显这部操作是异步的，如果在 lazyLoad 初始化之后再去设置默认值，则无法设置成功。目前只能用 @indingpig 的思路，通过 async/await 来解决这个问题，但如果表单里用到多个cascader组件的话，处理起来还是比较麻烦的。

[indingpig]

@luckyCao 这是一个很常见的场景，一般情况下，后台给的省市区和回显的接口是不同的接口，这样肯定是两个请求，只要回显的接口比省市区接口慢上一秒，就会出现这个问题

[liangShengSen]

这个…我也是用最新版的啊，2.11.0版本，本地测试也是成功的 sprogjavasprog [e-mail] 于2019年8月5日周一 下午3:23写道：
…
这个问题目前只能这么规避：先获取下拉框的回显值，并对它进行赋值之后，电子杂志再省市区的数据进行渲染 https://codepen.io/indingpig/pen/wVrKaz?editors=1111 不知道你是怎么成功的，我是用最新的版本做测试确无法达到最终效果，并且我跟踪了代码 [image: image] https://user-images.githubusercontent.com/11442227/62445831-d13ca980-b793-11e9-8241-81f596752971.png 这里报了错误， [image: image] https://user-images.githubusercontent.com/11442227/62445883-ee717800-b793-11e9-8e86-71a33f15ee9c.png 这里“checkedNode”获取为空了，不知道是我定义错误还是这里的代码存在问题 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#16745?email_source=notifications&email_token=AFI6HIVFDXNHZKH5SHFP5S3QC7IN5A5CNFSM4IG756V2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3Q5SNA#issuecomment-518117684>, or mute the thread https://github.com/notifications/unsubscribe-auth/AFI6HIX3OC2JT7DN72LNGK3QC7IN5ANCNFSM4IG756VQ .
-- 伤心的时候 点支烟

请问这个报错解决了吗，我也发现有这个报错，还发现这个组件会resolve两次，在一个panel里面加两次一样的数据

[liuye1296]

这个问题我遇到了， 我是给el-cascader 加一个key key就是默认值 这样接口返回默认值的时候 就会重新加载组件 这样就可以100%加载 回显值，但是这个存在一个 没有默认值的时候加载组件会请求第一级数据，然后有key的时候 也会重新加载组件 再次请求第一级数据。 那么就需要配合 store 存储 就无需再次加载了，

[Tiramisu1]

版本2.12.0官方的demo就可以显示默认值，但是多选就不能显示，如下：
` :props="props"
:show-all-levels="false"
clearable
v-model="form.regionNO"
style="width: 100%"
@change="onChange"

props: {
lazy: true,
multiple: true,
async lazyLoad(node, resolve) {
const { level } = node;
that.axios
.get("/api/System/GetRegionByType", {
params: {
type: level + 1,
regionNo: node.value
}
})
.then(({ data }) => {
let list = data.Data;
const nodes = list.map(item => ({
value: item.regionNo,
label: item.regionName,
leaf: level >= 2
}));
resolve(nodes);
});
}
} _当默认值为单选正常显示_ ["120000000000", "120100000000", "120101000000"] _当默值为多选时无法显示_ [
["120000000000", "120100000000", "120101000000"],
["120000000000", "120100000000", "120102000000"]
]`

[faimaklg]

@Blueria 我也遇上相同的问题，单设置默认值数组长度为单数是可以正常显示如[1]、[1,2,3]，但当数组长度为双数是就不能正常显示如[1,2]、[1,2,3,4]。

[XIONGchanghu]

版本2.12.0官方的demo就可以显示默认值，但是多选就不能显示，如下：
<el-cascader :props="props" :show-all-levels="false" clearable v-model="form.regionNO" style="width: 100%" @change="onChange" ></el-cascader>
props: { lazy: true, multiple: true, async lazyLoad(node, resolve) { const { level } = node; that.axios .get("/api/System/GetRegionByType", { params: { type: level + 1, regionNo: node.value } }) .then(({ data }) => { let list = data.Data; const nodes = list.map(item => ({ value: item.regionNo, label: item.regionName, leaf: level >= 2 })); resolve(nodes); }); } }
_当默认值为单选正常显示_
["120000000000", "120100000000", "120101000000"]
_当默值为多选时无法显示_
[ ["120000000000", "120100000000", "120101000000"], ["120000000000", "120100000000", "120102000000"] ]

我也遇到了这个问题 请问你解决了么

[huangyujun]

这个问题我遇到了， 我是给el-cascader 加一个key key就是默认值 这样接口返回默认值的时候 就会重新加载组件 这样就可以100%加载 回显值，但是这个存在一个 没有默认值的时候加载组件会请求第一级数据，然后有key的时候 也会重新加载组件 再次请求第一级数据。 那么就需要配合 store 存储 就无需再次加载了，

按照你的方法给 el-cascader 加上 :key="new Date().getTIme()" 解决问题了

[sprogjavasprog]

@sprogjavasprog 能否贴上代码？

抱歉，有段时间忙，忘记看消息邮件， 现在不知道还找不知道能不能找到，你现在已经有处理过这个问题了吗，以后我如果有类似的我会在回答的时候一起贴上处理的代码把

[xyyVee]

有人解决这个lazy 并且 多选 不能回显的情况了么？

[hooray]

试了下2.13.2的版本，问题依旧存在
https://codepen.io/hooray/pen/pogVoMr

[leiboT]

@luckyCao 是不是处理不了？value改变不进行lazyLoad?

[Striveeeee]

级联多选回显的问题 有人解决了吗？