使用方法

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>