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.

Sign up for GitHub

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

Jump to bottom

fix(checkbox): 修复全选时可以选中已禁用选项的问题 #1554

Merged
merged 1 commit into from
Sep 1, 2022
Merged

fix(checkbox): 修复全选时可以选中已禁用选项的问题 #1554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/checkbox/_example/group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<t-checkbox :check-all="true" label="全选" />
<t-checkbox value="选项一">选项一</t-checkbox>
<t-checkbox label="选项二" value="选项二" />
<t-checkbox label="选项三" value="选项三" />
<t-checkbox label="选项三" value="选项三" :disabled="true" />
</t-checkbox-group>

<br />
Expand Down
16 changes: 7 additions & 9 deletions src/checkbox/group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,16 @@ export default defineComponent({
const optionList = ref<Array<CheckboxOptionObj>>([]);

const intersectionLen = computed<number>(() => {
if (!isArray(innerValue.value)) return 0;
const values = optionList.value.map((item) => item.value);
if (isArray(innerValue.value)) {
const n = intersection(innerValue.value, values);
return n.length;
}
return 0;
const n = intersection(innerValue.value, values);
return n.length;
});

const isCheckAll = computed<boolean>(() => {
if (isArray(innerValue.value) && innerValue.value.length !== optionList.value.length - 1) {
return false;
}
return intersectionLen.value === optionList.value.length - 1;
const excludeCount = optionList.value.filter((item) => item.disabled || item.checkAll).length;
if (isArray(innerValue.value) && innerValue.value.length !== optionList.value.length - excludeCount) return false;
return intersectionLen.value === optionList.value.length - excludeCount;
});

const indeterminate = computed<boolean>(
Expand Down Expand Up @@ -76,6 +73,7 @@ export default defineComponent({
for (let i = 0, len = optionList.value.length; i < len; i++) {
const item = optionList.value[i];
if (item.checkAll) continue;
if (item.disabled) continue;
val.add(item.value);
if (maxExceeded.value) break;
}
Expand Down
3 changes: 2 additions & 1 deletion test/snap/__snapshots__/csr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26051,10 +26051,11 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
</span>
</label>
<label
class="t-checkbox"
class="t-checkbox t-is-disabled"
>
<input
class="t-checkbox__former"
disabled=""
name=""
type="checkbox"
value="选项三"
Expand Down
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ exports[`ssr snapshot test > ssr test ./src/checkbox/_example/base.vue 1`] = `"<

exports[`ssr snapshot test > ssr test ./src/checkbox/_example/controlled.vue 1`] = `"<div data-v-032bf202><!-- 单个 Checkbox 受控模式 --><label class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->语法糖（v-model）<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控属性<!--]--></span></label><label class=\\"t-checkbox\\" data-v-032bf202><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->非受控属性<!--]--></span></label><br data-v-032bf202><br data-v-032bf202><br data-v-032bf202><!-- 复选框框组受控模式 --><div class=\\"t-checkbox-group\\" data-v-032bf202><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"1\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控模式选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"2\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控模式选项二<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"3\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控模式选项三<!--]--></span></label><!--]--></div></div>"`;

exports[`ssr snapshot test > ssr test ./src/checkbox/_example/group.vue 1`] = `"<div class=\\"tdesign-demo-block-column\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div><div><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"true\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label></div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项一</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项二<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label><!--]--></div><br><div>方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式四：组件内置全选功能，非受控用法</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div></div>"`;
exports[`ssr snapshot test > ssr test ./src/checkbox/_example/group.vue 1`] = `"<div class=\\"tdesign-demo-block-column\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div><div><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"true\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label></div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项一</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项二<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label class=\\"t-checkbox t-is-disabled\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" disabled indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label><!--]--></div><br><div>方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式四：组件内置全选功能，非受控用法</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div></div>"`;

exports[`ssr snapshot test > ssr test ./src/checkbox/_example/link.vue 1`] = `
"<div data-v-277157aa><div class=\\"demo-checkbox-row-desc\\" data-v-277157aa>选中值: [
Expand Down