CN111832272A - 一种基于element-ui实现表格嵌套表单功能的方法 - Google Patents

Abstract

本发明提出一种基于element‑ui实现表格嵌套表单功能的方法，包括步骤：将表格组件和表单组件的最外层进行嵌套；在父组件定义一个插槽将表单相关参数和表格相关参数传入嵌套后的子组件，再将表单项元素嵌入到表格单元格元素中；定义对象数组用于提交数据，遍历对象数组以渲染单元格,通过单元格绑定对象数组中的数据，并配置不同类型的表单与相应绑定值之间的联动关系，使相应的表单在绑定值改变时按照预设的联动关系处理数据。该本发明将表单和表格嵌套形成组件，可同时传入表格和表单相关的参数，并能支持列表形式的表单提交。

Description

一种基于element-ui实现表格嵌套表单功能的方法

技术领域

本发明涉及计算机领域，具体涉及一种基于element-ui实现表格嵌套表单功能的方法。

背景技术

Element UI是一套采用Vue 2.0作为基础框架实现的组件库，提供了基本组件功能，目前基于Element UI实现的表格组件和表单组件都是独立的。

表格组件在el-tabel中添加data对象数组，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的表头名称，侧重于列表的数据展示，表格交互的实现，虽然可嵌套input输入框或者其他的text文本等展示性或者输入选择等，但是无法做到输入数据的实时校验。

现有表单组件中每一个表单域由一个Form-Item组件构成，表单域中可以放置各种类型的表单控件，包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker，只适用于单个表单提交检验。现有的表单可以通过绑定数组的形式动态增减表单项，以用于实际应用，但没有侧重于处理以表格的形式处理动态增减表单项。

基于上述分析，现有的单个表单或单个表格组件功能单一且各有缺陷，无法提供更丰富的数据处理功能。

发明内容

发明目的：为弥补现有技术的不足，本发明提出一种基于element-ui实现表格嵌套表单功能的方法，该方法将表单和表格嵌套形成组件，可同时传入表格和表单相关的参数。

技术方案：现有表单形式如图1所示，其中虽然可以动态增减表单项，但是其展示形式累赘，每次增加表单项，其字段名都需要重复展示出来，不能适应列表形式的表单提交。

为了实现列表形式的表单提交功能，本发明提出一种基于element-ui实现表格嵌套表单功能的方法，包括步骤：将表格组件和表单组件的最外层进行嵌套，即：在表单组件元素el-form中嵌套表格元素el-table；在父组件定义一个插槽将表单相关参数和表格相关参数传入表单表格嵌套组件，再将表单项元素嵌入到表格单元格元素中；定义对象数组用于提交数据，遍历对象数组以渲染单元格,通过单元格绑定对象数组中的数据，并配置不同类型的表单与相应绑定值之间的联动关系，使相应的表单在绑定值改变时按照预设的联动关系处理数据。

通过本发明方法所构建的嵌套组件，表格表单只需要配置表头以及单元格和表单项相关数据，便能从不同维度分析表单处理状态如何。

另一方面，现有的表单技术局限于支持以对象的形式提交，本组件则是以对象数组的形式提交，可以同时动态增减多项表单数据处理相关复杂业务逻辑。

具体的，所述表单的类型包括：输入框、下拉框、树结构、开关

进一步的，所述方法还包括以下步骤：

在表单表格嵌套组件中定义两个html元素：外层ul和外层li,外层ul嵌套外层li，外层ul模拟表格table元素，外层li模拟表格元素；再在外层li中嵌套内层ul和内层li，内层ul嵌套内层li；通过纵向遍历外层li模拟表格的行，通过横向遍历内层的li模拟表格的列。

进一步的，所述方法还包括：

通过js监听外层元素li的滚动事件以实现表头固定和指定列同时固定：

js监听到表格滚动时，判断是垂直滚动还是横向滚动，如果是垂直滚动，则通过样式控制表头固定；如果是横向滚动，则抽离出横向滚动范围内的列数据，并渲染到新建的一个外层ul，将新建的外层ul悬浮固定在需要固定的对应列上，再根据预先配置的联动逻辑，基于列滚动实现表格的联动滚动。

