商品分类筛选-Vue+Layui

July 08, 2024 9208

前言

在最近的项目开发中遇到了类似商品分类筛选需求，当然在目前网上有很多这样的例子模板使用，但因为项目所需要的需求不同，同时需发挥出纯自定义模式。

样式排版

1
这个的话就不细说，每个项目有每个项目的样式需求，这里就不展开 :)

一级目录（单选）1

需求：默认选中全部，选中其他时需渲染至已选条件一栏里同时选中不一样的单选内容时，已选条件一栏需更改最新选中的单选内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const { createApp, ref } = Vue;
const App = {
	data(){
		return{
			searchArr:[] //已选条件一栏循环用到的数组
		}
	},
	//val、value: 单选按钮的value值
	//tit、title: 单选按钮的title值
	//type 类型，主要区分是哪个一级目录
	update_area(val,tit){
		//单选选中内容不是全部的添加至已选条件一栏循环用到的数组
		if( val > 0 ){
			this.searchArr.push({
				title:tit,
				value:val,
				type:1
			})
		}
		
		//当一级目录单选选中其他单选内容时清空上一个已选单选内容
		this.searchArr.forEach((item,index)=>{
			if( item.type == 1 ){
				if( item.value != val ){
					this.searchArr.splice(index,1);
				}
			}
		})
	}
}

一级目录（单选）2

需求：选中其他内容展现对应的二级目录内容（多选），当一级目录单选选中其他内容时，已选二级多选目录需清空（包括已选条件一栏）并展现当前选中一级目录下的二级多选目录如没有则不渲染二级目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
const { createApp, ref } = Vue;
const App = {
	data(){
		return{
			searchArr:[], //已选条件一栏循环用到的数组
			didErArr:[], //渲染二级目录内容
			checkboxEr:false, //判断是否渲染二级目录
			didAddressArr:[
				 {title:"全部",value:0,type:1,typeEr:0,checked:true,sublist:[]},
				 {title:"a",value:1,type:1,typeEr:0,checked:false,
  					sublist:[ //这个是二级目录数组内容
                        {title:"aa",value:1,type:1,typeEr:1,checked:false},
                        {title:"ab",value:2,type:1,typeEr:1,checked:false},
                        {title:"ac",value:3,type:1,typeEr:1,checked:false},
                        {title:"ad",value:4,type:1,typeEr:1,checked:false},
                        {title:"ae",value:5,type:1,typeEr:1,checked:false},
                    ]
                },
               	{title:"b",value:2,type:1,typeEr:0,checked:false,
  					sublist:[
                        {title:"ba",value:1,type:1,typeEr:1,checked:false},
                        {title:"bb",value:2,type:1,typeEr:1,checked:false},
                        {title:"bc",value:3,type:1,typeEr:1,checked:false},
                        {title:"bd",value:4,type:1,typeEr:1,checked:false},
                        {title:"be",value:5,type:1,typeEr:1,checked:false},
                    ]
                },
                {title:"c",value:3,type:1,typeEr:0,checked:false,sublist:[]},
                {title:"d",value:4,type:1,typeEr:0,checked:false,sublist:[]},
                {title:"e",value:5,type:1,typeEr:0,checked:false,sublist:[]},
                {title:"f",value:6,type:1,typeEr:0,checked:false,sublist:[]},
			]
		}
	},
	
	//typeEr （类型，二级目录，1为二级目录，0则不是）
	//val、value: 单选按钮的value值
	//tit、title: 单选按钮的title值
	//type 类型，主要区分是哪个一级目录
	update_area(val,tit){
		//单选选中内容不是全部的添加至已选条件一栏循环用到的数组
		if( val > 0 ){
			this.searchArr.push({
				title:tit,
				value:val,
				typeEr:0,
				type:1
			})
			
			//选中其他单选内容时，清空当前选中的二级多选目录
			for( let i = 0; i < this.searchArr.length; i++ ){
				if(this.searchArr[i].type == 1 && this.searchArr[i].typeEr == 1){
					this.searchArr.splice(i,1);
                    i--;
				}
			}
			
			//如果选中的单选内容无二级多选目录，则不渲染二级目录
			this.didparentArr.forEach((item,index) => {
				if(item.val == val){
					if( this.didAddressArr[val].sublist.length == 0 ){
						this.checkboxEr= false;
					}else{
					//有，则渲染二级目录
						this.didErArr = this.didAddressArr[val].sublist;
						this.checkboxEr= true;
					}
					
					//每次选中其他单选框内容时默认都取消选中
					this.didArr.forEach(item=>{
						item.checked = false;
					})
				}
			});
		}
		
		//当一级目录单选选中其他单选内容时清空上一个已选单选内容
		this.searchArr.forEach((item,index)=>{
			if( item.type == 1 ){
				if( item.value != val ){
					this.searchArr.splice(index,1);
				}
			}
		})
	}
	
	//当一级目录单选选中全部，不渲染二级目录，清空二级目录（包括已选条件一栏）
	 if(val == 0){
	 	this.addressEr = false;
	 	for(let i=0; i<this.searchArr.length; i++){
	 		if(this.searchArr[i].type == 1 && this.searchArr[i].typeEr == 1){
	 			this.searchArr.splice(i,1);
	 			i--;
	 		}
	 	}
	 	this.didErArr= [];
	 }
}

