vue实现下拉列表多选全选以及模糊查询的vue组件
发布时间：-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
v-model="checkedNames">
v-show="listShow">
v-model="checkedNames"> {{item}}
id="quan" type="checkbox" @click="checkAll($event)">
for="quan">全选
{ 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接收传过去的值，代码中有注释，应该可以看懂
{{item.name}},价格:￥{{item.price}}
:data1="options">
from './mohuSearch/mohuSearch' export default { name: "mohu", components:{
mohusearch }, data() { return{ options:['苹果','香蕉','菠萝','西瓜'], } }, }
<>好了，基本就是这样了，如有疑问，请在下方留言，欢迎大神提出改进意见。
**
