Element Plus Pro

Appearance

选择器 Pro ​

对选择器进行扩展。

基础用法 ​

size="small"

Select

size="default"

Select

size="large"

Select

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProSelect } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  selectValue1: null,
  selectValue2: null,
  selectValue3: null,
  selectData: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>size="small"</h4>
  <ProSelect :data="state.selectData" v-model="state.selectValue1" size="small" />
  <h4>size="default"</h4>
  <ProSelect :data="state.selectData" v-model="state.selectValue2" size="default" />
  <h4>size="large"</h4>
  <ProSelect :data="state.selectData" v-model="state.selectValue3" size="large" />
</template>

<style lang="scss" scoped>
h4 {
  padding: 15px 0;
}
</style>

多选 ​

size="small"

Select

size="default"

Select

size="large"

Select

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProSelect } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  selectValue1: null,
  selectValue2: null,
  selectValue3: null,
  selectData: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>size="small"</h4>
  <ProSelect :data="state.selectData" v-model="state.selectValue1" size="small" multiple />
  <h4>size="default"</h4>
  <ProSelect :data="state.selectData" v-model="state.selectValue2" size="default" multiple />
  <h4>size="large"</h4>
  <ProSelect :data="state.selectData" v-model="state.selectValue3" size="large" multiple />
</template>

<style lang="scss" scoped>
h4 {
  padding: 15px 0;
}
</style>

显示&禁用 ​

基础控制

display: true | false

disabled: true | false

Select

动态控制

display: function (option) { ... return true | false }

disabled: function (option) { ... return true | false }

Select

整体禁用

disabled: true | false

Select

示例代码 ​

vue
<script setup>
import { ref, reactive } from 'vue'
import { ProSelect } from '../../../../packages/components'
import 'element-plus/dist/index.css'

const state = reactive({
  // 基础控制
  selectValue1: null,
  selectData1: [
    { label: '北京', value: 'beijing', display: false },
    { label: '上海', value: 'shanghai', disabled: true },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ],
  // 动态控制
  selectValue2: null,
  selectData2: [
    { label: '北京', value: 'beijing', display: (option) => false },
    { label: '上海', value: 'shanghai', disabled: (option) => true },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ],
  // 整体禁用
  selectValue3: null,
  selectData3: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' },
    { label: '杭州', value: 'hangzhou' }
  ]
})
</script>

<template>
  <h4>基础控制</h4>
  <p>display: true | false</p>
  <p>disabled: true | false</p>
  <ProSelect :data="state.selectData1" v-model="state.selectValue1" size="small" />
  <h4>动态控制</h4>
  <p>display: function (option) { ... return true | false }</p>
  <p>disabled: function (option) { ... return true | false }</p>
  <ProSelect :data="state.selectData2" v-model="state.selectValue2" size="default" />
  <h4>整体禁用</h4>
  <p>disabled: true | false</p>
  <ProSelect :data="state.selectData3" v-model="state.selectValue3" size="large" disabled />
</template>

<style lang="scss" scoped>
h4 {
  padding: 25px 0 0;
}
</style>

事件 ​

ProSelect API ​

属性说明类型默认值
model-value/v-model选中项绑定值String Number Boolean Object Array-
multiple是否多选Booleanfalse
disabled是否禁用Booleanfalse
value-key作为 value 唯一标识的键名，绑定值为对象类型时必填Stringvalue
size输入框尺寸String：large、default、small-
clearable是否可以清空选项Booleanfalse
collapse-tags多选时是否将选中值按文字的形式展示Booleanfalse
data选择项数据
[详见【Option API】]		Array[Object][]

Option API ​

属性说明类型默认值
value选项的值String Number Boolean Object-
label选项的标签，若不设置则默认与value相同String Number-
display是否显示该选项Boolean: true | false
Function: (data) => Boolean		true
disabled是否禁用该选项Boolean: true | false
Function: (data) => Boolean		false

Events ​

Slots ​