有益效果：与现有的单独表单或单独表格组件相比，本发明具有以下优势：

1、本发明能够支持列表形式的表单提交及校验；

2、本发明通过ul，li元素模拟了表格的表现形式，对表格进行重构，避免表格和表单嵌套数据量过大时造成的数据渲染影响。

附图说明

图1为现有表单页面的示例性示意图；

图2为通过本发明所述方法实现表格嵌套表单功能后，页面的示例性示意图；

图3为现有表格固定列的示意图；

图4为添加了自定义滚动条的表格页面示意图；

图5为本发明实施例的涉及的嵌套组件的示意图。

具体实施方式

下面将结合附图和具体实施例对本发明作更进一步的说明。但应当理解的是，本发明可以以各种形式实施，以下在附图中出示并且在下文中描述的一些示例性和非限制性实施例，并不意图将本发明限制于所说明的具体实施例。

应当理解的是，在技术上可行的情况下，以上针对不同实施例所列举的技术特征可以相互组合，从而形成本发明范围内的另外的实施例。此外，本发明所述的特定示例和实施例是非限制性的，并且可以对以上所阐述的结构、步骤、顺序做出相应修改而不脱离本发明的保护范围。

实施例1：

本实施例提出一种基于element-ui实现表格嵌套表单功能的方法，该方法将表单和表格嵌套形成组件，可同时传入表格和表单相关的参数，并实现列表形式的表单提交及校验。该方法的具体步骤为：

S1将表格组件和表单组件的最外层进行嵌套，嵌套后的组件如图5所示；

S2在父组件定义一个插槽将表单相关参数和表格相关参数传入表单表格嵌套组件，再将表单项元素嵌入到表格单元格元素中；

S3定义对象数组用于提交数据，遍历对象数组以渲染单元格,通过单元格绑定对象数组中的数据，并配置不同类型的表单与相应绑定值之间的联动关系，使相应的表单在绑定值改变时按照预设的联动关系处理数据。

步骤S1中，将表格外层嵌套表单，具体步骤为：

用el-form(element-ui中表单组件元素)嵌套el-table(element-ui表格元素),写法为:

<el-form:model＝’model’>

<el-table></el-table>

</el-form>

其中，model为父组件传入的绑定参数，可以同时传入表单相关参数(表单字段，校验规则字段等)和表格相关参数(表头结构，单元格字段等)最后将表单项元素el-form-item嵌入到表格单元格元素el-table-column(写在el-table元素内)中。

步骤S3中，用对象数组用于提交数据，区别于现有表单技术仅支持以对象的形式提交，采用对象数组提交方式，可以同时动态增减多项表单数据处理相关复杂业务逻辑。在渲染表格时，需要遍历对象数组结构渲染到表格中，而在渲染之前，需要进行表格的逻辑设计：

在el-table元素中遍历写法<template v-for＝’(item,index)inmodel.tableData’>...</template>，tableData及父组件传入的model中的表头相关数据，再在template(不会在页面中生成的元素，仅配合遍历使用的容器)中嵌入表单项和表格项作为我们的单元格，通过单元格绑定数据，为各种不同类型的表单(输入框、下拉框、树结构等)配置绑定值联动逻辑，当绑定值改变时(例如我们可能处理不同行数据间的关系，通过表单中change方法获取到对应单元格的相关字段，监听其输入或者下拉选择等变化后的取值)，根据联动逻辑处理表格数据之间的联动关系，以便结合表格的优势更美观方便呈现数据结构。

表单嵌套在表格中，可以看做是一个单独的表单嵌套在列表的每一行，可以清晰的看出每一条数据展示的内容，单独一条列表填写数据代表了一个单独表单，共用一个列表的表头直观展示了某一行某一单元格对应的数据名称。从而解决了现有表单组件无法直观体现提交大量数据对应字段问题。

实施例2：

