MG Design

Appearance

Select 选择器 ​

下拉选择，基于 el-select 封装，API 完全兼容，默认插槽放置 el-option。

基础用法 ​

请选择
查看代码
vue
<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <MgSelect v-model="value" placeholder="请选择">
    <el-option label="选项一" value="1" />
    <el-option label="选项二" value="2" />
  </MgSelect>
</template>

禁用状态 ​

禁用
查看代码
vue
<template>
  <MgSelect v-model="value" placeholder="禁用" disabled />
</template>

可清空 ​

可清空
查看代码
vue
<template>
  <MgSelect v-model="value" placeholder="可清空" clearable>
    <el-option label="选项一" value="1" />
    <el-option label="选项二" value="2" />
  </MgSelect>
</template>

Attributes ​

继承 Element Plus Select 的全部 Attributes。

参数说明类型默认值
model-value选中值string | number | boolean | object-
placeholder占位文本string-
disabled是否禁用booleanfalse
clearable可清空booleanfalse
multiple多选booleanfalse

差异 ​

MgSelect 追加 .mg-select 类名；默认插槽与 el-select 一致放置 el-option / el-option-group，迁移仅需替换标签。