enn-schema-table-vue3 v0.0.1

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

dialogConf

queryConf

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

paginationConf

colConf

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

switchConf

colConf 示例

<template>
  ...
  <SchemaTable
    ...
    :colConf="{
      $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-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

DataModelLocal

本地表格数据源

使用

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

属性 Props

getAllData

Methods

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

本地调试组件

• npm run dev

发包

• lib 为发包后的文件夹