现有的表格在横向内容过多时可以指定固定列，通过拖动滚动条滚动其内容，不同鼠标在表格内部长按滑动来拖动表格内容，如图3所示。正因为element-ui表格组件有固定列功能，表格固定列时，View层会在页面中渲染两个table元素，一个table用于滚动层，一个table用于固定层，以这种形式呈现固定列的方式，虽然达到了效果，但是两个表格的渲染会导致绑定数据量的重复，当数据量过大时，会导致页面渲染速度严重下降。原因是:在现有的表格组件中，当数据量过大时，由于vue底层双向绑定(不管在组件中通过方法(在数据层)去改变字段如给username赋值‘xiaoming’；还是通过在输入框中(模板层)输入xiaoming，最后username数据的值都会同时改变,在两种操作后都不用去单独做对应处理数据而可以直接使用提交表单方法传值给后端)，数据算法复杂，会导致页面出现大量数据绑定时出现卡顿现象。

为解决这一技术问题，本实施例在实施例1基础上增加了表格重构方案。通过ul，li元素模拟了表格的表现形式，对表格进行重构，优化了表格和表单嵌套数据量过大时造成的数据渲染影响。具体方法为：

在表单表格嵌套组件中定义两个html元素：外层ul和外层li,外层ul嵌套外层li，外层ul模拟表格table元素，外层li模拟表格元素；再在外层li中嵌套内层ul和内层li，内层ul嵌套内层li；通过纵向遍历外层li模拟表格的行，通过横向遍历内层的li模拟表格的列，即能简单达到普通表格效果。在单元格中通过组件配置值类型，来判断表单项类型(如：输入框，下拉框，树结构，开关等)，同时也可以配置无表单的默认展示项，或者插入插槽，结合表单的基本功能，可以实现两者嵌套后的基本应用。因此，通过重构，避免了element表格中固定列时重复绑定数据导致的列表渲染速度过慢问题，不需要整个表格数据copy一份便能达到固定列效果。

在上述方案的基础上，为了实现表头固定和指定列同时固定，还执行以下步骤：

js监听到表格滚动时，判断是垂直滚动还是横向滚动，如果是垂直滚动，则通过样式控制表头固定；如果是横向滚动，则抽离出横向滚动范围内的列数据，并渲染到新建的一个外层ul，将新建的外层ul悬浮固定在需要固定的对应列上，再通过算法处理其滚动表现能联动表格的滚动表现，同时需要处理新建的外层ul所绑定的数据校验跟表格里面的绑定数据校验，处理校验不通过呈现错误信息后单元格增高后联动正行增高或者衰减。

采用上述方式，本发明提出的嵌套组件可以通过鼠标长按事件，滑动事件，鼠标移出事件联动，获取到表格内部滚动的元素，记录滚动距离，通过算法触发表格内部滚动实现可拖拽滚动表格内容。

进一步的，本实施例还通过元素模拟表格内容宽度，在表格顶部自定义滚动条，并且可以联动底部滚动条实现双滚动条效果，方便小屏幕用户操作表格滚动，添加了自定义滚动条的页面如图4所示。实现自定义滚动条的具体步骤为：

利用嵌套两个div元素嵌套定位在表格最顶端紧贴表格的方法，内层div模拟表格内层宽度(表格单行字段较多时底部会出现滚动条，内部元素宽度大于外层元素导至),外层div宽度设置跟表格外层宽度相同及100％适应父级宽度。有两个方向的控制：1是拖动自定义滚动条触发表格滚动，在外层div上绑定滚动事件scroll，事件中可获取到元素节点参数，节点参数中带有滚动条滚动距离值scrollLeft,然后通过表格中ref属性找到bodyWrapper(表格中外层能滚动的元素)的scrollLeft属性，将此属性赋值自定义滚动条的滚动距离，则能达到拖动自定义滚动条触发表格滚动的效果。2是拖动表格滚动触发自定义滚动条移动到对应底部滚动条位置，同理，在页面初始化时给表格绑定滚动事件scroll，获取到表格的scrollLeft属性赋值给自定义滚动条。最后能达到两者同步拖动表格的效果。

实施例3：列表中可能出现行数据源不同的情况。例如一般业务中，单列下拉框数据源可能来自同一个，但是个别业务中，同一列不同行所涉及下拉数据源不同，而且可能有联动关系，此时数据源则需要根据当前行的数据源来绑定给单元格下拉框。

