enn-schema-table v0.4.0

使用方法

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

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

queryConf

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

paginationConfig

colConfig

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

switchConf

colConfig 示例

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

插槽 Slots

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

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

Table Events

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

DataModelLocal

本地表格数据源

使用

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

属性 Props

getAllData

Methods

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