图像
前言
最近开发的后台管理系统项目采用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属性的值。
我们将要在下拉菜单中显示的数据写入选项字段中，并在label属性中给出形参名称，以便输入框显示我们选择的名称。
export default {
data() {
return {
options: [{
value: '选项1',
company: '腾讯',
label: '马化腾',
school: '深圳大学'
}, {
value: '选项2',
company: '美团',
label: '王兴',
school: '清华大学'
}, {
value: '选项3',
company: '小米',
label: '雷军',
school: '武汉大学'
}, {
value: '选项4',
company: '今日头条',
label: '张一鸣',
school: '南开大学'
}, {
value: '选项5',
company: '红杉资本',
label: '沈南鹏',
school: '耶鲁大学'
}],
value: ''
}
}
}
效果演示：
图像
设置选择的默认值
只需将默认值分配给绑定到 v-model 的数据即可。 这里我们将v-model绑定到value上，因此数据中的value参数默认为“马化腾”。
value: '马化腾'
在输入框中按回车键选择第一个匹配项
el-select标签中添加default-first-option属性，需要与filterable或remote配合使用。
在下拉菜单中，显示多个数据
目前我们为options字段中的每条数据定义了三个数组，分别是公司、姓名、完成的大学，但是下拉列表中只能显示姓名，所以我们需要自定义HTML模板并插入进入 el-option 中的插槽。
{{ item.company }}
{{ item.label }}
{{ item.school }}
效果演示：
图像
为el-select添加唯一的类名
我们更改了列表项的样式，但页面中可能会使用多个选择组件。 直接改变会影响全局风格。 当页面渲染时，el-select将始终渲染为body级别旁边的div。 我们没有办法通过父类来限制它，所以我们需要给它自己添加一个类名。
.el-select-dropdown__item span{
width:100px;
text-align:center;
}
按照通常的方式给el-select添加class = "optionsContent"，没有生效，给el-select添加一个父标签
把el-select包裹起来也是没用的。
在控制台查看渲染结果，可以看到类名和div根本没有渲染。
图像
这里需要将class改为proper-class
通过popper-class自定义一个类，这样就可以在控制台看到了。 页面渲染的自定义类的效果，类名已经添加成功：
图像
根据输入条件进行模糊查询
有时我们需要根据用户在输入框中输入的内容提供相应的列表项。 这时就需要给el-select添加filterable属性来启用搜索功能。
效果演示：
图像
当我们想要实现对输入拼音首字母的检索时，我们需要使用filter-method向其传递一个function方法。
默认情况下，Select 将查找其 label 属性包含输入值的所有选项。 如果你想使用其他搜索逻辑，你可以传入一个过滤方法。 filter-method是一个Function，当输入值改变时会被调用，参数为当前输入值。
为options中的每个数据项添加一个szm数组，并赋值为名字的拼音首字母
{
value: '选项1',
company: '腾讯',
label: '马化腾',
school: '深圳大学',
szm:'mht'
}
将过滤器方法绑定到 el-select 标签中的过滤器方法
在方法中编译过滤方法
filter(v) {
// 对绑定数据赋值
this.options = this.copy.filter((item) => {
// 如果直接包含输入值直接返回true
const val = v.toLowerCase()
if (item.label.indexOf(val) !== -1) return true
if (item.szm.substring(0, 1).indexOf(val) !== -1) return true
if (item.szm.indexOf(val) !== -1) return true
})
}
在mounted中给出复制数据参数并保留数据源
mounted () {
// 保留数据源
this.copy = Object.assign(this.options)
}
效果演示：
图像
在 Select 组件的内部插入内容
当需要在select的输入框中插入内容时，需要使用组件提供的slot签名socket，name值为：prefix。
互联网大佬
图像
在选项下拉列表中插入内容
如果我们需要在Option下拉列表中插入内容elementui下拉校验，官方还为我们提供了一个插槽匿名插孔。 例如，我们在数据项之前添加一个标头：
姓名
卡号
手机号
图像
外部组件获取下拉列表的选中项数据
我们需要将选中的数据显示在外部页面的下拉列表中，并将item.value绑定到el-option标签中的值，那么v-model中的值就会获取选中对象的值，如果形参是 item ，则获取选中的对象，返回值可以形参化为change事件中需要的变量。
我们将showMessage方法绑定到el-select的chagestorm上，参数为$event
我们先把获取到的参数复制一下，就可以得到选中的对象了
图像
在methods中定义showMessage方法，并给出相应的数据参数
showMessage(e){
console.log(e)
this.v_company = e.company;
this.v_label = e.label;
this.v_school = e.school
}
在页面上显示我们获取到的数据
公司：{{v_company}}
姓名：{{v_label}}
毕业院校：{{v_school}}
效果演示：
图像
当输入框为空时，不显示下拉列表，当输入数据时，根据输入内容显示对应的列表项
现在默认是输入框获得焦点时显示所有列表项，但是当我们涉及到一些机密功能时，我们不想显示所有列表项，比如选择成员，就无法显示所有成员一旦我们打开它，就会得到信息。 所以一开始需要在data中设置一个data optionVisible: false来控制下拉列表的显示和隐藏。
下拉列表的默认样式也需要一些改变，去掉小平底、边框、最小长度和包阴影。
.popper__arrow{
display: none!important;
}
.el-select-dropdown{
box-shadow: none!important;
min-width: 0px;
border:0!important;
}
在el-select和el-option中添加v-show命令v-show = 'optionVisible'elementui下拉校验，在el-select标签上绑定@keyup.native = "showOption"方法，编写showOption方法，并判断数据宽度输入框中不为0时，显示下拉列表。
showOption(){
let inputContent = document.getElementsByClassName('el-input__inner')[0].value
console.log(inputContent.length)
if(inputContent.length != 0){
this.optionVisible = true;
}
}
效果演示：
图像
最后编辑于：2019.08.17 13:43:23
版权归作者所有，转载或内容合作请联系作者
