前端培训文档(3.2.1)

前端培训文档(3.2.1)


列表

<p>列表就是我们常用的数据展示形式,属性与element-UI的el-table属性大多数保持一致 <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=31dea0e382e60fd03b470e079e076bfb&amp;amp;file=file.png" alt="" /></p> <h3><strong>表格设置</strong></h3> <table> <thead> <tr> <th>属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>列表标题</td> <td>见上图1</td> </tr> <tr> <td>是否分页展示</td> <td>按分页查询数据,见上图2</td> </tr> <tr> <td>分页条数</td> <td>每页显示数量,见上图2</td> </tr> <tr> <td>显示边框线</td> <td>表格内容区的分割线,见上图3</td> </tr> <tr> <td>显示行选择</td> <td>表格数据勾选,见上图4</td> </tr> <tr> <td>显示列表查询</td> <td>表格内搜索,见上图5</td> </tr> <tr> <td>显示列配置</td> <td>可配置表格列显示的字段,见上图6</td> </tr> <tr> <td>显示刷新</td> <td>可刷新列表数据,见上图7</td> </tr> <tr> <td>显示列表导出</td> <td>可导出列表显示的数据,见上图8</td> </tr> <tr> <td>应用至合计行</td> <td>表格统计,见上图9</td> </tr> <tr> <td>显示行索引</td> <td>表格序号,见上图10</td> </tr> <tr> <td>关联表单</td> <td>见后面单独讲解</td> </tr> <tr> <td>最小列宽</td> <td>表格的列宽</td> </tr> <tr> <td>行内按钮对齐方式</td> <td>设置操作列按钮的对齐方式:左中右</td> </tr> </tbody> </table> <p><strong>关联表单</strong></p> <p>功能权限</p> <p><strong>搜索表单</strong> 用于配置带有搜索条件的表格,搜索表单配置项下拉框来源于表格同模型下所添加的表单类型为默认搜索defaultQuery的所有表单</p> <p><strong>行内操作</strong> 配置表格的行内操作按钮,点击添加项按钮可进行按钮配置 <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a9c0fe199163584eac84799332f3d641&amp;amp;file=file.png" alt="" /></p> <table> <thead> <tr> <th>属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>功能权限</td> <td></td> </tr> <tr> <td>基本功能</td> <td>提供上传下载功能,基本功能和业务类型只能二选一,上传功能需要配置上传地址,下载功能需要配置下载地址和参数</td> </tr> <tr> <td>业务类型</td> <td>系统提供8种默认(新增,编辑,删除,检入,检出,检出并编辑,撤销检出,提交审阅)的操作,也可自定义</td> </tr> <tr> <td>操作对象数量</td> <td>行内操作一版操作的都是当前行数据,可不选,此项配置主要针对表格按钮,可以限定操作数据的数量</td> </tr> <tr> <td>事件名称</td> <td>系统提供4种默认(新增,编辑,删除,查看)的操作,也可自定义,defaultRemove会执行删除操作</td> </tr> <tr> <td>事件触发前</td> <td>在事件触发前,会执行的代码,多用于动作类型选择自执行,会触发这里的代码</td> </tr> <tr> <td>窗口关闭前</td> <td>在窗口关闭前,会执行的代码</td> </tr> <tr> <td>隐藏表达式</td> <td>控制按钮的隐藏,满足配置的条件表达式可隐藏操作按钮,return index &gt; 1</td> </tr> <tr> <td>动作类型</td> <td>有4种方式(自执行,链接,关联组件--使用场景:新增,编辑等操作,确认弹窗--使用场景:点击按钮调用接口)</td> </tr> <tr> <td>显示表达式</td> <td>控制按钮的显示,满足配置的条件表达式可显示操作按钮,return index &gt; 1</td> </tr> </tbody> </table> <p><strong>行内操作</strong> 配置表格的操作按钮,点击添加项按钮可进行按钮配置,配置项参考行内操作</p> <h3><strong>数据源</strong></h3> <p>表格的数据来源设置,支持两种查询方式:默认查询和自定义查询 <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=bfca8d09ff4d127f462b8af690cdb9e7&amp;amp;file=file.png" alt="" /> <strong>默认查询</strong> <strong>支持配置默认查询参数,格式如下:</strong></p> <pre><code class="language-bash">defaultQueryParams = [ {items: [             {                 &amp;quot;fieldName&amp;quot;: &amp;quot;dxStInvAccountStatuss.status&amp;quot;,                 &amp;quot;operator&amp;quot;: &amp;quot;EQ&amp;quot;,                 &amp;quot;value&amp;quot;: &amp;quot;0&amp;quot;             }         ], operator: &amp;quot;AND&amp;quot; } ]</code></pre> <p>表格类型:分3种:默认表格,审批对象,树形表格 审批对象: <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9430f903ac8c1eff1b1e5e7310aa073c&amp;amp;file=file.png" alt="" /></p> <p>树形表格: <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=1d34f2c4afe83a7b9d705d761f91922a&amp;amp;file=file.png" alt="" /> 展开对象,格式:</p> <pre><code class="language-bash">{&amp;quot;name&amp;quot;:&amp;quot;partReferenceLinks&amp;quot;,&amp;quot;openProps&amp;quot;:[{&amp;quot;name&amp;quot;:&amp;quot;target&amp;quot;}]}</code></pre> <p>默认排序字段,格式如下:</p> <pre><code class="language-bash">{&amp;quot;fieldName&amp;quot;: &amp;quot;section&amp;quot;, &amp;quot;sortOrder&amp;quot;: &amp;quot;asc&amp;quot;}</code></pre> <p><strong>自定义查询</strong> <strong>需要配置请求方式,请求url,请求参数,接口返回数据格式化</strong></p> <h3>表格列的设置</h3> <p>选中某一列,可在组件中对该列的属性及数据进行相关设置, <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e220658054bd004d4008c18a0779faa4&amp;amp;file=file.png" alt="" /></p> <table> <thead> <tr> <th>属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>绑定属性</td> <td>该列绑定的属性值,从左侧直接拖拽过来会带出,也可根据实际情况进行修改</td> </tr> <tr> <td>名称</td> <td>列的名称,可修改</td> </tr> <tr> <td>表头对齐方式</td> <td>表头内容的对齐方式</td> </tr> <tr> <td>行内对齐方式</td> <td>行内内容的对齐方式</td> </tr> <tr> <td>最小列宽</td> <td>最小列宽</td> </tr> <tr> <td>列锁定</td> <td>是否锁定某一列至最左侧或者最右侧</td> </tr> <tr> <td>默认显示项</td> <td>是否默认显示,勾选后则默认会展示,不勾选时界面默认不展示,可在列配置中查看并设置到列表中</td> </tr> <tr> <td>固定显示项</td> <td>勾选后在列配置中处于禁用状态,用户无法设置其在列表中的显示隐藏</td> </tr> <tr> <td>宽度自适应</td> <td>宽度根据内容自适应</td> </tr> <tr> <td>是否可排序</td> <td>当前列是否可排序,此种方式为后端排序,每次点击会调用接口</td> </tr> <tr> <td>是否检出状态</td> <td>是否检出状态</td> </tr> <tr> <td>是否应用至合计行</td> <td>当前列在列表底部最后进行合计,此项如果设置,表格设置下的应用合计行也需要勾选才会生效</td> </tr> <tr> <td>显示格式</td> <td>默认为组件类型,支持render和formatter格式</td> </tr> </tbody> </table>

页面列表

ITEM_HTML