Skip to content

Latest commit

 

History

History
302 lines (292 loc) · 18.1 KB

README.md

File metadata and controls

302 lines (292 loc) · 18.1 KB
Raw

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());
      }
  }