Schema-Table-Vue3

Schema table for vue3

注意

• Vue3 版本， 布局使用最新布局，不再支持已有布局。
• 参数相关修改：
  • colConfig -> colConf
  • dialogConfig -> dialogConf
  • paginationConfig -> paginationConf
• BooleanResult 状态展示请使用 enn-status-result-vue3 组件

使用方法

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

属性 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 | | '' | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符 | | hasSearchBtn | Boolean | | false | 是否展示搜索按钮（默认值为 false，展示 input append 搜索按钮） | | hasReset | Boolean | | false | 是否展示重置按钮等 | | filters | Array | | [] | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用） | | 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' | 新增、编辑对话框的宽度，也可以传百分比 | | dialogConf | Object | | {} | dialog 配置对象 | | colConf | Object | | {} | 指定各列的参数（比如列宽），key 为字段的 name。可以指定名为 “$actionBtns”的字段来设置“操作”列 | | queryConf | Object | | {} | 设置 query 参数的 key | | paginationConf | Object | | {} | 进行 pagenation 相关设置 | | tooltipEffect | String | | light | tooltip effect 属性 dark/light |

dialogConf

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

queryConf

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

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

paginationConf

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | pageSizes | Array<Number> | | | 分页器每页显示个数选择器的选项设置 |

colConf

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

• 通过 colConf[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 是否相等 |

colConf 示例

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

插槽 Slots

| 插槽名称 | 绑定值 | 作用 | | --- | --- | --- | | query | schema（Object）, data: （Object）） | 用于插入自定义 query 表单 | | overrideQueryBtns | row（Object） | 用于覆写 query 中搜索、重置后面的其他操作按钮（老版样式的新增、批量删除） | | queryBtns | row（Object） | 用于插入自定义操作，插入位置位于 query 区域（搜索按钮右侧） | | 列插槽（每一列的插槽名称都不同，具体为 schema 中的 name 值） | row（Object）/ data（Object） | 针对某一列的模板进行覆写，绑定的 row 为当前行的数据，data 为当前单元格（当前行当前列）的数据 | | createBtn | onCreate（方法） | 覆写新增按钮，调用绑定的 onCreate 方法可以唤起默认的新增对话框 | | multipleDeleteBtn | onMultipleDelete, multipleDeleteLoading, disabled, selectedRows, | 用于覆写批量删除按钮，调用绑定的 onMultipleDelete 可以自动处理批量删除逻辑 | | overrideActionBtns | row（Object） | 在 hasAction 为 true 时生效。用于覆写整个“操作”列 | | preActionBtns | row（Object） | 操作列，编辑按钮左侧的插槽 | | actionBtns | row（Object） | 操作列，编辑按钮和删除按钮中间的插槽 |

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

<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 | 行点击事件 |

Table Methods

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

DataModel

使用

import { DataModel } from 'enn-schema-table-vue3';
// 生成实例
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 | | | | axios 的配置项 |

DataModelLocal

本地表格数据源

使用

import { SchemaTable, DataModelLocal } from 'enn-schema-table-vue3'
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 |

本地调试组件

• npm run dev

发包

• lib 为发包后的文件夹