Segmented
Segmented control
Markup Schema Example
vue
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, Segmented, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
const form = createForm()
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
FormItem,
Segmented,
},
})
function log(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
name="segmented"
title="Segmented"
x-decorator="FormItem"
x-component="Segmented"
:enum="[
{ label: 'By Day', value: 'day' },
{ label: 'By Week', value: 'week' },
{ label: 'By Month', value: 'month' },
]"
/>
<SchemaStringField
name="segmented-slot"
title="Slot Rendering"
x-decorator="FormItem"
x-component="Segmented"
:enum="[
{ label: 'Now', value: 'now' },
{ label: 'Today', value: 'today' },
{ label: 'This Week', value: 'week' },
]"
:x-content="{
default: (props, { attrs }) => {
const item = attrs.item
return `Slot rendered - ${typeof item === 'object' ? item.label : item}`
},
}"
/>
</SchemaField>
<Submit @submit="log">
Submit
</Submit>
</FormProvider>
</template>Segmented:
Slot Rendering:
查看源码
JSON Schema Example
vue
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Form, FormItem, Segmented, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'
const schema = {
type: 'object',
properties: {
segmented: {
'type': 'string',
'title': 'Segmented',
'x-decorator': 'FormItem',
'x-component': 'Segmented',
'enum': [
{ label: 'By Day', value: 'day' },
{ label: 'By Week', value: 'week' },
{ label: 'By Month', value: 'month' },
],
},
},
}
const form = createForm()
const { SchemaField } = createSchemaField({
components: {
FormItem,
Segmented,
},
})
async function onSubmit(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<Form :form="form">
<SchemaField :schema="schema" />
<Submit @submit="onSubmit">
Submit
</Submit>
</Form>
</template>查看源码
Template Example
vue
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, Segmented, Submit } from '@silver-formily/element-plus'
import { Field, FormProvider } from '@silver-formily/vue'
const form = createForm()
function log(value: Record<string, any>) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<Field
name="segmented"
title="Segmented"
:decorator="[FormItem]"
:component="[Segmented]"
:data-source="[
{ label: 'By Day', value: 'day' },
{ label: 'By Week', value: 'week' },
{ label: 'By Month', value: 'month' },
]"
/>
<Field
name="segmented-slot"
title="Slot Rendering"
:decorator="[FormItem]"
:component="[Segmented]"
:data-source="[
{ label: 'Now', value: 'now' },
{ label: 'Today', value: 'today' },
{ label: 'This Week', value: 'week' },
]"
>
<template #default="{ item }">
Custom {{ typeof item === 'object' ? item.label : item }}
</template>
</Field>
<Submit @submit="log">
Submit
</Submit>
</FormProvider>
</template>Segmented:
Slot Rendering:
查看源码
API
See https://element-plus.org/en-US/component/segmented.html
Extended Props
| Prop | Type | Description | Default |
|---|---|---|---|
options | array | Option config array. In most cases, prefer configuring via dataSource. | [] |
Segmented Slot
| Slot | Description | Type |
|---|---|---|
default | Scoped slot for customizing option render | object |
Object values and property selection
Set optionAsValue: true to submit option objects. The optional optionValueKeys?: string[] strictly selects top-level properties. Omit it to return complete objects; an empty array returns an empty object, and missing properties are ignored. optionAsValue defaults to false.
Projection affects only the submitted value, never dataSource. Include the identity property (value, or the configured nodeKey / rowKey) in the allowlist. Labels are resolved from the complete data source, so the form value does not need a label.
ts
const componentProps = {
optionAsValue: true,
optionValueKeys: ['value'],
}
// dataSource: [{ value: 1, label: 'One', extra: 'Business data' }]
// Form value: { value: 1 }