vue实现下拉框全选和输入匹配
实际项目中的一个需求：
点击文本框，弹出带有复选框的选项，然后获取选中项的数据，传给后面的一个功能。在文本框输入内容，也会动态的匹配下拉列表，并且列表带有全选功能。
朴素的效果图：
我选择了用vue实现，算是vue的一次练手吧。不会写的地方也百度了一下。
难点有两个，一个是全选。全选不光是点击全选复选框，选项跟着选中或不选中。还包括反向的选择，就是如果把所有选项选中了，那么“全选”也要跟着选中，而有任何一项未选中，那么“全选”则处于未选中状态。也就是说这是个互动的过程。只有做到这点，才是一个好的用户体验。
我是在循环数据的每一项加了一个表示选中状态的值lineCheck。全选和选项的点击分别写。点击全选中，把选项的状态置为和其一致就可以。
点击选项时，利用every方法，只有每一项为真（也就是选中），全选才为真，否则为假（未选中）。
第二个难点就是输入时的匹配问题，是在computed中写了一个searchLists，下拉列表的for循环也用的这个数据，全选时遍历的也是这个数据。
其他tips：
1）表单的操作离不开v-model
2）点击事件加上stop修饰符，阻止冒泡
3）复选框的事件用的change
4）注意用label，这样点击文字也有效果，体验更佳
5）点击页面空白处，隐藏下拉列表
总体来说，用户体验做的还是不错的。
贴出完整代码：（没有好看的样式，就是最朴素的效果，毕竟css对于前端人员来说是最最简单的）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框全选</title>
<link rel="stylesheet" href="css/this.css" />
</head>
<body>
<div class="m-select-wrap" id="v_app">
<div class="title">
<input type="text" placeholder="输入/勾选" v-model="searchLine" @click.stop="showList" @focus="inputFocus">
<span class="show-list" @click.stop="toggleList">∨</span>
<span class="select-con">选中了：{{selectCon}}</span>
</div>
<ul v-if="isShow" @click.stop="showList">
<li>
<label><input type="checkbox" v-model="checkAllState" @change="checkAll"> 全选</label>
</li>
<li v-for="item in searchLists">
<label :id="item.lineId"><input type="checkbox" v-model="item.lineCheck" @change="checkOne(item)"> {{item.lineName}}</label>
</li>
</ul>
</div> <script src="js/vue.js"></script>
<script>
var lines = [
{
lineId: 'line1',
lineName: '数据1',
lineCheck: false
},
{
lineId: 'line2',
lineName: '数据2',
lineCheck: false
},
{
lineId: 'line3',
lineName: '数据3',
lineCheck: false
},
{
lineId: 'line4',
lineName: '数据4',
lineCheck: false
},
{
lineId: 'line5',
lineName: '数据5',
lineCheck: false
}
] new Vue({
el: '#v_app',
data: {
//数据
lineList: lines,
//选项的选中状态
checkAllState: false,
//选中的数据
checkedList: [],
//文本框的值
searchLine: '',
//下拉列表是否显示
isShow:false,
//选中的内容
selectCon:''
},
methods: {
//全选
checkAll: function() {
for (var i = 0; i < this.searchLists.length; i++) {
this.searchLists[i].lineCheck = this.checkAllState;
}
this.getCheckData();
},
//选择单个
checkOne: function(item) {
this.searchLists.every(function(item) {
return item.lineCheck == true;
}) ? this.checkAllState = true : this.checkAllState = false;
this.getCheckData();
},
//获取选中的数据
getCheckData: function() {
this.checkedList = this.searchLists.filter(function(item) {
return item.lineCheck == true;
}) //选中的值显示到输入框中
this.selectCon='';
for(var i=0;i<this.checkedList.length;i++){
this.selectCon+=this.checkedList[i].lineName+',';
}
},
//切换下拉列表
toggleList:function(){
this.isShow=!this.isShow;
},
//显示下拉列表
showList:function(){
this.isShow=true;
},
//文本框获得焦点时文字被选中
inputFocus:function(e){
e.currentTarget.select();
}
},
computed: {
//输入框筛选列表
searchLists: function() {
var _search = this.searchLine;
if (_search) {
return this.lineList.filter(function(item) {
return Object.keys(item).some(function(key) {
return String(item.lineName).toLowerCase().indexOf(_search) > -1
})
})
}
return this.lineList;
}
},
mounted:function(){
var _this=this;
//点击页面空白处隐藏下拉列表
document.addEventListener('click',function(){
_this.isShow=false;
});
}
});
</script>
</body>
</html>
css：
.m-select-wrap{width: 300px;margin: 20px auto 0;}
.m-select-wrap .title{width: 300px;position: relative;}
.m-select-wrap input[type="text"]{width: 300px;height: 40px;padding: 0 5px;}
.m-select-wrap .select-con{position: absolute;left: 105%;white-space: nowrap;line-height: 40px;}
.m-select-wrap .show-list{position: absolute; width: 30px;height: 40px;line-height: 38px;border: 1px solid #aaa;right:;text-align: center;cursor: pointer;}
.m-select-wrap ul{border: 1px solid #ccc;padding:0 30px 10px 10px;}
.m-select-wrap li{margin-top: 10px;}
vue实现下拉框全选和输入匹配的更多相关文章
- jquery实现下拉框多选
一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...
- combobox中动态加入几个checkbox，实现下拉框多选
combobox中动态加入几个checkbox,实现下拉框多选,将一个checkbox选中时其内容就会在combobox中显示出来,将另一个checkbox选中时其内容会跟在第一个checkbox的内 ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- Excel怎么下拉框多选
打开Exlce, 确定,然后 右击查看代码,把这段代码复制到新建的文件里面 此时Excel会给出提示,选择否,,系统会提示保存,在保存的时候选择启用宏的工作簿然后保存,此时Excel下拉框多选就搞定了 ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- VUE 单选下拉框Select中动态加载 默认选中第一个
<lable>分类情况</lable> <select v-model="content.tid"> <option v-for=&quo ...
- QT实现输入框与下拉框提示并可模糊匹配
功能:支持下拉框选择.手动输入更改和模糊匹配 组件:QLineEdit.QComboBox.QCompleter.QStringListModel 一.组件介绍 1.1 QLineEdit QLine ...
- easyui combotree下拉框多选赋值
发现jquery.easyui.min.js 1.3.4版本的用setValues给多选下拉框赋值不成功,只能用1.3.1版本的 Html代码: <input id="ProductL ...
- checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果
前台代码 01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head runat="server&q ...
随机推荐
- Java练习 SDUT-1133_模拟计算器
C/C++经典程序训练3---模拟计算器 Time Limit: 1000 ms Memory Limit: 8192 KiB Problem Description 简单计算器模拟:输入两个整数和一 ...
- 『创造 Cloud Toolkit』贡献排行榜——如何参与定义一款 IDE 插件？
自从我们团队在去年12月发布 Cloud Toolkit(一款让开发部署效率提速 8 倍的 IDE 插件)以来,已帮助数以万计的开发者们提高了云上的部署效率,期间,开发者们不仅积极地向 Cloud T ...
- DataTable CAST 成集合后，进行自定义排序再转换回DataTable
dt = dt.Rows.Cast<DataRow>().OrderBy(r => Convert.ToInt32(r["数量"])==0?1:0).ThenBy ...
- Hive高阶聚合函数 GROUPING SETS、Cube、Rollup
-- GROUPING SETS作为GROUP BY的子句,允许开发人员在GROUP BY语句后面指定多个统计选项,可以简单理解为多条group by语句通过union all把查询结果聚合起来结合起 ...
- C++ 结构体的定义
struct 结构体名称{ 数据类型 A: 数据类型 B; }结构体变量名; 相当于: struct 结构体名称{ 数据类型 A: 数据类型 B; }; struct 结构体名 ...
- 浮动，定位，flex布局
什么是文档流 英文原文是:Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, in ...
- 用户注册页的布局及js逻辑实现（正则，注册按钮）
文章地址:https://www.cnblogs.com/sandraryan/ 先写一个简单的静态页面,然后对用户输入的内容进行验证,判断输入的值是否符合规则,符合规则进行注册 先上静态页面 < ...
- 【知识小结】PHP使用svn笔记总结
在公司里,我们要养成每天上班前更新代码,下班前提交代码的习惯,并且做好说明. svn更新代码的时候,先右键点击需要更新的项目,在team中进入资源库同步界面,选择incoming mode,显示的文件 ...
- [转]C# 语言历史版本特性（C# 1.0到C# 8.0汇总）
历史版本 C#作为微软2000年以后.NET平台开发的当家语言,发展至今具有17年的历史,语言本身具有丰富的特性,微软对其更新支持也十分支持.微软将C#提交给标准组织ECMA,C# 5.0目前是ECM ...
- 微信小程序wx.request 请求方法
data: 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String .转换规则如下: 对于 GET 方法的数据,会将数据转换成 quer ...