# List 列表

# 基础用法

纯列表,数据是通过data静态配置的

# 空数据时显示的文本

默认显示 暂无数据,可以通过 props['empty-text'] 配置

# 索引行号0.9.1+

通过设置props.type: 'index' 可以实现在每行显示索引行号。

# 带分页的列表

默认是通过接口实现的分页:是否显示分页由列表接口返回的total字段决定,当接口没有返回该字段或者该字段返回0,则不显示分页。如果不需要分页的场景可以利用此特性。分页时默认是20条一页,可通过pageSize和接口配合来改变。

另外,数据如果是通过接口获取,记得主动在 events 里的 init 调一下 @list

# 纯前端分页

通过前端实现的模拟分页:接口一次性返回所有数据,前端通过pageSize设置每页显示的条数,然后设置props['pagination']: 'simulate'

# 表头带排序和筛选的列表

这两个功能是通过接口来实现真实排序和筛选的,下面例子是模拟接口,看不到排序和筛选后的效果。

配置在 sorts 内的字段可以支持排序,排序变更时会触发 list action并携带对应的排序参数。

配置在 filters 内的字段可以支持过滤,可以通过 multiple 控制是否支持多选,如果 remote 配置为false、则会使用默认的字符串过滤并且不会请求接口(如果要自定本地过滤请使用props透传),当 remote 为true时,选择的过滤结果将携带在参数上并会发起新的请求刷新列表。

如果没有配置会使用同名 fieldprops.options 配置,如果都没有filter配置会失效

若配置props['pagination']: 'simulate'的纯前端分页,也支持排序

# 搜索配置 0.5.0+

TIP

注意:在 ams@0.5.0 以前的版本是通过配置 searchssearchsOptions 实现的搜索配置,0.5.0+ 使用新的operations + slot 实现列表的搜索和多选配置(0.5.0-0.6.0 会兼容searchs和searchsOptions,将在0.6.0+移除兼容支持)

通过配置slotsearchs可以配置搜索条件,operations 配置参考:operations配置

# 多选操作配置 0.5.0+

通过配置list 的 options.multipleSelecttrue 时可让列表出现多选按钮,配置 slotmultipleSelect 可以配置多选后出现的操作(多选操作只有在选择了至少一行后才会出现),operations 配置参考:operations配置

# slotBlocks 插槽配置

  • 搜索条顶部:配置子block的slot为top,可以插入到搜索条顶部

  • 搜索条和表格之间:配置子block的slot为tableTop,可以插入到搜索条和表格之间

# 列表每行操作项

可以通过 props['operations-width']: 200 来设置操作项那列的宽度。

# 字段后面追加提示icon

  • 结合field.changeConfig可以实现根据不同的数据改变追加的提示icon状态和提示文案

# 编辑状态的列表

  • 支持字段之间的联动(设置field.changeConfig):某个字段的状态根据另一个字段的取值发生变化(比如下面demo的条件字段会根据对比字段发生变化)

# 在当前列表编辑某些字段

  • 可以field.changeConfig实现修改某个字段的 编辑/展示 状态,从而实现在当前列表编辑该字段的值

# 列表展开表单详细

  • 可通过配置 block.expand 来控制需要展示的表单项(即内部field),0.18.5+支持

# 列表支持拖拽

  • 通过配置list 的 options.dragtrue 让列表支持拖拽,可以在 on.drag-starton.drag-end 事件中监听列表拖拽开始和拖拽结束回调,拖拽完成后会自动更新列表data.list数据顺序,拖拽的位置为默认icon位置拖拽,可通过对指定字段field配置props['class-name']drag-column实行指定字段(列)的拖拽, 也可配置options.showDragIconfalse隐藏拖拽icon

# 列表操作项带标记

  • 通过配置opearations,该配置为operations提供,0.17.12+支持