{"id":13623139,"url":"https://github.com/lison16/vue-bigdata-table","last_synced_at":"2025-04-15T14:32:05.491Z","repository":{"id":45694583,"uuid":"115604450","full_name":"lison16/vue-bigdata-table","owner":"lison16","description":"基于Vue.js的百万级数据表格组件，支持编辑、筛选、过滤、粘贴、拖动调整列宽等多种功能","archived":false,"fork":false,"pushed_at":"2019-04-30T10:43:43.000Z","size":4972,"stargazers_count":615,"open_issues_count":19,"forks_count":137,"subscribers_count":25,"default_branch":"master","last_synced_at":"2024-11-08T11:45:44.488Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/lison16.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":"2017-12-28T08:54:12.000Z","updated_at":"2024-10-07T05:18:28.000Z","dependencies_parsed_at":"2022-07-15T11:18:40.543Z","dependency_job_id":null,"html_url":"https://github.com/lison16/vue-bigdata-table","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lison16%2Fvue-bigdata-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lison16%2Fvue-bigdata-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lison16%2Fvue-bigdata-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lison16%2Fvue-bigdata-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lison16","download_url":"https://codeload.github.com/lison16/vue-bigdata-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249088920,"owners_count":21210883,"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":[],"created_at":"2024-08-01T21:01:28.577Z","updated_at":"2025-04-15T14:32:05.147Z","avatar_url":"https://github.com/lison16.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-bigdata-table\n\n\u003e Powerful, table components optimized for large amounts of data, based on Vue2.0\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run dist\n```\n## Feature\n\n采用虚拟渲染方案，解决大数据量DOM渲染性能瓶颈，原理请看文章[实战Vue百万条数据渲染表格组件开发](https://juejin.im/post/5ad876a36fb9a045df1720b9?utm_source=gold_browser_extension)\n\n#### 作者系列视频课程：\n\n[Vue技术栈开发实战(26课时)](https://segmentfault.com/ls/1650000016221751?utm_source=recommend_web-live-new)\n\n[TypeScript完全解读(26课时)](https://segmentfault.com/ls/1650000018455856?utm_source=recommend_web-live-new)\n\n#### 进群和4000+前后端开发者交流学习\n\n![image](https://github.com/lison16/v-org-tree/blob/master/group.png)\n\n## API\n\n### props:\n\n属性  |  说明  |  类型  |  默认值\n:-------: | -------  |  :-------:  |  :-------:\nshowIndex  |  是否显示序列号列  |  Boolean  |  false\nvalue  |  表格数据，可以使用v-model双向绑定  |  Array  |  -\nrowHeight  |  表格行高  |  Number  |  48\nfixed  |  固定表头，设为true后表头不随表格滚动  |  Boolean  |  false\nfixedWrapperWidth  | 设为true后表格列宽总是平分容器宽度减去indexWidth后的宽度 |  Boolean  |  false\ndisabledHover  |  是否取消鼠标悬浮高亮效果  |  Boolean  |  true\ncolumns  |  表头数组，元素为单个表头的对象，{title: 'xxx', width: 该列宽度(number), render: (h) =\u003e {}, cellRender: (h, params) =\u003e {}},默认只需要title属性，render是表头渲染函数，cellRender是列单元格渲染函数  |  Array  |  -\ncolWidth  |  列宽，如果单独列中指定了宽度则按单独列，如果所有宽度加起来比容器宽度小，则平分宽度，否则用colWidth  |  Number  |  100\nheaderHeight  |  表头高度  |  Number  |  52\nhighlightRow  |  点击一行是否高亮  |  Boolean  |  false\nheaderTrStyle  |  表头tr样式  |  Object  |  {}\nindexWidth  |  序列号列宽，如果没有设置，则会根据数据行数自动计算合适的宽度  |  Number  |  -\nindexRender  |  序列号渲染render  |  Function  |  (h, index) =\u003e {return h('span', index + 1);}\nindexRenderParams  |  indexRender的第三个参数  |  Object  |  default: () =\u003e ({})\nstripe  |  是否显示斑马线  |  Boolean  |  false\natLeftCellPosi  |  指定当前鼠标在表头单元格左侧atLeftCellPosi像素处  |  Number  |  80\natRightCellPosi  |  指定当前鼠标在表头单元格右侧atRightCellPosi像素处  |  Number  |  80\nfixedCol  |  固定的列的范围，[0, fixedCol]，设为2即固定0，1，2列，这三列横向不滚动，固定后列横向不随表格滚动  |  Number  |  -1\nappendNum  |  根据表格容器高度计算内置单个表格（1/3）渲染的行数基础上额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能  |  Number  |  15\ncanEdit  |  是否可编辑  |  Boolean  |  false\nstartEditType  |  触发编辑单元格的方式，目前只支持dblclick一种，即鼠标双击单元格  |  String  |  'dblclick'\neditCellRender  |  自定义编辑单元格的render函数，如果不指定则使用默认内置的editRender，可参考components/input-render.js  |  Funciton  |  editRender\nbeforeSave  |  保存修改的单元格内容之前的钩子，如果该函数返回false，则阻止保存  |  Function  |  ({ row, col, value, initRowIndex }) =\u003e {return true}\nselectable  |  是否可选择单元格，开启后效果就像excel点击一个单元格然后拖动选择  |  Boolean  |  false\n paste |  是否可粘贴，设为true后可划选要粘贴的位置，然后ctrl+v粘贴从其他地方复制的表格数据，设为true则selectable将开启  |  Boolean  |  false\nsortable  |  是否可排序  |  Boolean  |  false\nsortIndex  |  开启排序的列序号数组或序号  |  Array, Number  |  -\ndefaultSort  |  数据默认排序方式，是一个包含一对键值对的对象，键是要按其排序的序号，值是'up'（升序）或'down'（降序）（为方便记忆，并没有使用'asc'和'desc'）  |  Object  |  -\n\n### Event:\n\n事件名  |  说明  |  返回值\n:-------: | -------  |  :-------:\non-success-save  |  编辑保存成功时触发  |  row(当前行号，指当前在表格中的行号), col(列号，序列号列列号为0), value(该单元格修改后的值), initRowIndex(初始行号，即改行数据原本在数据二维数组中的索引，不受排序等影响)\non-fail-save  |  编辑保存失败时触发  |  同on-success-save\non-click-tr  |  点击行时触发  |  index（当前行号）\non-click-td  |  点击单元格时触发  |  {row, col}，是个对象\non-moving-on-header  |  鼠标在表头移动时触发  |  鼠标事件对象，其中还添加了一些属性：colIndex(当前所在的列的索引号), atRightGivenArea(是否在当前单元格右侧atRightCellPosi指定的距离内), atLeftGivenArea(是否在当前单元格左侧atLeftCellPosi指定的距离内)\non-click-tr  |  点击行时触发  |  index（当前行号）\n\n### Methods:\n\n方法  |  说明  |  参数\n:-------: | -------  |  :-------:\nresize  |  涉及到表格容器尺寸变化或数据变化的情况需要调用此方法，如果设changeInitIndex为false，则不会重新为数据设置原始行号  |  changeInitIndex\ngetScrollLeft  |  用于获取当前横向滚动的距离  |  -\nscrollToRow  |  跳转到指定行号的一行，这里的行号是从0开始的  |  index\neditCell  |  canEdit为true时调用此方法使第row+1行第col+1列变为编辑状态，这里的行列指的是表格显示的行和除序列号列的列  |  row, col\nselectCell  |  canEdit为true时调用此方法使指定单元格被选中  |  row, col\nsetHighlightRow  |  手动设置高亮行  |  row\nfilter  |  按照某一列的指定关键词进行筛选  |  col: 要按哪一列筛选的列号, queryArr: 筛选关键字数组\ncancelFilter  |  取消筛选  |  -\nclearCurrentRow  |  清除高亮项目  |  -\ngetInitRowIndexByIndex  |  获取指定行的初始行号  |  row\ngetIndexByInitRowIndex  |  获取指定初始行号的当前行号  |  initRow\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flison16%2Fvue-bigdata-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flison16%2Fvue-bigdata-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flison16%2Fvue-bigdata-table/lists"}