schema-table

使用方法

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>