image
前言
最近开发的后台管理系统项目采用Vue+Element-UI技术架构,在使用Elment-UI中Select组件的时候遇到了比较多的操作难题,官网上关于这个组件的使用文档介绍的不是很详细,仅仅提供了一些基本用法,很多拓展场景都没有涉及到,在查阅了大量资料之后终于将目前的需求都完美解决了,这里整理一些Select组件的使用方案,希望能帮到有同样需求的同学。
项目已上传github,欢迎大家下载交流。
项目运行
# 克隆到本地
git clone git@github.com: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: '清华大学'
}, {