Skip to content

DevFormTable 筛选列表

主要功能

当前组件主要的功能是快速搭建搜索列表,在组件中集成了查询 分页 跨页勾选 格式化数据 拖拽排序 表头吸顶 滚动条吸底 等常用功能,减少重复开发,提高开发效率。

必看内容

当前组件最大的特点就是集成了接口对接,所以很重要的一点就是对于后端返回数据的处理,由于不同公司在封装接口请求的时候所暴露出去的参数信息不同,在使用的时候需要根据后端返回的数据结构进行相应的处理。 例如:有些公司的接口返回数据的结构是 {code:0, data:{ list:[], total:0 } } ,有些公司的接口返回数据的结构是{code:0, data:[], total:0} ,以及前端在封装axios请求的时,也可能存在对接口返回数据进行二次处理,只截取其中一部分内容暴露出去,所以在使用的时候需要根据最终拿到的数据结果进行相应的处理,以便于数据的展示。在此,组件提供两种方案:

方案1: 全局引入,对数据进行处理,优点所有的DevFormTable组件都会读取这个方法来处理数据。全局引入方法请看入门指南!

方案2:直接向DevFormTable组件传入devSearchTableKeyFieldsFn 方法来覆盖默认方案,如果你同时用了方案1,此方案在本列表中优先级最高,且与其他列表互不影响。

基础用法

表头吸顶/滚动条吸底

表头吸顶:通过在 searchTable 对象中增加 openHeaderSticky: true 开启表头吸顶,默认吸顶距离顶部0px,可以通过修改 headerStickyTop 参数修改表头吸顶位置。

横向滚动条吸底:组件默认开启了滚动条吸底功能,如果不需要可以通过在 searchTable 对象中增加 openRollerSticky: false 关闭滚动条吸底,默认距离底部10px,可以通过修改 rollerStickyBottom 参数修改滚动条吸底位置。

自定义筛选项

虽然筛选框满足了大部分的搜索场景,但不可避免无法满足所有需求, 有可能你在自己的项目中也封装了一些组件,比如商户选择框等,有时候我们希望组件可以在筛选框中使用, 这个时候可以通过使用插槽来实现自定义筛选项,插槽名称就是 s-你想绑定参数的名称 。之所以这样设计, 是为了避免 筛选条件的参数名称table列表中的参数名称 相同,造成混淆。 最后就是将自定义插槽数据传递到组件中,只需要将自定的组件数据绑定到 formValue 中即可。

自定义列表内容

虽然列表本身就包含一些处理数据的方法,但也不能满足所有情况,有时候我们希望对列表中的某些内容进行自定义,比如在某一项中追加特定的单位, 或者将列表中的数字转换为千分位等,这个时候可以通过使用插槽来实现自定义列表内容,插槽名称就是当前列绑定的 prop 参数名。我们可以通过插槽向外抛出对参数获取当前行对所有信息,然后根据需求进行自定义。 可以解构的信息有两个,但是最终拿到的值是一样的,看各自开发习惯,分别是 item row 使用方式和element-plus的table组件一致,具体可以参考如下示例。

自定义table表头

有时候我们需要为某一个表头加上特定的icon,甚至是一个搜索框,这个时候单靠传参是难以实现的,我们可使用自定义表头功能来实现。 具体方法依然需要使用插槽,插槽的名称是 header-prop参数名称 ,具体使用方法如下。

设置多级表头

有时候我们需要设置多级表头,这个时候我们可以通过在 searchTablecolumns 数组中通过嵌套 columns 来实现,具体使用方法如下。

拖拽排序

拖拽排序目前是不支持跨页拖拽的,更高频次的使用是在无分页情况下,详细的使用方法请前往DevSearchTable组件文档中查看。

跨页勾选

跨页勾选在批量操作列表的时候是一个非常高频次的需求,所以我将这个功能集成到了组件中去。详细的使用方式请看下面示例。

由于示例中的数据是通过mockjs模拟的,所以每个id所对应的姓名、年龄、省份信息是随机的,勾选项是否可以回显是以勾选中的id信息为基准的。 在实际项目中列表中的数据也是会发生改变的,只是没有示例中的数据这么明显,所以只要你数据存在唯一id就不必担心,也有可能你的id名称不叫id。 可以在 searchTable 中通过 elTableAttrs 参数来修改。elTableProps参数是一个对象,可以传入element-plus的table组件的所有参数。

当勾选数据发生改变时,组件会向外抛出方法 check-change 在这个方法中可以获取到所有勾选的id和数据信息。

当我们需要清除已勾选的数据时,可以通过通过组件ref调用组件中的方法 clearAllSelection

序号/索引

在table中展示序号/索引,和el-table-column组件自带的索引主要区别在于跨页时的展示,当开启 open-index后,跨页后的序号会承接上一页的序号继续展示,详细区别和使用方法请看下方示例:

数据格式化

组件提供了数据格式化功能,主要是为了方便在列表中展示一些需要格式化的数据,当前支持 time money 时间戳、金额 (金额只有1.0.31版后支持) 。具体使用方法请看下方示例:

筛选项必填

在筛选项中有时候需要设置必填项,这个时候可以通过在 elFormItemAttrs 中增加校验规则即可,有必填项时一般情况下默认不请求数据,可根据实际情况就行修改,具体使用方法请看下方示例:

自定义筛选项布局

在筛选项中有时候需要自定义筛选项的布局,这个时候可以通过在 searchList 中需要自定义的筛选项中增加 elColAttrs 来设置筛选项的宽度, elColAttrs 中支持绑定el-col组件的所有属性,具体可以参考 element-plus。具体使用方法请看下方示例,自定义时间筛选项布局:

API

属性

DevFormTable Props

使用驼峰命名
暂无数据

SearchForm

使用驼峰命名
暂无数据

SearchList

使用驼峰命名
暂无数据

SearchTable

使用驼峰命名
暂无数据

columns / items

使用驼峰命名
暂无数据

事件

DevFormTable Events

使用驼峰命名
Function
暂无数据

插槽

DevFormTable Slots

暂无数据

暴露

DevFormTable Methods

暂无数据