0.0.4 • Published 3 years ago
使用方法
import { SchemaTable, DataModel } from 'schema-table'
属性 Props
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|---|
| schema | Object | 是 | | 字段描述文件，由 schema-form-editor 生成，包含各个字段的信息 |
| model | Object | 是 | | 数据模型，包含 CURD 接口信息 |
| model.query | Object | 是 | | 传入初始的 query 信息，通常是分页信息 { pageSize: 10, pageNumber: 1 }，pageSize 可以取 10/20/50，query 信息会在列表请求的时候带给后端 |
| hasQuery | Boolean | | true | 是否包含搜索、筛选框、搜索按钮等 |
| search | String | | '' | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符 |
| filters | Array | | [] | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用） |
| hasAction | Boolean | | true | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 canCreate/canEdit/canDelete 才会生效 |
| canCreate | Boolean | | true | 是否显示新增按钮 |
| canEdit | Boolean | | true | 是否显示编辑按钮 |
| canDelete | Boolean | | true | 是否显示删除按钮 |
| fetchOnEdit | Boolean | | true | 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填 |
| defaultFormData | Object | | {} | 给新增、编辑对话框中的表单增加默认值 |
| hasPagination | Boolean | | true | 是否显示分页 |
| maxHeight | String | | undefined | 表格行显示区域的最大高度，格式为 '500px' 这样的字符串 |
| dialogWidth | String | | '600px' | 新增、编辑对话框的宽度，也可以传百分比 |
| colWidths | Object | | {} | 指定各列的宽度，key 为字段的 name。可以指定名为 “$actionBtns”的字段来指定“操作”列的宽度 |
插槽 Slots
| 插槽名称 | 绑定值 | 作用 |
|---|
| createBtn | onCreate（方法） | 复写新增按钮（如增加“批量添加”功能）调用绑定的 onCreate 方法可以唤起默认的新增对话框 |
| 列插槽（每一列的插槽名称都不同，具体为 schema 中的 name 值） | row（Object）/ data（Object） | 针对某一列的模板进行复写，绑定的 row 为当前行的数据，data 为当前格子（当前行当前列）的数据 |
| overrideActionBtns | row（Object） | 在 hasAction 为 true 时生效。用于复写整个“操作”列 |
| actionBtns | row（Object） | 用于插入自定义操作，插入位置位于默认的“编辑”和“删除”按钮之间 |
自定义“操作”栏按钮写法参考
<!-- 用 el-link制作按钮，添加 action-link 的 class 增加间距 -->
<el-link
class="action-link"
type="danger"
@click="onDelete(row)"
>
<!-- 一个 el-icon 作为图标 -->
<i class="el-icon-download"/>
下发
</el-link>