使用方法

import { SchemaTable, DataModel } from 'enn-schema-table'

• @0.4.0 破坏性变更注意事项：

  • DataModel
    • 原有结果中的 message 改为 _message。前缀 _ 避免与 data 里已有的 message 冲突。
    • 参数统一化变更 xxxConfig -> xxxConf: axiosConfig -> axiosConf
  • Schema-table
    • .top-right-btn、.enn-schema-table-query .query-reset-btn 增加 margin-bottom: 15px; 解决与表格贴在一起的问题。
    • 参数统一化变更 xxxConfig -> xxxConf: SchemaTable: colConfig、dialogConfig、paginationConfig -> colConf、dialogConf、paginationConf
    • pageNumberKey、pageSizeKey 移动至 paginationConfig 中
  • BooleanResult、TextEllipsis 组件文件目录位置调整，移至 components 下

• @0.3.0 变更注意事项

• 注意：布局请使用 layout 参数进行配置，属性：newLayout、appendSearch 已去除（改用 newLayout: layout="title"; appendSearch: queryLayout="appendBtnSearch"）！

• 带有 Title 版本布局， schema-table 属性：layout === 'title' || !!title 时触发。

属性 Props

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | schema | Object | 是 | | 字段描述文件，包含各个字段的信息 | | model | Object | 是 | | 数据模型，包含 CURD 接口信息 | | model.query | Object | 是 | | 传入初始的 query 信息，通常是分页信息 { pageSize: 10, pageNumber: 1 }，pageSize 可以取 10/20/50，query 信息会在列表请求的时候带给后端 | | hasQuery | Boolean | | true | 是否包含搜索、筛选框、搜索按钮等 | | search | String | | '' | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符 | | queryLayout | String | | default | 组件 query 布局模式，default/appendSearch/prependBtnSearch/appendBtnSearch 具体参数请查看下方 queryLayout 枚举值 | | layout | String | | default | 组件布局模式，default/title/card 具体参数请查看下方 layout 枚举值 | | hasReset | Boolean | | false | 是否展示重置按钮等 | | filters | Array | | [] | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用） | | tableAttrs | Object | | | 传入 el-table 的参数，参考 el-table Table Attributes | | hasOrder | Boolean | | true | 是否在表格的第一列展示序号，默认为全局序号（通过计算当前页和位置获得） | | hasAction | Boolean | | true | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 canCreate/canEdit/canDelete 才会生效 | | canCreate | Boolean | | true | 是否显示新增按钮 | | canEdit | Boolean | | true | 是否显示编辑按钮 | | canDelete | Boolean | | true | 是否显示删除按钮 | | canMultipleDelete | Boolean | | false | 是否可以批量删除，需要配合 DataModel 的 multipleDeleteApi 批量删除按钮才会生效 | | showMultipleSelect | Boolean | | false | 是否展示多选列 | | defaultSelected | Array | | | 默认选中的行 | | fetchOnEdit | Boolean | | true | 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填 | | defaultFormData | Object | | {} | 给新增、编辑对话框中的表单增加默认值 | | hasPagination | Boolean | | true | 是否显示分页 | | maxHeight | String | | undefined | 表格行显示区域的最大高度，格式为 '500px' 这样的字符串 | | dialogWidth | String | | '600px' | 新增、编辑对话框的宽度，也可以传百分比 | | dialogConfig | Object | | {} | dialog 配置对象 | | colConfig | Object | | {} | 指定各列的参数（比如列宽），key 为字段的 name。可以指定名为 “$actionBtns”的字段来设置“操作”列 | | queryConf | Object | | {} | 设置 query 参数的 key | | paginationConfig | Object | | {} | 进行 pagenation 相关设置 | | title | String | | - | 表格的标题，传入标题自动开启新版样式 | | newLayout | Boolean | | false | 使用新的布局 | | tooltipEffect | String | | light | tooltip effect 属性 dark/light |

layout 枚举值

• default: 最初始的布局，search 在 form 第一位，有搜索按钮。
• title: table 组件包括了 title 的布局，table 操作按钮在 title 右侧。
• card: 列表为卡片格式的布局。

queryLayout 枚举值

• default: 最初始的布局，search 在 form 第一项，有搜索按钮（el-button type="primary"）。
• appendSearch: search 在最后一项，去除所有项的 label，有搜索按钮（el-button type="primary"）。
• prependBtnSearch: search 在 form 第一项，搜索按钮在 search input prepend （输入框 前置 内容）的位置。
• appendBtnSearch: search 在 form 最后一项，搜索按钮在 search input append （输入框 后置 内容）的位置。

