Ready-table NPM

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
表属性
| 字段名 | 含义 | 类型 | 默认值 | 备注 | | ------- | ------------------------ | ---------------------------------------------------------------------------------------- | | String | "" | 用于本地保存数据key的区分 | | String | medium | 可选medium / small / mini | | Array | [] | | | Array | [] | | | Boolean | true | | | Boolean | true | | | Boolean | true | | | Boolean | true | | | String | id | 当showSeq为true时，必须设置 | 的行id集合 | Array | [] | | | Boolean | true | | | Object | {} | | | Boolean | true | 当为false时表示后端一次性把所有数据都返回，这种情况会手动分页 | | String | 12px | | | Boolean | true | | | Object | 具体参数见defaultData | | | Boolean | true | | | Boolean | true | | | Boolean | | true | | Boolean | true | | | String | | center | | Object | {} | 表配置文件 | | Boolean | | 简单查询可以传一些自定义的数据给richform | | Object | {} | 初始化的时就要过滤掉 | | String | 编辑&保存 | | | Object | {} | 挂内部一些数据，供外部使用 | | Object | {} | 与formvalue合并 | | Object | {} | 具体见Richform，不传入自动生成 | | Object | {} | 具体见Richform， | | Number | 2 | | | Boolean | true | this.$emit("action") | | String | "" | | | String | 此操作将删除所有勾选的行 | | 互权限认证 | Object | | | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | {url:'',method: ""} | | Object | | 删除符合过滤条件的 | | Object | | { data: 'tableData', total: 'tablePage.total', pageNum: "pageNum",pageSize: "pageSize" } | | Object | | 树配置 | | 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 |

Ready Table

说明

预览

用法

文档

常见问题解决方案