完备表组件，封装一些常见的逻辑，开箱即用。具有如下功能：
- 树结构;
- 自定义样式;
- 双击单元格直接编辑;
- 大数据量导出，见常见问题解决方案;
- 增、删、改、查、导入、导出、全屏放大、字段显示或隐藏设置、分页的逻辑。
npm install
npm run serve
若无数据显示，请检查传入正确的增删改查路径，defaultProp响应的数据字段映射关系是否正确
npm i ready-table -S
<template>
<div class="ready-table-demo-page">
<ready-table
:showToolBtns="{
import: true,
export: true,
update: true,
delete: true,
search: false,
add: true,
refresh: true,
exportable: {
filter: false,
},
}"
:colors="colors"
:addConfig="addConfig"
:deleteConfig="deleteConfig"
:updateConfig="updateConfig"
:selectConfig="selectConfig"
:importConfig="importConfig"
:token="{
// url请求基本配置
key: 'Authorization',
value: 'token',
baseUrl: 'http://localhost:8080/',
}"
:defaultProp="{
// 后端返回的字段映射关系
data: 'payload.tableData',
total: 'payload.tablePage.total',
}"
:formRules="formRules"
:hooks="tableHooks"
:fields="fields"
>
</ready-table>
</div>
</template>import { ReadyTable } from "ready-table";
export default {
components: { ReadyTable },
data() {
return {
colors: { // 表的颜色配置
theme: "#0D194B",
fontColor: "#37D0FA",
btnColor: "#F8F4F4",
btnBgColor: "#232B60",
activeColor: "#4F9FFE",
dateRangeBgColor: "#999",
multiOptionBgColor: "#ddd",
tableBorderColor: "#4780BA",
scrollbarThumbColor: "#262F65",
nthChildEvenColor: "",
},
tableHooks: {}, // 将一些常用的函数或参数挂载到钩子，可以打印出来看看
addConfig: { method: "post", url: "manage/machine/insertMacInfo.do" },
selectConfig: { method: "get", url: "table/select" },
updateConfig: { method: "post", url: "manage/machine/updateMacInfo.do" },
deleteConfig: { method: "post", url: "manage/machine/deleteMacInfo.do" },
importConfig: { method: "post", url: "manage/machine/uploadMacInfo.do" },
downloadConfig: { method: "get",url: "manage/detectInfo/downloadToExcel.do"},
fields: [
{
title: "区域编号",
field: "code",
isSlot: false,
sortable: false,
searchable: true,
importRequired: true,
},
{
title: "区域名称",
field: "name",
isSlot: false,
sortable: false,
searchable: true,
importRequired: true,
},
{
title: "采集周期（毫秒）",
field: "periodCollect",
isSlot: false,
sortable: false,
widget: "inputnumber",
importRequired: true,
formLayout: {
min: 0,
max: 1000000000,
},
},
{
title: "重连间隔（秒）",
field: "periodReconn",
isSlot: false,
sortable: false,
widget: "inputnumber",
importRequired: true,
formLayout: {
min: 0,
max: 1000000000,
},
},
{
title: "排序",
field: "sort",
isSlot: false,
sortable: false,
widget: "inputnumber",
isShow: false,
},
{
title: "创建日期",
field: "createtime",
isSlot: false,
sortable: false,
showFormItem: false,
},
],
formRules: {
$schema: "http://json-schema.org/draft-07/schema#",
title: "table form",
description: "A zone from Acme's catalog",
type: "object",
properties: {
name: {
type: "string",
minLength: 1,
require: true,
},
code: {
type: "string",
minLength: 1,
require: true,
},
factoryid: {
type: "string",
minLength: 1,
require: true,
},
workshopid: {
type: "string",
minLength: 1,
require: true,
},
periodCollect: {
type: "number",
require: true,
minimum: 1,
require: true,
},
periodReconn: {
type: "number",
require: true,
minimum: 1,
require: true,
},
},
},
};
},
};formRules校验规则请见richform
表属性
| 字段名 | 含义 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| tableId | 表ID | String | "" | 用于本地保存数据key的区分 |
| size | 尺寸大小 | String | medium | 可选medium / small / mini |
| fields | 栏位字段 | Array | [] | |
| tableData | 表数据 | Array | [] | |
| border | 是否显示边界 | Boolean | true | |
| highlightHoverRow | Boolean | true | ||
| highlightCurrentRow | Boolean | true | ||
| showSeq | 显示序号 | Boolean | true | |
| rowId | 显示序号 | String | id | 当showSeq为true时，必须设置 |
| checkRowKeys | 默认勾选的行id集合 | Array | [] | |
| showHeader | 显示表头 | Boolean | true | |
| colors | 显示序号 | Object | {} | |
| autoPager | 是否自动分页 | Boolean | true | 当为false时表示后端一次性把所有数据都返回，这种情况会手动分页 |
| scrollbarWidth | 滚动条宽度 | String | 12px | |
| showToolBar | 显示工具栏 | Boolean | true | |
| showToolBtns | 工具栏按钮控制 | Object | 具体参数见defaultData | |
| showPageBar | 显示分页 | Boolean | true | |
| showCheckbox | 显示checkbox | Boolean | true | |
| isLoading | 正在加载中 | Boolean | true | |
| resizable | 列宽是否允许拖动 | Boolean | true | |
| align | 对其方式 | String | center | |
| tableToolbar | 配置文件 | Object | {} | 表配置文件 |
| simpleSearch | 查询过滤条件 | Boolean | 简单查询可以传一些自定义的数据给richform | |
| filterCondition | 过滤条件 | Object | {} | 初始化的时就要过滤掉 |
| modalTitle | 模态框标题 | String | 编辑&保存 | |
| hooks | 钩子 | Object | {} | 挂内部一些数据，供外部使用 |
| formData | 弹出数据 | Object | {} | 与formvalue合并 |
| formLayout | 弹窗布局 | Object | {} | 具体见Richform，不传入自动生成 |
| formRules | 弹窗布局是几列 | Object | {} | 具体见Richform， |
| formColumns | 模态框标题 | Number | 2 | |
| formAction | 内部动作 | Boolean | true | this.$emit("action") |
| formTips | 弹窗提示语句 | String | "" | |
| deleteTips | 删除提示语句 | String | 此操作将删除所有勾选的行 | |
| token | 服务器交互权限认证 | Object | ||
| editConfig | 配置文件 | Object | {url:'',method: ""} | |
| fieldConfig | 配置文件 | Object | {url:'',method: ""} | |
| addConfig | 配置文件 | Object | {url:'',method: ""} | |
| deleteConfig | 配置文件 | Object | {url:'',method: ""} | |
| updateConfig | 配置文件 | Object | {url:'',method: ""} | |
| selectConfig | 配置文件 | Object | {url:'',method: ""} | |
| searchConfig | 配置文件 | Object | {url:'',method: ""} | |
| importConfig | 配置文件 | Object | {url:'',method: ""} | |
| downloadConfig | 配置文件 | Object | {url:'',method: ""} | |
| deleteByConditionConfig | 配置文件 | Object | 删除符合过滤条件的 | |
| defaultProp | 响应请求映射关系 | Object | { data: 'tableData', total: 'tablePage.total', pageNum: "pageNum",pageSize: "pageSize" } | |
| treeConfig | 配置文件 | Object | 树配置 | |
| isTree | 是否为树 | Boolean | false |
字段属性
| 字段名 | 含义 | 默认值 | 备注 |
|---|---|---|---|
| title | 显示的字段名 | "" | |
| field | 数据库字段名称<英文> | "" | |
| width | 字段的宽度 | "" | |
| sortable | 字段是否可排序 | true | |
| isSlot | 是否开启插槽 | false | |
| slotName | 动态插槽名 | "" | 当isSlot为true时有效 <template #WorkStatus="{row }"> |
| isShow | 字段是否显示 | true | |
| searchable | 是否可搜索 | false | |
| treeNode | 是否为树节点 | false | 树结构必须且只能有一个为true |
| clickEdit | 启动点击编辑模式 | false | |
| noEdit | 不允许编辑 | false | 针对某一列 |
| showFormItem | 弹窗中是否显示该字段 | true | |
| exportable | 是否可导出 | true | |
| importRequired | 导入是否必填 | false | |
| aline | 独占一行 | false | |
| showOverflow | 是否显示溢出内容 | true | |
| formSort | 弹窗字段顺序 | 1 | |
| fieldSort | 列表字段顺序 | 1 | |
| widget | 弹窗时是用何种组件渲染 | input | 具体字段见Richform |
| formLayout | Richform字段属性 | {} | 具体字段见Richform |
- 大数据导出，可让后端先成excel文件，再返回文件流。此时需要配置downloadConfig，默认是用selectConfig请求回数据后在前端生成excel。java采用easyexcel库生成文件，返回文件数据流样例：
public static void downloadExcel(File file, HttpServletResponse response) {
try{
String fileName = file.getName();
// 返回数据
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName);
response.setHeader("X-Accel-Buffering", "no");
response.setHeader("Content-Length",file.length()+ ""); // 整个文件的大小，前端根据这个计算进度
// 发送给客户端的数据
OutputStream outputStream = response.getOutputStream();
byte[] buff = new byte[1024];
BufferedInputStream bis = null;
// 读取filename
bis = new BufferedInputStream(new FileInputStream(file));
int i = bis.read(buff);
while (i != -1) {
outputStream.write(buff, 0, buff.length);
outputStream.flush();
i = bis.read(buff);
}
bis.close();
}catch (Exception e) {
System.out.println("下载excel出错了"+e.getMessage());
}
}