CN109725794A - 一种web前端网站下拉框组件的交互方法 - Google Patents

Abstract

本发明涉及软件开发技术领域，具体涉及一种web前端网站下拉框组件的交互方法。本发明述的方法包括如下步骤：1、基于后台提供的接口获取select下拉框数据源；2、基于vue的computed计算属性对数据源的数据进行处理生成新数据对象；3、基于element提供的下拉框组件和新数据对象listData2生成select多选下拉框；4、给select多选下拉框绑定绑定change事件，监听选中项的改变。本发明提供了一种基于Vue Element实现下拉框分组多选的同时实现同组元素单选的方法。

Description

一种web前端网站下拉框组件的交互方法

技术领域

本发明涉及软件开发技术领域，具体涉及一种web前端网站下拉框组件的交互方法。

背景技术

近年来随着前端技术的不断发展，web界面的功能越来越丰富。基于js实现下拉选择组件的方法也各种各样，比如常见的交互有单选分组、单选不分组、多选分组和多选不分组。

在常见的下拉选择组件的交互中，并没有哪种交互能实现多选分组的同时实现对同组元素的单选这一交互方式。

发明内容

本发明解决的技术问题在于提供一种web前端网站下拉框组件的交互方法；实现多选分组的同时实现对同组元素的单选这一交互方式。

本发明解决上述技术问题的技术方案是：

所述的方法包括如下步骤：

步骤1、基于后台提供的接口获取select下拉框数据源；

步骤2、基于vue的computed计算属性对数据源的数据进行处理生成新数据对象listData2；

步骤3、基于element提供的下拉框组件和新数据对象listData2生成select多选下拉框；

步骤4、给select多选下拉框绑定绑定change事件，监听选中项的改变。

所述的步骤1中，在vue提供的组件生命周期created属性中，使用基于promise的HTTP客户端axios的git请求访问后台提供的数据接口，并把请求获得的数据存储在定义好的Vue实例数据对象listData里面。

所述的步骤2是在vue提供的computed计算属性中把listData数据源的数据结构改造成element多项选择所要求的数据格式；具体步骤为：

根据后台传递属性Pid对数据进行过滤分组实现多选下拉分组；

根据forEach处理过滤分组后的数据给每一元素绑定组别标识属性item、元素在该组别下面的位置标识符和控制元素能否点击的属性isDisabled实现对数据的二次处理。

所述的步骤3是基于vue的指令v-for循环渲染listData2数据生成下拉框结构，基于v-model动态绑定Vue实例数据对象中的activData属性，实现选中项和数据的双向绑定；基于element select下拉框组件提供的multiple和disabled实现多项选择和元素选中状态进行绑定控制元素的点击和禁止点击。

所述的步骤4是：

根据forEach循环处理处理后的数据源并把每一个元素的isDisabled设置为false实现刚开始可以点击；

根据选中项的组别标识属性和位置标识符设置同一组元素的isDisabled设置只能选择一个数据元素。

采用上述基于Vue实现下拉框分组多选的同时实现同组元素单选的方法，能够帮助用户在筛选多种数据时提供多选操作，同时又能有效的避免同组元素或类似元素对筛选结果的干扰，极大的提高了筛选的效率和范围，同时提高了结果的准确性。

附图说明

下面结合附图对本发明进一步说明：

图1是本发明的流程图。

具体实施方式

见图1所示，本发明的流程如下：

1：基于后台提供的接口拿到select下拉框数据源。

在vue提供的组件生命周期created属性中，使用基于promise的HTTP客户端axios的git请求访问后台提供的数据接口，并把请求来的数据存储在提前定义好的Vue实例数据对象listData里面。

2：基于vue的computed计算属性对数据源的数据进行处理生成新数据对象。

在vue提供的computed计算属性中把listData数据源的数据结构改造成element多项选择的所要求的数据格式。刚开始通过for循环循环遍历listData数据源数组，根据属性Pid(后台用来标识组别的属性)来过滤数组，把属性Pid相同的元素存在同一个数组中实现数据的分组处理，比如：listData:[[水果组]、[蔬菜组]….]