为了处理这类情况，本实施例在上述实施例1和2的基础上，还增加以下实现方案：在列表数据配置结构中，配置是否需要来自不同源数据参数，每行指定下拉框数据名，组件中判断是否来自同源数据，若是，则根据指定下拉框数据名获取到当前行的数据源，在类型是下拉框的表单项中遍历此数据源来绑定，而父组件只需要通过后端提供的数据，分别根据当前行所需下拉框数据来配置即可(下拉树数据源同理)。

优选的，本实施例还考虑现有表单不能实时校验必填字段和非必填字段是否填完的问题。

因此本实施例对字段填写进度监控，将状态渲染到顶部导航中，达到一目了然效果。实现方案：通过表单中change方法记录已填的必填字段和非必填字段数量，对比默认所需必填字段和非必填字段数量，判断出当前必填状态，非必填状态。必填字段则是通过设置的rules属性获取，非必填字段则是列表所传所有虚填字段减去必填字段获取，最终方法会返回比较后的状态值(0-有必填字段并且必填字段未填写；1-没有必填字段或者有必填字段并且必填字段填写完2-所有字段填写完)。具体地说，可通过以下步骤实现：

首先定义一个方法initValidate,此方法会在vue的watch监听钩子中监听父组件传入参数model.list(对应表格列表数据,非表头数据)中任意值改变后，和页面初始化created钩子中调用。initValidate方法中会根据model.rules(父组件传入参数中的规则字段，包含必填等规则)区分需要必填的字段和非必填字段，并记录其数量，通过绑定值是否为空判断是否填写，并记录必填字段和非必填字段已填和未填的数量，通过两者数量对比，得出结论：0-有必填字段并且必填字段未填写；1-没有必填字段或者有必填字段并且必填字段填写完2-所有字段填写完，将结果value(0,1,2)值实时传给父组件，父组件及可根据此value使用与相关业务交互。

上述实施例，特别是任何“优选”施例，是实施方式的可能示例，并且仅仅为了清楚理解本发明的原理而提出。在基本上不脱离本发明描述的技术的精神和原理的情况下，可以对上述实施例做出许多变化和修改，这些变化和修改也应视为本发明的保护范围。

Claims (4)

1.一种基于element-ui实现表格嵌套表单功能的方法，其特征在于，包括步骤：

将表格组件和表单组件的最外层进行嵌套，即：在表单组件元素el-form中嵌套表格元素el-table；

在父组件定义一个插槽将表单相关参数和表格相关参数传入表单表格嵌套组件，再将表单项元素嵌入到表格单元格元素中；

定义对象数组用于提交数据，遍历对象数组以渲染单元格,通过单元格绑定对象数组中的数据，并配置不同类型的表单与相应绑定值之间的联动关系，使相应的表单在绑定值改变时按照预设的联动关系处理数据。

2.根据权利要求1所述的一种基于element-ui实现表格嵌套表单功能的方法，其特征在于，还包括步骤：

在表单表格嵌套组件中定义两个html元素：外层ul和外层li,外层ul嵌套外层li，外层ul模拟表格table元素，外层li模拟表格元素；再在外层li中嵌套内层ul和内层li，内层ul嵌套内层li；通过纵向遍历外层li模拟表格的行，通过横向遍历内层的li模拟表格的列。

3.根据权利要求2所述的一种基于element-ui实现表格嵌套表单功能的方法，其特征在于，还包括步骤：

通过js监听外层元素li的滚动事件以实现表头固定和指定列同时固定：

js监听到表格滚动时，判断是垂直滚动还是横向滚动，如果是垂直滚动，则通过样式控制表头固定；如果是横向滚动，则抽离出横向滚动范围内的列数据，并渲染到新建的一个外层ul，将新建的外层ul悬浮固定在需要固定的对应列上，再根据预先配置的联动逻辑，基于列滚动实现表格的联动滚动。

4.根据权利要求1所述的一种基于element-ui实现表格嵌套表单功能的方法，其特征在于，所述表单的类型包括：输入框、下拉框、树结构、开关。

Images