{"id":15067467,"url":"https://github.com/kevinmint55/vue-willtable","last_synced_at":"2025-04-09T22:16:41.830Z","repository":{"id":37336425,"uuid":"196812405","full_name":"KevinMint55/vue-willtable","owner":"KevinMint55","description":"An editable table component for Vue.js 2.0","archived":false,"fork":false,"pushed_at":"2023-07-03T01:17:21.000Z","size":1370,"stargazers_count":156,"open_issues_count":28,"forks_count":37,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T22:16:37.287Z","etag":null,"topics":["editable","element-ui","excel","table","vue","vue-components","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KevinMint55.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-14T08:31:44.000Z","updated_at":"2025-01-22T11:16:35.000Z","dependencies_parsed_at":"2025-01-15T09:27:41.299Z","dependency_job_id":"5d52ec00-a239-4786-bb4b-ead3e438df19","html_url":"https://github.com/KevinMint55/vue-willtable","commit_stats":{"total_commits":91,"total_committers":3,"mean_commits":"30.333333333333332","dds":"0.15384615384615385","last_synced_commit":"67c2f719b69af64b2c592618ddb9f95f1257ac61"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinMint55%2Fvue-willtable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinMint55%2Fvue-willtable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinMint55%2Fvue-willtable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinMint55%2Fvue-willtable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KevinMint55","download_url":"https://codeload.github.com/KevinMint55/vue-willtable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119288,"owners_count":21050755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["editable","element-ui","excel","table","vue","vue-components","vuejs","vuejs2"],"created_at":"2024-09-25T01:24:19.020Z","updated_at":"2025-04-09T22:16:41.810Z","avatar_url":"https://github.com/KevinMint55.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-willtable可编辑的表格组件\n\n[English document](https://github.com/KevinMint55/vue-willtable/blob/master/READNE-EN.md)\n\n适用于Vue的可编辑的表格组件，支持多种快捷键操作，模拟Excel的操作体验\n\nDemo here: https://demo.willwuwei.com/willtable/\n\n基于该组件实现的多人实时共享编辑表格系统: \n\n[访问网址](https://castle.willwuwei.com)\n\n[前端项目地址](https://github.com/KevinMint55/vue-castle)\n\n[后端项目地址](https://github.com/KevinMint55/node-castle)\n\n## 截图\n\n![image](https://qiniu.willwuwei.com/willtable1.gif)\n\n![image](https://qiniu.willwuwei.com/willtable2.gif)\n\n## 特性\n\n- 表格宽度调整\n- 表格列固定\n- 数据筛选与排序\n- 行多选\n- 批量删除与复制粘贴\n- 可与Excel互相复制粘贴\n- 数据下拉复制\n- 下拉复制与多选单元格时候表格可自动滚动\n- 获取改变的数据行\n- 多种数据类型校验\n- 支持自定义规则数据校验\n- 获取校验非法的数据行\n- 支持撤销与重做\n- 可自定义每个单元格样式与类名\n- 使用局部渲染，支持更大量数据的展示\n\n## 安装\n\n```\nnpm install vue-willtable --save\n```\n\n## 挂载\n\n### 挂载在全局\n\n``` javascript\nimport Vue from 'vue'\nimport VueWilltable from 'vue-willtable'\n\n// require styles\nimport 'vue-willtable/dist/vue-willtable.min.css'\n\nVue.component('VueWilltable', VueWilltable)\n```\n\n### 挂载在组件\n\n``` javascript\nimport VueWilltable from 'vue-willtable'\n\n// require styles\nimport 'vue-willtable/dist/vue-willtable.min.css'\n\nexport default {\n  components: {\n    VueWilltable\n  }\n}\n```\n\n## 使用例子\n\n```vue\n\u003ctemplate\u003e\n  \u003cwilltable\n    ref=\"willtable\"\n    :columns=\"columns\"\n    v-model=\"data\"\n    maxHeight=\"800\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      columns: [\n        {\n          type: 'selection',\n          width: 40,\n          fixed: true,\n        },\n        {\n          title: '序号',\n          key: 'sid',\n          fixed: true,\n          type: 'number',\n          width: 100,\n        },\n        {\n          title: '姓名',\n          key: 'name',\n          fixed: true,\n          width: 120,\n        },\n        {\n          title: '日期',\n          key: 'date',\n          type: 'date',\n          width: 100,\n        },\n        {\n          title: '工作岗位',\n          key: 'email',\n          width: 300,\n          type: 'select',\n          options: [\n            {\n              value: 'Web前端开发',\n              label: 'Web前端开发',\n            },\n            {\n              value: 'Java开发',\n              label: 'Java开发',\n            },\n            {\n              value: 'Python开发',\n              label: 'Python开发',\n            },\n            {\n              value: 'Php开发',\n              label: 'Php开发',\n            },\n          ],\n        },\n        {\n          title: '月份',\n          key: 'month',\n          type: 'month',\n          width: 100,\n        },\n        {\n          title: '地址',\n          key: 'address',\n          width: 200,\n        },\n        {\n          title: '标题',\n          key: 'title',\n          width: 300,\n        },\n        {\n          title: '内容',\n          key: 'paragraph',\n          width: 300,\n        },\n        {\n          title: '链接',\n          key: 'url',\n          width: 200,\n        },\n        {\n          title: 'ip',\n          key: 'ip',\n          width: 200,\n          validate: (value) =\u003e {\n            const pattern = /((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}/g;\n            return pattern.test(value);\n          },\n        },\n        {\n          title: '总金额',\n          key: 'sum',\n          width: 200,\n        },\n        {\n          title: 'ID',\n          key: 'id',\n          width: 200,\n        },\n        {\n          title: '色值',\n          key: 'color',\n          width: 200,\n        },\n      ],\n      data: [],\n    },\n  },\n  mounted() {\n    this.getData();\n  },\n  methods: {\n    getData() {\n      const data = [];\n      this.$refs.willtable.setData(data);\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n### 数据\n\nthis.$refs.willtable调用setData方法来更新整表数据，并会重置历史数据记录.\n\nthis.$refs.willtable调用getData方法来获取整表数据.\n\n`v-model`进行值的绑定\n\n### 属性\n\n参数 | 说明 | 类型 | 可选值 | 默认值\n---|---|---|---|---\ncolumns | 表格列的配置描述 | Array | —— | []\nmaxHeight | 表格最大高度 | string / number  | —— | ——\nrowHeight | 每行高度 | string / number | —— | ——\ndisabled | 禁止编辑 | Boolean  | —— | true\nshowIcon | 显示表头类型图标 | Boolean  | —— | false\ncellStyle | 单元格的 style 的回调方法 | Function({row, column, rowIndex, columnIndex}) | —— | ——\ncellClassName | 单元格的 className 的回调方法 | Function({row, column, rowIndex, columnIndex})  | —— | ——\ndisabledCell | 禁用单元格　| Function({row, column, rowIndex, columnIndex}) =\u003e Boolean  | —— | () =\u003e false\nshowAddRow | 显示添加行功能 | Boolean  | —— | false\naddRowAndCopy | 添加行时复制上一行数据 | Boolean  | —— | false\n\n### 事件\n\n事件名称 | 说明 | 回调参数\n---|---|---\nselection-change | 当选择项发生变化时会触发该事件 | selection\n\n### 方法\n\n方法名 | 说明 | 参数\n---|---|---\ngetData | 用来获取数据，返回当前表格数据 | ——\nsetData | 用来设置数据，并重置历史记录 | data \ngetChangeData | 获取变化的数据行 | ——\ngetErrorRows | 获取校验错误的数据和索引 | ——\naddItem | 底部添加一行数据 | item\naddRow | 添加行 | rowIndex, copyRow, customData\nremoveItems | 批量删除，参数key为每行的唯一标识属性如id，values为该标识属性的数组 | key, values\nsetCellData  | 设置单元格数据 | rowIndex, columnIndex, value\nfullscreen | 全屏展示 | ——\nexitFullscreen | 退出全屏 | ——\n\n### 列属性\n\n参数 | 说明 | 类型 | 可选值 | 默认值\n---|---|---|---|---\nkey | 对应列内容的字段名 | String | —— | ——\ntitle | 列头显示文字 | String | —— | ——\nwidth | 列宽度 | String / Number | —— | ——\ntype | 列类型 | String | selection/number/date/select/month | ——\nformat | 千分号格式（用于number类型） | Boolean | —— | true\noptions | select下拉选项 | Array | { value: '值', label: '显示文字' } | ——\nfixed | 是否固定在左侧 | Boolean | —— | false\naction | 是否启用筛选和排序 | Boolean | —— | false\ndisabled | 是否禁止编辑 | Boolean | —— | false\nnoVerify | 是否禁用校验 | Boolean | —— | false\nvalidate | 自定义校验 | Function(value) | —— | ——\ncustomInput | 自定义输入 | Function({ row, column, rowIndex, columnIndex, value }) | —— | ——\n\n### 快捷键\n\n快捷键 | 说明\n---|---\n方向键 | 移动编辑框\nCtrl + C | 粘贴\nCtrl + V | 复制\nCtrl + A | 单元格全选\nCtrl + Z | 撤销\nCtrl + Y | 重做\nEnter | 单元格编辑/完成单元格编辑\nDelete、Backspace | 删除\n\n## 作者\n\n[WillWu](https://www.willwuwei.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinmint55%2Fvue-willtable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinmint55%2Fvue-willtable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinmint55%2Fvue-willtable/lists"}