查询表格

自定义

描述

1. 通过接口获取列表数据
2. 常用属性
   1. 可通过配置 items columns 表单项、表格列，通过 assign 动态定义表单项
   2. request response 自定义查询条件、自定返回结果
   3. actionList actionFn 自定义配置操作列显示内容
   4. itemClass labelWidth propWidth 定义表单样式
   5. layout 样式布局样式
3. 插槽
   1. top
   2. bottom
   3. header
   4. footer
   5. expand

属性

<i-props> Props

参数名	描述	类型	默认值
adaptor	tab category card custom	string	v3
url	接口地址	string	undefined
dict-url	字典URL	string	undefined
remote	从远端获取字典数据	boolean	undefined
dicts	自定义字典	Record<string, unknown>	undefined
category	分类	string	undefined
model-value (v-model)	表单数据	Record<string, unknown>	undefined
tab-type	adaptor:tab 中属性，tabs的风格类型	string	undefined
items	表单项	unknown[]	undefined
columns	表格列	unknown[]	undefined
response	处理接口返回的数据	(data: unknown) => unknown	undefined
request	查询前回调	(data: unknown) => unknown	undefined
fold	是否启用查询条件折叠	boolean	false
selection	是否启用多选	boolean	undefined
layout	页面布局	string	index, header, border, total, sizes, prev, pager, next, jumper
page-size	分页大小	number	20
pager-count	设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠	number	undefined
action-list	操作列按钮配置	unknown[]	查看/编辑/删除
action-fn	操作列按钮控制	(list: unknown[], evt: unknown) => unknown[]	undefined
button-list	表单的按钮配置	unknown[]	查询/重置/展开/折叠
assign	表单项拓展	unknown[]	undefined
validate	查询验证：未接入	() => boolean	undefined
highlight-current-row	是否高亮当前行	boolean	undefined
row-key	行数据的 Key，用来优化 Table 的渲染	string | ((row: DefaultRow) => string)	undefined
hash	表格的唯一值	string	undefined
selected	是否启用保存当前选中行，必须配合 hash 使用	boolean	false
badge	标签右上角（数字）	boolean	false
item-class	表单行样式	string	undefined
label-width	表单的标签宽度	number	undefined
prop-width	表单的组件宽度	number	undefined
clearable	查询表单默认启用清空	boolean	undefined
timer	配置发起请求的间隔，默认不启用setInterval。	number	undefined

adaptor:category 图标分类

adaptor:card

adaptor:tab

其他样式

adaptor:custom

查询表单样式

adaptorStyleadaptorClasslabelWidthpropWidth自定义

slots 插槽

top 表格上方

bottom 表格下方

header 头部插槽

footer 尾部插槽

expand 展开行功能

selection -------

UI - 示例