{"id":40269114,"url":"https://github.com/shawroger/vutable","last_synced_at":"2026-01-20T02:52:38.907Z","repository":{"id":43952552,"uuid":"258493164","full_name":"shawroger/vutable","owner":"shawroger","description":"A easy and cool tool to transform a csv file into webpage","archived":false,"fork":false,"pushed_at":"2022-12-11T03:13:10.000Z","size":482,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T03:58:17.652Z","etag":null,"topics":["csv","typescript","vue"],"latest_commit_sha":null,"homepage":"https://shawroger.github.io/vutable/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shawroger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-24T11:27:03.000Z","updated_at":"2020-04-25T11:56:53.000Z","dependencies_parsed_at":"2023-01-26T14:46:19.799Z","dependency_job_id":null,"html_url":"https://github.com/shawroger/vutable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shawroger/vutable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawroger%2Fvutable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawroger%2Fvutable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawroger%2Fvutable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawroger%2Fvutable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shawroger","download_url":"https://codeload.github.com/shawroger/vutable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawroger%2Fvutable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28594958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csv","typescript","vue"],"created_at":"2026-01-20T02:52:38.284Z","updated_at":"2026-01-20T02:52:38.900Z","avatar_url":"https://github.com/shawroger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vutable\n\n---\n\n`vutable` 是一个高效便利的 `CSV文件转网页`的开源工具，支持自定义配置，支持各种检索模式，使用简单方便。\n\n`vutable` 是一个开源的项目，其使用了如下的开源项目\n\n- [vuejs](https://vuejs.org/)\n\n- [axios](https://github.com/axios/axios)\n\n- [rexine](https://github.com/shawroger/Rexine)\n\n- [element-ui](https://github.com/ElemeFE/element)\n\n## 快速开始\n\n```bash\ngit clone https://github.com/shawroger/vutable.git\n```\n\n或者直接在一个目录准备一个`data.csv`和`index.html`文件，并在`index.html`中加入如下内容\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset=\"utf-8\" /\u003e\n\t\t\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n\t\t\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\" /\u003e\n\t\t\u003ctitle\u003eVutable Demo\u003c/title\u003e\n\t\t\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vutable/dist/main.css\" /\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\t\t\u003cscript\u003e\n\t\t\twindow.$vutable = {\n\t\t\t\tindex: true, // 使用序号\n\t\t\t\tfooter: true, //显示页脚\n\t\t\t\ttarget: \"#app\", //渲染 div 的 id\n\t\t\t\tcsv: \"./data.csv\", // 读取的文件路径\n\t\t\t\ttitle: \"Vutable Demo\", // 标题\n\t\t\t\t/*\n\t\t\t\t\tlabel: [], // 每一列的标题\n\t\t\t\t\tuseCols: [], // 控制显示列数\n\t\t\t\t\tsearchMode: [], // 每一列的检索方式\n\n\t\t\t\t\tbeforeInit() {}, // 函数钩子 - 读取文件完成时\n\t\t\t\t\tonload() {}, // 函数钩子 - 渲染完成时\n\t\t\t\t\tonchange() {}, // 函数钩子 - 检索变动时\n\t\t\t\t*/\n\t\t\t};\n\t\t\u003c/script\u003e\n\t\t\u003cscript src=\"https://unpkg.com/vutable/dist/main.js\"\u003e\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 修改文件\n\n默认的读取的`CSV`文件路径\n\n- 开发模式 `/public/data.csv`\n\n- 部署模式 `/data.csv`\n\n```csv\n张三,20,北京\n李四,25,上海\n```\n\n### 本地运行\n\n```bash\nnpm run serve\n```\n\n### 打包部署\n\n```bash\nnpm run build\n```\n\n## 全局配置\n\n修改 index.html 文件\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\tindex: true,\n\t\tfooter: true,\n\t\ttarget: \"#app\",\n\t\tcsv: \"./data.csv\",\n\t\ttitle: \"Vutable Demo\",\n\t\t/*\n\t\t\tlabel: [],\n\t\t\tuseCols: [],\n\t\t\tsearchMode: [],\n\n\t\t\tbeforeInit() {},\n\t\t\tonload() {},\n\t\t\tonchange() {},\n\t\t*/\n\t};\n\u003c/script\u003e\n```\n\n其中 `$vutable` 即为全局配置设置，目前有 7 项可设置属性，3 个函数钩子可供配置。\n\n### title\n\n```ts\ntitle: string;\n```\n\n`title` 是数据表的标题，如果不设置的话，默认为网页的标题 `document.title`\n\n### label\n\n```ts\nlabel: Array\u003cstring\u003e\n```\n\n`label` 是数据表每一列的标题，如果不配置的话，默认读取 `CSV` 文件的第 1 行。\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\t// ...more configs\n\t\tlabel: [\"姓名\", \"年龄\", \"住址\"],\n\t};\n\u003c/script\u003e\n```\n\n`vutable`即会渲染三列分别为`姓名, 年龄, 住址`的数据表\n\n### index\n\n```ts\nindex: boolean;\n```\n\n如果想要额外渲染一行序号，可以在配置`index`为成员前加上`true`，默认为`false`不显示序号\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\t// ...more configs\n\t\tindex: true,\n\t};\n\u003c/script\u003e\n```\n\n### useCols\n\n```ts\nuseCols: Array\u003cnumber\u003e\n```\n\n如果想忽略某一列的渲染，可以在配置`useCols`项，以`CSV`文件内的第一列为 0 依次向右递增，设置在`useCols`项的列的序号将被渲染，如果不设置或设置为空数组，将渲染所有列。\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\t// ...more configs\n\t\tuseCols: [0, 1, 2, 4], // 序号为 3 的列将被忽略\n\t};\n\u003c/script\u003e\n```\n\n### searchMode\n\n```ts\nsearchMode: Array\u003c\n\tnull |  // 不检索\n\tstring |  // 字符匹配模式 | 字符全等模式\n\tboolean | // 排序模式\n\tArray\u003cstring\u003e | // 列表匹配模式\n\tArray\u003c{ key: string; val: string }\u003e //同上\n\u003e\n```\n\n`searchMode` 规定了数据表每一列的检索方式，如果不设置的话，默认不开启检索模式。\n\n`searchMode`的配置项看似复杂，不过都是以`CSV`文件内的第一列为 0 依次向右递增配置检索模式，且每种检索方式只对应一种描述，所以操作起来并不困难。\n\n#### 不检索模式\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\t// ...more configs\n\t\tsearchMode: [null, null, null],\n\t};\n\u003c/script\u003e\n```\n\n将某一列设置为`null`，该列就不会开启检索功能。\n\n#### 字符匹配模式\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\t// ...more configs\n\t\tsearchMode: [\"\", \"\", \"null\"],\n\t};\n\u003c/script\u003e\n```\n\n将某一列设置为`字符串`格式，该列就会开启字符匹配检索模式，即该列元素包含检索内容为符合条件，这也是默认配置。\n\n#### 字符全等模式\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\t// ...more configs\n\t\tsearchMode: [\n\t\t\t\"\", // 字符匹配模式\n\t\t\t\"[=]\", // 字符全等模式\n\t\t\t\"null\",\n\t\t],\n\t};\n\u003c/script\u003e\n```\n\n将某一列设置为`字符串`格式且值为`[=]`，该列就会开启字符全等检索模式，即该列元素全等于检索内容为符合条件。\n\n#### 排序模式\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\t// ...more configs\n\t\tsearchMode: [\"\", true, \"null\"],\n\t};\n\u003c/script\u003e\n```\n\n将某一列设置为`boolean`类型，该列就会开启排序模式，即该列元素会按照`sort`顺序排列，且初始排序方向与设置的`boolean`类型值相同。\n\n#### 列表匹配模式\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\ttitle: \"VUE TABLE DEMO\",\n\t\tconfig: {\n\t\t\tlabel: [\"[#]姓名\", \"年龄\", \"住址\"],\n\t\t\tsearchMode: [\"\", true, \"null\"],\n\t\t},\n\t};\n\u003c/script\u003e\n```\n\n将某一列设置为`Array\u003cstring\u003e`或者`Array\u003c{ key: string; val: string }\u003e`类型，该列就会列表匹配模式，`vutable`会渲染出一个下拉列表进行检索。\n\n\u003e 如何配置下拉列表\n\n如果您的列表显示内容和检索内容相同 ，直接在该列配置一项字符串数组即可。\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\ttitle: \"VUE TABLE DEMO\",\n\t\tconfig: {\n\t\t\tlabel: [\"[#]姓名\", \"年龄\", \"住址\"],\n\t\t\tsearchMode: [\"\", true, [\"北京\", \"上海\", \"广州\"]],\n\t\t},\n\t};\n\u003c/script\u003e\n```\n\n如果您的列表显示内容和检索内容不相同，则该列配置`包含对象key和val的数组`即可。\n\n```html\n\u003cscript\u003e\n\twindow.$vutable = {\n\t\ttitle: \"VUE TABLE DEMO\",\n\t\tconfig: {\n\t\t\tlabel: [\"[#]姓名\", \"年龄\", \"住址\"],\n\t\t\tsearchMode: [\n\t\t\t\t\"\",\n\t\t\t\ttrue,\n\t\t\t[\n\t\t\t\t{ val: \"BJ\", key:\"北京\" },\n\t\t\t\t{ val: \"SH\", key:\"上海\" },\n\t\t\t\t{ val: \"GZ\", key: \"广州\" }\n\t\t\t]\n\t\t},\n\t};\n\u003c/script\u003e\n```\n\n## 钩子函数\n\n### beforeInit\n\n`beforeInit`函数钩子在读取文件完成时调用，第一个参数为读取到的文件的内容。\n\n### onload\n\n`onload`函数钩子在渲染完成时调用，第一个参数为[hooks](./#hooks)。\n\n### onChange\n\n`onChange`函数钩子在检索变动时(如切换检索、输入改变、换页翻页)调用，第一个参数为[hooks](./#hooks)。\n\n## 其他配置\n\n### csv\n\n```ts\ncsv: string;\n```\n\n配置项`csv`为`vutable`读取的`CSV`文件的路径，默认为`./data.csv`(相对于`index.html`的路径)，可以为远程资源。\n\n### target\n\n```ts\nfooter: string;\n```\n\n选择要渲染的 DIV 的 id，默认为`#vutable`标记。\n\n### footer\n\n```ts\nfooter: boolean;\n```\n\n控制是否显示默认页脚，默认为`true`，即显示页脚。\n\n### 只读项 · hooks\n\n`hooks`是`vutable`暴露在全局的一个对象，包含了以下内容：\n\n```js\n{\n\troot, // 即为 window.$vutable\n\twidth, // 页面宽度\n\tpageSize, // 总页数\n\ttableData, // 转换后的数据\n\tsearchMode, // 所有已配置的检索模式\n\toriginData, // 原始文件内容\n\tcurrentType, // 当前的检索模式\n\tcurrentPage; // 当前页数\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshawroger%2Fvutable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshawroger%2Fvutable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshawroger%2Fvutable/lists"}