{"id":13506657,"url":"https://github.com/MisterTaki/vue-table-with-tree-grid","last_synced_at":"2025-03-30T05:31:18.192Z","repository":{"id":41203183,"uuid":"103616215","full_name":"MisterTaki/vue-table-with-tree-grid","owner":"MisterTaki","description":"A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)","archived":false,"fork":false,"pushed_at":"2022-12-07T04:12:48.000Z","size":25806,"stargazers_count":880,"open_issues_count":64,"forks_count":341,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-10-29T20:58:19.198Z","etag":null,"topics":["iview","tree-grid","vue","vue-components","vue-jsx","vue-table"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/MisterTaki.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-09-15T05:08:16.000Z","updated_at":"2024-10-27T17:20:58.000Z","dependencies_parsed_at":"2023-01-24T13:16:35.196Z","dependency_job_id":null,"html_url":"https://github.com/MisterTaki/vue-table-with-tree-grid","commit_stats":null,"previous_names":["mistertaki/vue-table-with-tree-gird"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MisterTaki%2Fvue-table-with-tree-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MisterTaki%2Fvue-table-with-tree-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MisterTaki%2Fvue-table-with-tree-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MisterTaki%2Fvue-table-with-tree-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MisterTaki","download_url":"https://codeload.github.com/MisterTaki/vue-table-with-tree-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245931892,"owners_count":20695964,"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":["iview","tree-grid","vue","vue-components","vue-jsx","vue-table"],"created_at":"2024-08-01T01:00:55.105Z","updated_at":"2025-03-30T05:31:16.115Z","avatar_url":"https://github.com/MisterTaki.png","language":"JavaScript","funding_links":[],"categories":["Related Projects"],"sub_categories":[],"readme":"# vue-table-with-tree-grid\n\n\u003e A table (with tree-grid) component for Vue.js 2.0. (Its style extends [@iView](https://github.com/iview/iview))\n\n## Example\n\n![Example](./example/example.gif)\n\n## Installation\n\nUse npm:\n\n```shell\nnpm i vue-table-with-tree-grid -S\n```\n\nOr use yarn:\n\n```shell\nyarn add vue-table-with-tree-grid\n```\n\n## Usage\n\n```javascript\nimport Vue from 'vue'\nimport ZkTable from 'vue-table-with-tree-grid'\n\nVue.use(ZkTable)\n```\n\nOr\n\n```javascript\nimport Vue from 'vue'\nimport ZkTable from 'vue-table-with-tree-grid'\n\nVue.component(ZkTable.name, ZkTable)\n```\n\nmore information please see [example...](https://github.com/MisterTaki/vue-table-with-tree-gird/blob/master/example/Example.vue), or git clone this repository and open dev mode (I will give it a homepage later...).\n\n## API\n\n### Table Attributes\n\n| 属性 | 说明 | 类型 | 参数 | 默认值 |\n| ---- | ---- | ---- | ---- | ---- |\n| data | 表格各行的数据 | Array | - | [] |\n| empty-text | 表格数据为空时显示的文字 | String | - | '暂无数据' |\n| columns | 表格各列的配置（具体见下文：Columns Configs） | Array | - | [] |\n| show-header | 是否显示表头 | Boolean | - | true |\n| show-index | 是否显示数据索引 | Boolean | - | false |\n| index-text | 数据索引名称 | String | - | '序号' |\n| show-summary | 是否显示表尾合计行 | Boolean | - | false |\n| sum-text | 表尾合计行首列名称 | String | - | '合计' |\n| summary-method | 表尾合计行计算方法 | Function | data, column, columnIndex | - |\n| max-height | 最大高度 | [String, Number] | - | 'auto' |\n| stripe | 是否显示间隔斑马纹 | Boolean | - | false |\n| border | 是否显示纵向边框 | Boolean | - | false |\n| show-row-hover | 鼠标悬停时，是否高亮当前行 | Boolean | - | true |\n| tree-type | 是否为树形表格 | Boolean | - | false |\n| children-prop | 树形表格中遍历的属性名称 | String | - | 'children' |\n| is-fold | 树形表格中父级是否默认折叠 | Boolean | - | true |\n| expand-type | 是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的[作用域插槽](https://cn.vuejs.org/v2/guide/components.html#作用域插槽), 它可以获取到 row, rowIndex) | Boolean | - | false |\n| selection-type | 是否为多选类型表格 | Boolean | - | false |\n| row-key | 行数据的 Key，用来优化 Table 的渲染 | Function | row, rowIndex | rowIndex |\n| row-class-name | 额外的表格行的类名 | String, Function | row, rowIndex | - |\n| cell-class-name | 额外的表格行的类名 | String, Function | row, rowIndex, column, columnIndex | - |\n| row-style | 额外的表格行的样式 | Object, Function | row, rowIndex | - |\n| cell-style | 额外的表格单元格的样式 | Object, Function | row, rowIndex, column, columnIndex | - |\n\n### Columns Configs\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ---- | ---- | ---- | ---- |\n| label | 列标题名称 | String | '' |\n| prop | 对应列内容的属性名 | String | '' |\n| align | 对应列内容的对齐方式，可选值有 'center', 'right' | String | 'left' |\n| headerAlign | 对应列标题的对齐方式，可选值有 'center', 'right' | String | 'left' |\n| width | 列宽度 | [String, Number] | 'auto' |\n| minWidth | 列最小宽度 | [String, Number] | '80px' |\n| type | 列类型，可选值有 'template'(自定义列模板) | String | '' |\n| template | 列类型为 'template'(自定义列模板) 时，对应的[作用域插槽](https://cn.vuejs.org/v2/guide/components.html#作用域插槽)（它可以获取到 row, rowIndex, column, columnIndex）名称 | String | '' |\n\n### Table Events\n\n| 事件名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| cell-click | 单击某一单元格 | row, rowIndex, column, columnIndex, $event |\n| cell-dblclick | 双击某一单元格 | row, rowIndex, column, columnIndex, $event  |\n| cell-contextmenu | 在某一单元格上点击鼠标右键 | row, rowIndex, column, columnIndex, $event  |\n| cell-mouseenter | 鼠标滑入某一单元格 | row, rowIndex, column, columnIndex, $event  |\n| cell-mouseleave | 鼠标滑出某一单元格 | row, rowIndex, column, columnIndex, $event  |\n| row-click | 单击某一行 | row, rowIndex, $event |\n| row-dblclick | 双击某一行 | row, rowIndex, $event |\n| row-contextmenu | 在某一行上点击鼠标右键 | row, rowIndex, $event |\n| row-mouseenter | 鼠标滑入某一行 | row, rowIndex, $event |\n| row-mouseleave | 鼠标滑出某一行 | row, rowIndex, $event |\n| checkbox-click | 鼠标单击checkbox | row, rowIndex, $event |\n| tree-icon-click | 鼠标单击树形icon | row, rowIndex, $event |\n| expand-cell-click | 鼠标单击展开单元格 | row, rowIndex, $event |\n\n### Table Methods\n\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| getCheckedProp | 当表格为多选类型表格时，用于获取当前所选项的属性，返回一个数组；属性默认为'index'。 | prop |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMisterTaki%2Fvue-table-with-tree-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMisterTaki%2Fvue-table-with-tree-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMisterTaki%2Fvue-table-with-tree-grid/lists"}