每一个组又包含很多个元素，比如水果组：水果1、水果2…..水果n，在每一个元素中新增属性item用来标识该元素属于哪一个组、新增属性list来标识该元素在该组中的位置、新增idDisable属性用来标识元素是点击还是禁止点击状态，这样就实现了对数据的重新处理生成了新的数据源listData2

3：基于element提供的下拉框组件和新数据对象listData2生成select多选下拉框。

基于vue的指令v-for循环渲染listData2数据生成下拉框结构、基于v-model动态绑定Vue实例数据对象中的activData属性，实现选中项和数据的双向绑定，基于elementselect下拉框组件提供的multiple和disabled实现多项选择和元素选中状态进行绑定控制元素的点击和禁止点击。这样就实现了基于数据源数据渲染成多选下拉框组件。

4：给select多选下拉框绑定绑定change事件，监听选中项的改变

基于element提供的change来动态监听选中项的改变，当有改变时触发change事件对应的处理事件函数，在处理函数里面forEach循环处理新的数据源listData2，并对每一个元素的disabled属性设置成false，默认可以点击。然后forEach循环处理选中项，在每一个选中项中通过item属性找到选中元素属于哪一个组别，然后把该组下每一个元素的disabled属性设置成true实现该组别下所有元素都不可点击选中，再通过list属性找到选中元素在该组别下的具体位置，并把该元素的disabled属性设置成false实现同一组别只能选择一个元素。

Claims (7)

1.一种web前端网站下拉框组件的交互方法，其特征在于：所述的方法包括如下步骤：

步骤1、基于后台提供的接口获取select下拉框数据源；

步骤2、基于vue的computed计算属性对数据源的数据进行处理生成新数据对象listData2；

步骤3、基于element提供的下拉框组件和新数据对象listData2生成select多选下拉框；

步骤4、给select多选下拉框绑定绑定change事件，监听选中项的改变。

2.根据权利要求1所述的方法，其特征在于：

所述的步骤1中，在vue提供的组件生命周期created属性中，使用基于promise的HTTP客户端axios的git请求访问后台提供的数据接口，并把请求获得的数据存储在定义好的Vue实例数据对象listData里面。

3.根据权利要求1所述的方法，其特征在于：

所述的步骤2是在vue提供的computed计算属性中把listData数据源的数据结构改造成element多项选择所要求的数据格式；具体步骤为：

根据后台传递属性Pid对数据进行过滤分组实现多选下拉分组；

根据forEach处理过滤分组后的数据给每一元素绑定组别标识属性item、元素在该组别下面的位置标识符和控制元素能否点击的属性isDisabled实现对数据的二次处理。

4.根据权利要求2所述的方法，其特征在于：

所述的步骤2是在vue提供的computed计算属性中把listData数据源的数据结构改造成element多项选择所要求的数据格式；具体步骤为：

根据后台传递属性Pid对数据进行过滤分组实现多选下拉分组；

根据forEach处理过滤分组后的数据给每一元素绑定组别标识属性item、元素在该组别下面的位置标识符和控制元素能否点击的属性isDisabled实现对数据的二次处理。

5.根据权利要求1至4任一项所述的方法，其特征在于：

所述的步骤3是基于vue的指令v-for循环渲染listData2数据生成下拉框结构，基于v-model动态绑定Vue实例数据对象中的activData属性，实现选中项和数据的双向绑定；基于element select下拉框组件提供的multiple和disabled实现多项选择和元素选中状态进行绑定控制元素的点击和禁止点击。

6.根据权利要求1至4任一项所述的方法，其特征在于：

所述的步骤4是：

根据forEach循环处理处理后的数据源并把每一个元素的isDisabled设置为false实现刚开始可以点击；

根据选中项的组别标识属性和位置标识符设置同一组元素的isDisabled设置只能选择一个数据元素。

7.根据权利要求5所述的方法，其特征在于：

所述的步骤4是：

根据forEach循环处理处理后的数据源并把每一个元素的isDisabled设置为false实现刚开始可以点击；

根据选中项的组别标识属性和位置标识符设置同一组元素的isDisabled设置只能选择一个数据元素。