enn-schema-table

使用方法

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
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 |