Ready Table

说明

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

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

预览

npm install

npm run serve

表
https://localhost:8080/#/

用法

若无数据显示，请检查传入正确的增删改查路径，defaultProp响应的数据字段映射关系是否正确

npm i ready-table -S

<template>
  <div class="ready-table-demo-page">
    
    
  </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: "https://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
表属性

字段属性

常见问题解决方案

• 大数据导出，可让后端先成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());
      }
  }