输入搜索、分组展示选项、下拉选取,el-select 实现:即输入关键字检索,返回分组选项,选取跳转到相应内容页 —— VUE项目-全局模糊检索

 【效果图】:分组展示选项 【去界面操作感受一下】—> 便捷简洁的企业官网

输入搜索、分组展示选项、下拉选取,el-select 实现:即输入关键字检索,返回分组选项,选取跳转到相应内容页 —— VUE项目-全局模糊检索_第1张图片

 

【录制效果视频展示】: 

菜单栏-快速检索1

【流程】:

(1)读取目标数据,如果是多个,需要多次读取;
(2)对数据进行分组,放入特定分组数据结构;
(3)各分组,做相应设置;
(4)数据组装到 el-select 控件;
(5)点击选项,跳转到相应位置。

现将关键代码及结构附于下方:

1. 分组数据结构示例:

(1)标准结构示例:

groupSelectOptions2: [
				{
					id: 1,
					label: '超期',
					options: [
						{
							value: 'cqwbj',
							label: '超期未办结'
						},
						{
							value: 'ycq',
							label: '已超期'
						}
					]
				},
				{
					id: 2,
					label: '按天',
					options: [
						{
							value: 't1',
							label: '1天'
						},
						{
							value: 't2',
							label: '2天'
						},
						{
							value: 't3',
							label: '3天'
						}
					]
				},
				{
					id: 3,
					label: '按小时',
					options: [
						{
							value: 'h1',
							label: '1小时'
						},
						{
							value: 'h2',
							label: '2小时'
						}
					]
				}
			]

(2)项目数据结构示例:

主要的就 label 和 srcPath 这两个属性(其余省略):label,用于显示;srcPath,存储选取跳转的 url 地址。

[
    {
        label:'',
        options:[
            {srcPath: ''}
        ]
    },
]

2. 封装 el-select 成组件:



3. javascript 和 css





4. 引用 LiloGroupSelect 


	
		
	




                    
                    

你可能感兴趣的:(前端,javascript,vue,el-select)