用途:el-segmented 是 Element Plus 提供的分段组件,用于展示多个选项并允许用户单选,常见于单选按钮组、类标签页控件、选项切换、视图模式切换等场景。
主要能力:通过 v-model 绑定选中值,options 传入选项数据;支持 size(''、'large'、'default'、'small')、block(占满父宽度)、disabled(禁用)、direction('horizontal' 或 'vertical')等属性;可通过 props 配置 value、label、disabled 对应的字段名,默认分别为 'value'、'label'、'disabled';提供 change 事件,参数为变化后的值;提供 default 插槽,作用域参数为 { item: Option },用于自定义选项渲染,例如图标加文字。
必要用法:基本写法为 <el-segmented v-model="value" :options="options" />。垂直排列加 direction="vertical";禁用加 disabled;占满宽度加 block;自定义内容使用 default 插槽;自定义字段映射使用 :props="{ label: 'name', value: 'id' }"。
适用场景:视图模式切换(如列表与网格)、标签式切换、有限空间下的选项选择、表单中的单选控件。
限制:资料仅提供组件 API 与用法示例,未提供版本要求、浏览器兼容性、无障碍支持、主题定制、性能表现及收费等信息。