elementui表单下拉框选择
时间: 2023-09-03 18:10:36 浏览: 101
下拉选择框
要使用ElementUI的下拉框选择,需要先引入相关的组件:
```html
<!-- 引入element-ui的样式文件 -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入element-ui的JS文件 -->
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
```
然后在Vue的模板中使用`el-select`和`el-option`组件来实现下拉框选择:
```html
<template>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
```
在Vue的脚本中,需要定义下拉框所需要的数据和选中的值:
```js
export default {
data() {
return {
selectedValue: '', // 选中的值
options: [ // 下拉框选项
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
]
}
}
}
```
这样就可以实现基本的下拉框选择功能了。如果需要添加更多的配置项,可以查看ElementUI的官方文档。
阅读全文