dialogConfig

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | closeOnClickModal | Boolean | | false | 是否可以通过点击 modal 关闭 Dialog | | dialogWidth | String | | 712px | 弹窗的 width |

queryConf

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | searchKey | String | | search | 列表请求入参关键词的 key | | closePrefix | Boolean | | | 是否关闭列表请求入参参数改成 key 开头前缀的功能，使用 schema 的 name 作为 key。 | | schema | Object | | | query 专用的 schema，用于替换原有 schema | | formConf | Object | | | query 专用的 config，可覆盖 props.formConf | | defaultQuery | Object | | | query 默认值，用于重置按钮恢复到默认数据 | | showLabel | Boolean | | | 是否展示 query 的 Label，新版（传入 title || newLayout === true 时）默认 true | | clearable | Boolean/Object | | true | 是否展示 query 中 select 的清除按钮 |

• clearable 传 false，表示所有的 select 都关闭清除按钮
• clearable 作为对象，传入 select 的 name ，可以关闭对应 select 的清除按钮

paginationConfig

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | pageSizes | Array<Number> | | | 分页器每页显示个数选择器的选项设置 | | pageNumberKey | String | | pageNumber | 列表请求入参页码的 key | | pageSizeKey | String | | pageSize | 列表请求入参当前页条数的 key |

colConfig

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | width | String | | | 对应列的宽度 | | minWidth | String | | | 对应列的最小宽度 | | ellipsis | Boolean | | | 对应列是否使用多行省略，默认2行 | | switchConf | Object | | | type 为 switch 时的展示配置 |

• 通过 colConfig[colName] 配置对应列
• 其中操作列的 colName 为 $actionBtns
• 其中序号列的 colName 为 $index

switchConf

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | minIcon | Boolean | | true | 使用点的图标。自定义 icon 时，该项必须为 false | | showIcon | Boolean | | true | 是否显示 icon | | activeText | String | | 是 | data true 时的文案，可直接在 schema 中配置 | | inactiveText | String | | 否 | data 不为 true 时的文案，可直接在 schema 中配置 | | activeIcon | String | | | data true 时的 icon。minIcon false 时，默认值为 el-icon-success | | inactiveIcon | String | | | data 不为 true 时的 icon。minIcon false 时，默认值为 el-icon-error | | activeValue | Boolean/String/Number | | true | switch 开值，可直接在 schema 中配置 | | inactiveValue | Boolean/String/Number | | false | switch 关值，可直接在 schema 中配置 | | strictMode | Boolean | | true | 使用三等号判断传入的值和 activeValue 是否相等 |

colConfig 示例

<template>
  ...
  <SchemaTable
    ...
    :colConfig="{
      $actionBtns: { width: 50 }
    }"
  >
  ...
</template>

插槽 Slots

| 插槽名称 | 绑定值 | 作用 | | --- | --- | --- | | query | schema（Object）, data: （Object）） | 用于插入自定义 query 表单 | | overrideQueryBtns | row（Object） | 用于覆写 query 中搜索、重置后面的其他操作按钮（老版样式的新增、批量删除） | | preQueryBtns | row（Object） | 用于插入自定义操作，插入位置位于 query 区域（搜索按钮右侧，DOM 新增按钮之前） | | queryBtns | row（Object） | 用于插入自定义操作，插入位置位于 query 区域（搜索按钮右侧，DOM 批量删除按钮之后） | | 列插槽（每一列的插槽名称都不同，具体为 schema 中的 name 值） | row（Object）/ data（Object） | 针对某一列的模板进行覆写，绑定的 row 为当前行的数据，data 为当前单元格（当前行当前列）的数据 | | createBtn | onCreate（方法） | 覆写新增按钮，调用绑定的 onCreate 方法可以唤起默认的新增对话框 | | multipleDeleteBtn | onMultipleDelete, multipleDeleteLoading, disabled, selectedRows, | 用于覆写批量删除按钮，调用绑定的 onMultipleDelete 可以自动处理批量删除逻辑 | | overrideHeaderBtns | row（Object） | 用于覆写顶部操作按钮 | | headerBtns | row（Object） | （只有新版布局才会生效）用于插入顶部自定义操作，插入位置位于顶部按钮之后 | | overrideActionBtns | row（Object） | 在 hasAction 为 true 时生效。用于覆写整个“操作”列 | | preActionBtns | row（Object） | 操作列，编辑按钮左侧的插槽 | | postActionBtns | row（Object） | 操作列，删除按钮右侧的插槽 | | actionBtns | row（Object） | 操作列，编辑按钮和删除按钮中间的插槽 | | cardItem | row（Object） | layout="card" 模式专属，卡片项插槽，完全覆盖卡片，包括内置的编辑、删除按钮等 | | cardContainer | row（Object） | layout="card" 模式专属，卡片内容插槽 |

