Are you an LLM? You can read better optimized documentation at /front/component/ma-form/examples/conditional-rendering.md for this page in Markdown format
Conditional Rendering β
Demonstrates the conditional rendering functionality for dynamically controlling field visibility based on form data, including linked displays and complex conditional judgments.
Features β
- Dynamic Visibility Control: Control field show/hide based on form data
- Dependency Management: Declare field dependencies through dependencies
- Complex Condition Support: Supports multi-condition combination judgments
- Performance Optimization: Only recalculates conditions when dependent fields change
- Two Rendering Modes: show and hide properties provide different display control strategies
Conditional Rendering Methods β
MaForm provides two conditional rendering methods, each with specific use cases:
show Property (Recommended) β
Does not render DOM when conditions are not met, offering optimal performance for most scenarios:
typescript
{
label: 'Company Name',
prop: 'companyName',
render: 'input',
show: (item, model) => model.userType === 'company',
dependencies: ['userType']
}1
2
3
4
5
6
7
2
3
4
5
6
7
Characteristics:
- β No DOM rendering, best performance
- β Doesn't occupy page space
- β Suitable for most scenarios
- β οΈ Slight initial flickering possible
hide Property β
Hides DOM when conditions aren't met but still renders it, suitable for frequently toggled scenarios:
typescript
{
label: 'Email Notifications',
prop: 'emailNotifications',
render: 'switch',
hide: (item, model) => !model.enableNotifications,
dependencies: ['enableNotifications']
}1
2
3
4
5
6
7
2
3
4
5
6
7
Characteristics:
- β Smooth switching without flickering
- β Maintains stable form structure
- β Still renders DOM
- β Occupies page space
Use Case Comparison β
show Property Use Cases β
1. Display different fields based on user type
typescript
const userTypeFields = [
{
label: 'User Type',
prop: 'userType',
render: 'select',
options: [
{ label: 'Individual User', value: 'personal' },
{ label: 'Enterprise User', value: 'company' }
]
},
{
label: 'Real Name',
prop: 'realName',
render: 'input',
show: (item, model) => model.userType === 'personal',
dependencies: ['userType']
},
{
label: 'Company Name',
prop: 'companyName',
render: 'input',
show: (item, model) => model.userType === 'company',
dependencies: ['userType']
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2. Permission level control
typescript
const permissionFields = [
{
label: 'User Permission',
prop: 'permission',
render: 'select',
options: [
{ label: 'Regular User', value: 'user' },
{ label: 'Administrator', value: 'admin' },
{ label: 'Super Administrator', value: 'superAdmin' }
]
},
{
label: 'Management Scope',
prop: 'adminScope',
render: 'checkboxGroup',
show: (item, model) => ['admin', 'superAdmin'].includes(model.permission),
dependencies: ['permission']
},
{
label: 'System Configuration Permission',
prop: 'systemConfig',
render: 'switch',
show: (item, model) => model.permission === 'superAdmin',
dependencies: ['permission']
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
hide Property Use Cases β
1. Frequently toggled feature switches
typescript
const notificationFields = [
{
label: 'Enable Notifications',
prop: 'enableNotifications',
render: 'switch'
},
{
label: 'Email Notifications',
prop: 'emailNotifications',
render: 'switch',
// Using hide maintains layout stability with smoother switching
hide: (item, model) => !model.enableNotifications,
dependencies: ['enableNotifications']
},
{
label: 'SMS Notifications',
prop: 'smsNotifications',
render: 'switch',
hide: (item, model) => !model.enableNotifications,
dependencies: ['enableNotifications']
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2. Form validation hints
typescript
{
label: 'Password Strength Hint',
prop: 'passwordStrengthTip',
render: 'input',
renderProps: {
readonly: true,
placeholder: 'Password Strength: Weak'
},
// Using hide avoids layout jumps
hide: (item, model) => !model.password || model.password.length === 0,
dependencies: ['password']
}1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Complex Condition Scenarios β
1. Multiple Condition Judgments β
typescript
{
label: 'Special Feature',
prop: 'specialFeature',
render: 'input',
show: (item, model) => {
// Multiple conditions: must satisfy all simultaneously
return model.userLevel >= 5 &&
model.subscription === 'premium' &&
model.accountAge > 365
},
dependencies: ['userLevel', 'subscription', 'accountAge']
}1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2. Cascading Conditional Rendering β
typescript
const cascadeFields = [
{
label: 'Require Address',
prop: 'needAddress',
render: 'switch'
},
{
label: 'Country',
prop: 'country',
render: 'select',
show: (item, model) => model.needAddress,
dependencies: ['needAddress']
},
{
label: 'Province',
prop: 'province',
render: 'select',
// Cascading condition: requires address AND China selection
show: (item, model) => model.needAddress && model.country === 'china',
dependencies: ['needAddress', 'country']
},
{
label: 'City',
prop: 'city',
render: 'select',
// More complex cascade: requires address AND selected province
show: (item, model) => model.needAddress && !!model.province,
dependencies: ['needAddress', 'province']
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
3. Dynamic Condition Calculation β
typescript
// Use computed properties to optimize complex conditions
const isAdvancedUser = computed(() => {
return formData.value.userLevel >= 10 &&
formData.value.vipStatus === 'active' &&
formData.value.experience > 1000
})
const advancedField = {
label: 'Advanced Feature',
prop: 'advancedFeature',
render: 'input',
show: (item) => isAdvancedUser.value,
dependencies: ['userLevel', 'vipStatus', 'experience']
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Dependency Optimization β
1. Precise Dependency Declaration β
typescript
// β
Recommended: Precise dependencies
{
show: (item, model) => model.userType === 'admin',
dependencies: ['userType'] // Only depends on fields that truly affect display
}
// β Avoid: Over-dependency
{
show: (item, model) => model.userType === 'admin',
dependencies: ['userType', 'userName', 'email', 'phone'] // Includes unnecessary dependencies
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2. Avoid Circular Dependencies β
typescript
// β Error: May cause circular dependencies
{
label: 'Field A',
prop: 'fieldA',
show: (item, model) => model.fieldB === 'show',
dependencies: ['fieldB']
},
{
label: 'Field B',
prop: 'fieldB',
show: (item, model) => model.fieldA === 'active',
dependencies: ['fieldA'] // Circular dependency
}
// β
Correct: Use common control field
{
label: 'Control Switch',
prop: 'enableFeatures',
render: 'switch'
},
{
label: 'Field A',
prop: 'fieldA',
show: (item, model) => model.enableFeatures,
dependencies: ['enableFeatures']
},
{
label: 'Field B',
prop: 'fieldB',
show: (item, model) => model.enableFeatures,
dependencies: ['enableFeatures']
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Performance Optimization Recommendations β
1. Prefer show Property β
typescript
// β
Recommended: Use show, doesn't render hidden elements
{
show: (item, model) => model.userType === 'admin'
}
// β οΈ Use with caution: Uses hide, still renders but hides
{
hide: (item, model) => model.userType !== 'admin'
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
2. Cache Complex Calculations β
typescript
// Cache complex condition calculations with computed properties
const complexCondition = computed(() => {
const { userLevel, subscription, accountAge } = formData.value
return userLevel >= 5 &&
subscription === 'premium' &&
accountAge > 365
})
const field = {
label: 'Special Feature',
prop: 'specialFeature',
render: 'input',
show: () => complexCondition.value,
dependencies: ['userLevel', 'subscription', 'accountAge']
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
3. Reduce Dependency Count β
typescript
// β
Merge related logic to reduce dependencies
{
show: (item, model) => {
// Combine related conditions in one function
return model.status === 'active' && model.level > 3
},
dependencies: ['status', 'level']
}
// β Avoid: Scattered condition checks
{
show: (item, model) => model.status === 'active',
dependencies: ['status', 'level', 'type', 'category']
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Debugging Techniques β
1. Condition Function Debugging β
typescript
{
label: 'Debug Field',
prop: 'debugField',
render: 'input',
show: (item, model) => {
const condition = model.userType === 'admin'
// Debug information in development environment
if (process.env.NODE_ENV === 'development') {
console.log(`Field ${item.prop} display condition:`, {
userType: model.userType,
condition,
dependencies: item.dependencies
})
}
return condition
},
dependencies: ['userType']
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2. Dependency Tracking β
typescript
// Create debug utility function
const createDebugShow = (conditionFn: Function, debugName: string) => {
return (item: any, model: any) => {
const result = conditionFn(item, model)
console.log(`[${debugName}] Condition check:`, {
result,
dependencies: item.dependencies,
dependencyValues: item.dependencies?.reduce((acc: any, dep: string) => {
acc[dep] = model[dep]
return acc
}, {})
})
return result
}
}
// Use debug utility
{
label: 'Test Field',
prop: 'testField',
render: 'input',
show: createDebugShow(
(item, model) => model.status === 'active',
'testField'
),
dependencies: ['status']
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Best Practices β
1. Clear Use Cases β
- show property: Suitable for most conditional rendering scenarios, best performance
- hide property: Suitable for frequently toggled scenarios requiring layout stability
2. Reasonable Dependency Design β
- Only declare fields that truly affect display as dependencies
- Avoid over-dependencies and circular dependencies
- Use computed properties to cache complex conditions
3. Consider User Experience β
- For frequently toggled scenarios, use hide property to avoid layout jumps
- For one-time display scenarios, use show property to save performance
- Provide appropriate transition animations to enhance experience