Merge pull request #6676 from allenve/issue-fix

fix: issues-6666:修复select组件懒加载时label回显问题
This commit is contained in:
Allen 2023-04-23 10:27:57 +08:00 committed by GitHub
commit bb91c9c92c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 168 deletions

View File

@ -1165,6 +1165,7 @@ leftOptions 动态加载,默认 source 接口是返回 options 部分,而 le
| popOverContainerSelector | `string` | | 弹层挂载位置选择器,会通过`querySelector`获取 |
| clearable | `boolean` | | 是否展示清空图标 |
| overlay | `{ width: string \| number, align: "left" \| "center" \| "right" }` | | 弹层宽度与对齐方式 `2.8.0 以上版本` |
| showInvalidMatch | `boolean` | `false` | 选项值与选项组不匹配时选项值是否飘红 |
## 事件表

View File

@ -6302,7 +6302,7 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
>
<span>
<label
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--sm"
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--sm"
>
<input
type="checkbox"
@ -6317,7 +6317,7 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
3
/
7
3
</span>
</span>
@ -6445,166 +6445,6 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
</div>
</div>
</li>
<li
class="cxd-Tree-item cxd-Tree-item--isLeaf"
>
<div
class="cxd-Tree-itemLabel is-checked"
>
<span
class="cxd-Tree-itemArrowPlaceholder"
/>
<label
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--sm"
>
<input
checked=""
type="checkbox"
/>
<i />
<span
class=""
/>
</label>
<div
class="cxd-Tree-itemLabel-item"
>
<span
class="cxd-Tree-itemText"
title="w"
>
<span
class="is-invalid"
>
w
</span>
</span>
<div
class="cxd-Tree-item-icons"
/>
</div>
</div>
</li>
<li
class="cxd-Tree-item cxd-Tree-item--isLeaf"
>
<div
class="cxd-Tree-itemLabel is-checked"
>
<span
class="cxd-Tree-itemArrowPlaceholder"
/>
<label
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--sm"
>
<input
checked=""
type="checkbox"
/>
<i />
<span
class=""
/>
</label>
<div
class="cxd-Tree-itemLabel-item"
>
<span
class="cxd-Tree-itemText"
title="x"
>
<span
class="is-invalid"
>
x
</span>
</span>
<div
class="cxd-Tree-item-icons"
/>
</div>
</div>
</li>
<li
class="cxd-Tree-item cxd-Tree-item--isLeaf"
>
<div
class="cxd-Tree-itemLabel is-checked"
>
<span
class="cxd-Tree-itemArrowPlaceholder"
/>
<label
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--sm"
>
<input
checked=""
type="checkbox"
/>
<i />
<span
class=""
/>
</label>
<div
class="cxd-Tree-itemLabel-item"
>
<span
class="cxd-Tree-itemText"
title="y"
>
<span
class="is-invalid"
>
y
</span>
</span>
<div
class="cxd-Tree-item-icons"
/>
</div>
</div>
</li>
<li
class="cxd-Tree-item cxd-Tree-item--isLeaf"
>
<div
class="cxd-Tree-itemLabel is-checked"
>
<span
class="cxd-Tree-itemArrowPlaceholder"
/>
<label
class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--sm"
>
<input
checked=""
type="checkbox"
/>
<i />
<span
class=""
/>
</label>
<div
class="cxd-Tree-itemLabel-item"
>
<span
class="cxd-Tree-itemText"
title="z"
>
<span
class="is-invalid"
>
z
</span>
</span>
<div
class="cxd-Tree-item-icons"
/>
</div>
</div>
</li>
</ul>
</div>
</div>

View File

@ -969,6 +969,6 @@ test('Renderer:transfer with showInvalidMatch & unmatched do not add', async ()
expect(container).toMatchSnapshot();
expect(leftItems()!.length).toBe(7);
expect(leftItems()!.length).toBe(3);
expect(rightItems()!.length).toBe(4);
});

View File

@ -220,7 +220,10 @@ export class BaseTransferRenderer<
);
if (!indexes) {
newOptions.push(item);
newOptions.push({
...item,
visible: false
});
} else if (optionModified) {
const origin = getTree(newOptions, indexes);
newOptions = spliceTree(newOptions, indexes, 1, {
@ -251,7 +254,10 @@ export class BaseTransferRenderer<
);
if (!indexes) {
newOptions.push(value);
newOptions.push({
...value,
visible: false
});
} else if (optionModified) {
const origin = getTree(newOptions, indexes);
newOptions = spliceTree(newOptions, indexes, 1, {
@ -270,9 +276,13 @@ export class BaseTransferRenderer<
(option: Option) => option.deferApi || option.defer
));
isTreeDefer === true ||
((newOptions.length > options.length || optionModified) &&
setOptions(newOptions, true));
if (
isTreeDefer === true ||
newOptions.length > options.length ||
optionModified
) {
setOptions(newOptions, true);
}
// 触发渲染器事件
const rendererEvent = await dispatchEvent(