700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > elementui下拉框选择图片_Element-UI中Select选择器详解

elementui下拉框选择图片_Element-UI中Select选择器详解

时间:2019-09-26 15:45:36

相关推荐

elementui下拉框选择图片_Element-UI中Select选择器详解

image

前言

最近开发的后台管理系统项目采用Vue+Element-UI技术架构,在使用Elment-UI中Select组件的时候遇到了比较多的操作难题,官网上关于这个组件的使用文档介绍的不是很详细,仅仅提供了一些基本用法,很多拓展场景都没有涉及到,在查阅了大量资料之后终于将目前的需求都完美解决了,这里整理一些Select组件的使用方案,希望能帮到有同样需求的同学。

项目已上传github,欢迎大家下载交流。

项目运行

# 克隆到本地

git clone git@:Hanxueqing/Element-select.git

# 安装依赖

npm install

# 开启本地服务器localhost:8080

yarn serve

# 发布环境

yarn build

使用场景

局部引入Select组件

注意这里引入Select组件的时候还需要引入Option,不然下拉列表渲染不出来,他们是两个单独的组件。

import { Select, Option} from element-ui

Vue.use(Select)

Vue.use(Option)

使用下拉菜单展示数据项

v-model的值为当前被选中的el-option的 value 属性值,输入框中显示的为label属性值。

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value"

:disabled="item.disabled">

我们将要显示在下拉菜单中的数据写在options数组中,给label属性赋值姓名,让输入框显示我们选中的姓名。

export default {

data() {

return {

options: [{

value: 选项1,

company: 腾讯,

label: 马化腾,

school: 深圳大学

}, {

value: 选项2,

company: 美团,

label: 王兴,

school: 清华大学

}, {

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。