select.md
1.45 KB
Select 选择器
在Element的el-select基础上的封装，直接通过数据列表配置选项
5f3c7155eb65dc5ac1b847f781a764b3aca47e49/examples/views/docs/component/select.md#">基础用法
:::snippet 通过dataSource属性设置数据源
<template>
<eagle-select v-model="selectValue" :dataSource="dataSource"></eagle-select>
</template>
<script>
export default {
data() {
return {
selectValue: 'A',
dataSource: [
{ label: '选项A', value: 'A' },
{ label: '选项B', value: 'B' }
]
}
},
}
</script>
:::
5f3c7155eb65dc5ac1b847f781a764b3aca47e49/examples/views/docs/component/select.md#">数据源
:::snippet 通过dataSource属性设置数据源，支持函数和Promise
<template>
<eagle-select v-model="selectValue1" :dataSource="getDataSource"></eagle-select>
</template>
<script>
export default {
data() {
return {
selectValue1: undefined
}
},
methods: {
getDataSource() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([
{ label: '选项A', value: 'A' },
{ label: '选项B', value: 'B' }
]);
}, 3000);
});
}
}
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 绑定值 | String,Array | - | - dataSource | 数据源或获取数据源的方法 | Array,Function,Promise | - | []
DataSource 数据源配置列表
参数|说明|类型|可选值|默认值 -|-|-|-|- label | 选项标签 | String | - | - value | 选项值 | String,Number,Object | - | -