vue实现下拉列表多选全选以及模糊查询的vue组件

发布时间：2018-09-12 17:41,

浏览次数：3776

, 标签：

vue

<>前端，有时有这样的需求，需要一个下拉列表，还要有多选全选功能，以及模糊查询功能的vue组件，我做了一个简陋的组件，供大家参考，有问题请留言

这是我的文件目录结构

**

效果图：

o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o

模糊查询：

下面贴出代码

这是组件代码mohuSearch.vue

{ name: "mohu-search", props:{//接收父组件传递过来的数据 data1: { type: Array, default: []

}, }, data(){ return{ listShow:false, search:'', checkedNames:[],

items:['jack','mike','rose','jan']//下拉列表的选项数据，此数据可以从父组件传过来，通过props接收，接收到props数据后赋值给该数据即可

} }, created(){ console.log(this.data1) }, watch: { // 监视双向绑定的数据数组

checkedNames: { handler(){ // 数据数组有变化将触发此函数 var checkObj1 =

document.querySelectorAll('.checkItem'); // 获取所有checkbox项

if(this.checkedNames.length == checkObj1.length){

document.querySelector('#quan').checked = true; }else {

document.querySelector('#quan').checked = false; } }, deep: true // 深度监视 },

search:{ handler(){//搜索框输入变化触发 this.listShow=true; }, deep: true // 深度监视 } },

methods: { checkAll(e){ // 点击全选事件函数 var checkObj =

document.querySelectorAll('.checkItem'); // 获取所有checkbox项 if(e.target.checked){

// 判定全选checkbox的勾选状态 for(var i=0;i

if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中

this.checkedNames.push(checkObj[i].value); } } }else { //

如果是去掉全选则清空checkbox选项绑定数组 this.checkedNames = []; } }, show(){

this.listShow=!this.listShow; if(this.listShow==true){ this.checkedNames = [];

} } }, computed: { searchData: function() { var search1 = this.search; if

(search1) { return this.items.filter(function(product) { return

Object.keys(product).some(function(key) { return

String(product[key]).toLowerCase().indexOf(search1) > -1 }) }) } return

this.items; } } }

这是简陋的样式文件 mohuSearch.css

.searchBox{ width: 200px; height: 26px; position: relative; } .select{ width:

98%; height: 100%; } .down{ position: absolute; width: 0; border:9px solid

transparent; border-top: 11px solid black; top: 10px; right: 7px; cursor:

pointer; } .list{ width: 100%; } .list>li{ height: 20px; background: white;

border: 1px solid lightgray; border-top: none; }

想引用此组件，你可以这样，v-bind向子组件传值，子组件通过props接收传过去的值，代码中有注释，应该可以看懂

from './mohuSearch/mohuSearch' export default { name: "mohu", components:{

mohusearch }, data() { return{ options:['苹果','香蕉','菠萝','西瓜'], } }, }

<>好了，基本就是这样了，如有疑问，请在下方留言，欢迎大神提出改进意见。

**