Ready Table

说明

完备表组件，封装一些常见的逻辑，开箱即用。具有如下功能：

• 树结构;
• 自定义样式;
• 双击单元格直接编辑;
• 大数据量导出，见常见问题解决方案;
• 增、删、改、查、导入、导出、全屏放大、字段显示或隐藏设置、分页的逻辑。

预览

npm install

npm run serve

表
http://localhost:8080/#/

用法

若无数据显示，请检查传入正确的增删改查路径，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());
      }
  }