blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 09:52:57 +08:00
Code Issues Projects Releases Wiki Activity

fix(Picker): currentColumns calculation

Browse Source
This commit is contained in:
chenjiahan 2022-01-20 17:49:31 +08:00 committed by neverland
parent ff69fdacc7
commit 113e1b7a62
1 changed files with 18 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/vant/src/picker/Picker.tsx
View File

@ -77,10 +77,7 @@ export default defineComponent({
emits: ['confirm', 'cancel', 'change', 'update:modelValue'], emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const hasOptions = ref(false);
const selectedValues = ref(props.modelValue); const selectedValues = ref(props.modelValue);
const currentColumns = ref<PickerColumn[]>([]);
const { children, linkChildren } = useChildren(PICKER_KEY); const { children, linkChildren } = useChildren(PICKER_KEY);
linkChildren(); linkChildren();
@ -101,6 +98,22 @@ export default defineComponent({
getColumnsType(props.columns, fields.value) getColumnsType(props.columns, fields.value)
); );
const currentColumns = computed<PickerColumn[]>(() => {
const { columns } = props;
switch (columnsType.value) {
case 'multiple':
return columns as PickerColumn[];
case 'cascade':
return formatCascadeColumns(columns, fields.value, selectedValues);
default:
return [columns];
}
});
const hasOptions = computed(() =>
currentColumns.value.some((options) => options.length)
);
const selectedOptions = computed(() => const selectedOptions = computed(() =>
currentColumns.value.map((options, index) => currentColumns.value.map((options, index) =>
findOptionByValue(options, selectedValues.value[index], fields.value) findOptionByValue(options, selectedValues.value[index], fields.value)
@ -111,12 +124,6 @@ export default defineComponent({
selectedValues.value[columnIndex] = value; selectedValues.value[columnIndex] = value;
if (columnsType.value === 'cascade') { if (columnsType.value === 'cascade') {
currentColumns.value = formatCascadeColumns(
props.columns,
fields.value,
selectedValues
);
// reset values after cascading // reset values after cascading
selectedValues.value.forEach((value, index) => { selectedValues.value.forEach((value, index) => {
const options = currentColumns.value[index]; const options = currentColumns.value[index];
@ -241,33 +248,15 @@ export default defineComponent({
); );
}; };
const formatColumns = (
columns: PickerColumn | PickerColumn[]
): PickerColumn[] => {
switch (columnsType.value) {
case 'multiple':
return columns as PickerColumn[];
case 'cascade':
return formatCascadeColumns(columns, fields.value, selectedValues);
default:
return [columns];
}
};
watch( watch(
() => props.columns, currentColumns,
(columns) => { (columns) => {
currentColumns.value = formatColumns(columns); columns.forEach((options, index) => {
currentColumns.value.forEach((options, index) => {
if (selectedValues.value[index] === undefined && options.length) { if (selectedValues.value[index] === undefined && options.length) {
selectedValues.value[index] = selectedValues.value[index] =
getFirstEnabledOption(options)[fields.value.value]; getFirstEnabledOption(options)[fields.value.value];
} }
}); });
hasOptions.value = currentColumns.value.some(
(options) => !!options.length
);
}, },
{ immediate: true } { immediate: true }
); );