自定义“操作”栏按钮写法参考

<template #actionBtns="{ row }">
  <el-link
    type="primary"
    @click="onDispatch(row)"
  >
    下发
  </el-link>
</template>

Table Events

| 事件名 | 参数 | 说明 | | --- | --- | --- | | selectionChange | selectedRows, selectedRow | 当选择项发生变化时触发该事件。参数 selectedRows 表示选中的项数组，selectedRow 表示当前操作的项。selectAll 的时候 selectedRow 该项为 undefined | | currentChange | currentRow, oldCurrentRow | 单行选中 | | rowClick | row, column, event | 行点击事件。layout="card" 时为卡片项点击事件 |

Table Methods

• 可使用 ref 获取并触发执行 | 函数名 | 参数 | 说明 | | --- | --- | --- | | onSearch | | 重置页码至1，并刷新列表 | | fetch | | 刷新当前页列表 | | onReset | | 重置 query 至默认值 | | onCreate | | 开启新增弹窗 | | onEdit | record | 开启编辑弹窗，参数为行数据 | | onDelete | record | 触发删除功能，参数为行数据 |

DataModel

使用

import { DataModel } from 'enn-schema-table';
// 生成实例
const dataModel = new DataModel({
  createApi: 'api',
  getApi: 'api',
  getMap(res) {
    return res;
  },
  getListApi: 'getListApi',
  getListMap(item) {
    return item;
  },
  updateApi: 'updateApi',
  deleteApi: 'deleteApi',
  multipleDeleteApi: 'multipleDeleteApi',
  query: { pageNumber: 1, pageSize: 10 },
  axiosConfig: {
    timeout: 10000,
  },
});
// 调用方式
async function test() {
  const createRes = await dataModel.create();
  const getRes = await dataModel.get();
  const getListRes = await dataModel.getListApi();
  const updateRes = await dataModel.update();
  const deleteRes = await dataModel.delete();
  const multipleDeleteRes = await dataModel.multipleDelete();
}

属性 Props

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | createApi | String | | | post 请求的 api，dataModel. | | getApi | String | | | get 请求的 api | | getMap | Function | | | 处理 get 返回结果，处理完需要把结果返回 | | getListApi | String | | | getList 获取列表的 api，返回列表数据和 pagination 数据 | | getListMap | Function | | | getList 结果 map 的回调函数，参数为结果每一项数据，处理完需要把结果返回 | | getListFunc | Function | | | 替代 getList 的函数，参数为 query | | updateApi | String | | | put 请求的 api | | deleteApi | String | | | delete 请求的 api | | multipleDeleteApi | | | | 批量删除请求的 api，使用的 axios({ method: 'DELETE' }) 发请求 | | query | | | | get 请求的参数 | | axiosConfig | Object | | | axios 的配置项 |

DataModelLocal

本地表格数据源

使用

import { SchemaTable, DataModelLocal } from 'enn-schema-table'
const localMd = new DataModelLocal({
  list: [{id: 1, a: 1}],
});

属性 Props

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | list | Array | | | 列表全部的数据 | | createMap | Function | | | 处理列表创建的回填数据 | | getMap | Function | | | 处理 get 返回结果，处理完需要把结果返回 | | getListMap | Function | | | getList 结果 map 的回调函数，参数为结果每一项数据，处理完需要把结果返回 | | updateMap | Function | | | 处理列表编辑的回填数据 | | query | Object | | | pageNumber, pageSize 参数 | | isDesc | Boolean | | | list 数据新增时的顺序。true：使用 list.unshift() 增加项 |

getAllData

Methods

• 可使用 model.methodsName 调用 | 函数名 | 参数 | 说明 | | --- | --- | --- | | getAllData | removeId | 获取所有的数据，参数 true，表示删除每一项的 id |