Select

基本用法

透传了element-plus的所有属性，同时暴露了一个label，可以通过双向绑定同步更新。custom-label和custom-value用于自定义options中展示和绑定的值的字段。

请选择

<template>
  <bc-select
    v-model="select"
    v-model:label="label"
    width="180px"
    :options="options"
    @change="onChange"
  />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Basic',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const select = ref('')
const label = ref('')
const options = ref([
  { label: '维托里奥 维内托', value: 'vv' },
  { label: '安德烈亚 多利亚', value: 'Andrea Doria' },
])
function onChange(...args) {
  console.log(args)
}

</script>

Hide Source

远程数据源

请选择

<template>
  <bc-select v-model="select" width="180px" :api="getOptions" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Api',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const select = ref('');
function getOptions() {
  return Promise.resolve({
    data: [
      { label: '维托里奥 维内托', value: 'vv' },
      { label: '安德烈亚 多利亚', value: 'Andrea Doria' },
    ]
  })
}
</script>```

Hide Source

默认值

请选择

<template>
  <bc-select
    v-model="select"
    width="180px"
    :options="options"
    default-value="vv"
  />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Default',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const select = ref('');
const options = ref([
  { label: '维托里奥 维内托', value: 'vv' },
  { label: '安德烈亚 多利亚', value: 'Andrea Doria' },
])
</script>```

Hide Source

展示模式

维托里奥 维内托

<template>
  <div><el-switch v-model="isDisplay" /></div>
  <bc-select
    v-model="select"
    width="180px"
    :options="options"
    :only-display="isDisplay"
  />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Display',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const select = ref('vv')
const isDisplay = ref(true)
const options = ref([
  { label: '维托里奥 维内托', value: 'vv' },
  { label: '安德烈亚 多利亚', value: 'Andrea Doria' },
])
</script>```

Hide Source

绑定对象

请选择

""

<template>
  <bc-select
    v-model="select"
    width="180px"
    option-key="alias"
    custom-label="name"
    custom-value="detail"
    :options="options"
    @change="onChange"
  />
  <pre>{{JSON.stringify(select, null, 2)}}</pre>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'BindObject',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const select = ref('')
const options = ref([
  { name: '维内托 维托里奥', detail: {
    alias: 'vv',
    allName: 'Vittorio Veneto'
  }},
  { name: '安德烈亚 多利亚', detail: {
    alias: '女儿',
    allName: 'Andrea Doria'
  }},
])
function onChange(...args) {
  console.log(args)
}
</script>```

Hide Source

属性

属性	说明	类型	可选值	默认值
customLabel	选项显示值的字段	string	-	'label'
customValue	选项绑定值的字段	string	-	'value'
arrayName	远程数据的字段	string	-	'data'
label / v-model:label	绑定option的显示值	string	-	-
group	是否需要对options进行分组	boolean	-	false
children	option分组的依据，需要与group一起使用	boolean	-	false
defaultValue	初始化时的默认值	object / number / string / array	-	-
immediate	是否在初始化时请求远程数据	boolean	-	true
onlyDisplay	是否只读（以div包裹）	boolean	-	false
optionKey	选项的key值，在绑定值为对象时必填	string	-	'value'
width	选择框的宽度	string / number	-	-
api	获取远程数据的方法，返回一个promise对象。string时会通过config-provider获取api	function | string	-	-
options	选项列表	array	-	-
itemDisabled	选项中的禁用项，等价于element-plus中select-options的disabled	function(option): boolean	-	-

方法

方法	说明	参数
getOptions	获取当前选择框的选项列表	-
getLabel	获取指定label对应的value	label,默认为当前选中项

事件

事件名	说明	参数
change	原生change事件的增强，会同时包含选择对象本身	val, obj

Source

Docs