一级目录（单选）3

需求：二级目录多选内容，选中渲染至已选内容一栏中，取消选中时已选内容一栏同步删除对应内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const { createApp, ref } = Vue;
const App = {
	data(){
		return{
			searchArr:[],
			didErArr:[],
			num:0,
		}
	},
	//val、value: 多选按钮的value值
	//tit、title: 多选按钮的title值
	update_area_er(val,tit,checked){
		let array = [];
		//同步一级目录（单选）2内容
		this.didErArr.forEach( item => {
			if(item.value == val){
			 	item.checked = checked
			}
		}
		
		this.searchArr.push({
        	title:tit,
            value:val,
            type:1,
            typeEr:1,
            checked:checked
        });
        
        //当取消选中时，将已取消内容添加至array临时数组内
        //因为是用的layui+vue的方式，layui多选框取消选中时仍然会返回数据，所以需要拿一个临时数组装起来
        this.searchArr.forEach((item,index)=>{
        	if(item.type==1 && item.typeEr==1){
        		if(item.checked==false){
        			array.push(item);
        			this.searchArr.splice(index,1);
        		}
        	}
        })
        
        //当array临时数组长度大于0时，删除searchArr数组内对应的已选多选框内容
		if(array.length>0){
			this.searchArr.forEach((item,index)=>{
				if(item.type==1 && item.typeEr==1){
					if(array[0].value==item.value){
						this.searchArr.splice(index,1);
						array = [];
					}
				}
			})
		}
	}
}

一级目录（多选）

需求：默认单选选中全部，当选中其他多选内容时取消单选选中，选中内容需渲染至已选内容一栏中，当某一个多选框取消选中，对应的已选内容需对应删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
const { createApp, ref } = Vue;
const App = {
	data(){
		return{
			searchArr:[],
			didErArr:[],
			num:0,
			typeChecked:true, //默认选中单选按钮全部
			typeArr:[],//存放取消勾选的多选框内容
			stypeArr:[
				{title:"ca",value:1,type:2,typeEr:0,checked:false},
				{title:"cb",value:2,type:2,typeEr:0,checked:false},
				{title:"cc",value:3,type:2,typeEr:0,checked:false},
				{title:"cd",value:4,type:2,typeEr:0,checked:false},
				{title:"ce",value:5,type:2,typeEr:0,checked:false},
			]
		}
	},
	
	//val、value: 多选按钮的value值
	//tit、title: 多选按钮的title值
	update_type(val,tit,checked){
		let array = [];
		//当选中多选框内容时，单选按钮全部取消选中
         if(val>0){
         	this.typeChecked = false;
         	//选中的多选框内容设置选中多选框checked为true
         	this.stypeArr.forEach((item,index)=>{
         		if(item.value == val){
         			 this.stypeArr[index].checked = true;
         		}
         	}
         }
         //添加至已选一栏内
          this.searchArr.push({
          	title:tit,
          	value:val,
          	type:2,
          	checked:checked
          })
          //计数，统计添加的数量
          this.num++;
          //当取消选中时，将已取消内容添加至array临时数组内，以及typeArr数组，计数-1
          this.searchArr.forEach((item,index)=>{
          	if(item.type==2){
            	if(item.checked==false){
               		array.push(item);
                    this.searchArr.splice(index,1);
                    this.typeArr.push(item);
                    this.num--;
                 }
               }
           })   
           //当array临时数组长度大于0时，删除searchArr数组内对应的已选多选框内容
           if(array.length>0){
           		this.searchArr.forEach((item,index)=>{
                	if( item.type == 2 ){
                    	if( array[0].value == item.value ){
                        	this.searchArr.splice(index,1);
                            array = [];
                        }
                    }
                })
            }  
            //选中单选全部时，将已选多选内容全部清空
            if(val==0){
                this.typeChecked = true;
                for(let i=0; i<this.searchArr.length; i++){
                    if(this.searchArr[i].type == 2){
                        this.searchArr.splice(i,1);
                        i--;
                    }
                }
                this.stypeArr.forEach((item)=>{
                    item.checked = false;
                })
                this.num = 0;
                this.typeArr = [];
            }             
            //当多选内容全部取消勾选时自动默认勾选全部
            if(this.typeArr.length>0){
                if(this.typeArr.length == this.num){
                    this.typeChecked = true;
                    this.num = 0;
                    this.typeArr = []
                }
            }    
	}
}

以上是用的layui+vue的方式，layui组件库的多选框、单选框，取消选中时仍然会返回数据