iView Plus

HTable 组件使用说明

HTable 是基于 iView Table 组件进行扩展的一个新组件,主要用于 列表显示, 自动筛选, 表单生成, 其配置方式与原版类似,在 column 及 组件 中增加了一些新属性字段.

| 属性 | 类型 | 默认值 | 说明 | | ---- | --- | ---- | ---- | | size | String | small | 默认组件尺寸 | | request | Promise | 无 | 用于请求列表数据 | | params | [Object, Array] | 无 | 请求参数,当数据为Array时,则会自动映射到请求方法的参数中 | | filter-index | Number | 1 | 当 Params 为 Array 时,需要指定查询参数的索引位置 | | create | Boolean | False | 是否显示创建按钮,开启后将使用自动表单生成页面数据 | | edit | Boolean | False | 是否可编辑 | | remove | Boolean | False | 是否可删除 | | actionRender | Function | Null | 覆盖原有操作列的渲染器 | | search | Boolean | False | 是否可搜索 | | selection | Boolean | False | 是否可选择 | | pageable | Boolean | False | 是否可分页 | | totalPath | Number | result.total | 总数量路径 | | dataPath | String | Null | 数据路径, 如: result.records | | columns | Object | Null | 基于原版增加了属性,见下表 | | options | Array | 无 | 附加列,用于在搜索及表单中使用,不会显示在 Table 列表中,字段属性与 Columns 相同 | | on-submit | Event | 无 | 当表单提交按钮点击并且通过表单验证时会触发此事件(参数: 表单数据, 是否为编辑) | | on-remove | Event | 无 | 当点击删除按钮时,触发此事件(参数: 当前选择的 行数据) | | remove-cb | Promise | 无 | 删除时调用的 Promise 方法,此方法优先于 on-remove | | submit-cb | Promise | 无 | 提交数据时调用的 Promise 方法,此方法优先于 on-submit |

Column 新增通用属性说明

| 属性 | 类型 | 默认值 | 说明 | | ---- | --- | ---- | ---- | | searchable | Boolean | False | 是否可用于搜索 | | span | Byte | 24 | Col Span | | require | Boolean | False | 是否属于必填项目(用于表单) | | type | String | Null | 目前支持以下类型: input, number, select | | options | Array | Null | 当 type 为 select 时用于渲染下拉框选择列表,数据结构见后方说明 | | request | Function | Null | 当 type 为 select 时, 用于实现通过远程接口请求并渲染列表,实际调用的是 HSelect 组件 | | params | Object | Null | 请求参数 | | tk | String | Null | TitleKey,用于 显示 列表标题 | | vk | String | Null | ValueKey,用于 设置 列表值 | | dataPath | String | Null | 数据路径, 如: result.records | | multiple | Boolean | False | 是否为多选 | | onLoaded | Function | Null | HSelect 中使用,当 下拉列表 数据获取成功后,会触发该事件并附带当前组件, 已选中数据, 数据列表 参数 | | onSelect | Function | Null | 当选中时触发事件并附带当前选中值 | | onInit | Function | Null | 初始化完成后触发并附带 组件 参数 |

Options 结构说明

[
    {title: '这里是标题', value: '这里是值'},
    {title: '这里是标题2', value: '这里是值2'}
]

HSelect 组件使用说明

例子

<h-select v-model="searchForm.bigTypeNo" :request="requestMethod" :params="{size: 999, page: 1}" nodePath="result.records" vk="ptId" tk="typeName"/>