{"id":26235968,"url":"https://github.com/helti/vue-jsx-table","last_synced_at":"2025-06-13T01:32:35.041Z","repository":{"id":45189056,"uuid":"398700476","full_name":"HelTi/vue-jsx-table","owner":"HelTi","description":"基于element-ui二次封装的表格","archived":false,"fork":false,"pushed_at":"2021-11-22T14:42:20.000Z","size":2117,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-24T21:47:36.731Z","etag":null,"topics":["element-table","element-ui","jsx","table","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/HelTi.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":"2021-08-22T02:54:49.000Z","updated_at":"2025-04-17T10:56:57.000Z","dependencies_parsed_at":"2022-07-19T05:03:52.222Z","dependency_job_id":null,"html_url":"https://github.com/HelTi/vue-jsx-table","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HelTi/vue-jsx-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fvue-jsx-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fvue-jsx-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fvue-jsx-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fvue-jsx-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HelTi","download_url":"https://codeload.github.com/HelTi/vue-jsx-table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelTi%2Fvue-jsx-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259561828,"owners_count":22876889,"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":["element-table","element-ui","jsx","table","vue"],"created_at":"2025-03-13T03:19:08.980Z","updated_at":"2025-06-13T01:32:35.015Z","avatar_url":"https://github.com/HelTi.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 文档\n[文档示例](https://helti.github.io/vue-jsx-table/)\n\n此组件基于element-table二次开发，以实际业务出发，封装了常用的功能，通过配置的方式生成表格，\n并且实现**多级表头** **expand展开项** **自定义表头**功能等\n\n[![hpyJmt.png](https://z3.ax1x.com/2021/08/22/hpyJmt.png)](https://imgtu.com/i/hpyJmt)\n\n\n## 使用\n使用之前需要项目中引入element-ui\n\n```js\nnpm i vue-jsx-table\n\nimport 'vue-jsx-table/dist/vue-jsx-table.css'\nimport vueJsxTable from 'vue-jsx-table'\n\nVue.use(vueJsxTable)\n```\n\n### cdn方式\n\n```js\n  \u003c!-- 引入样式 --\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css\"\n    /\u003e\n    \u003c!-- 引入组件库 --\u003e\n    \u003cscript src=\"https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js\"\u003e\u003c/script\u003e\n```\n## 普通表格\n对于表格配置columns、tableData选项是必须的。\n\n```js\n\u003cvue-jsx-table\n        :columns=\"columns\"\n        :tableData=\"tableData\"\n        border\n        @selection-change=\"selectionChange\"\n        :total=\"100\"\n      \u003e\n \u003c/vue-jsx-table\u003e\n  data() {\n    return {\n      columns: [\n        {\n          type: 'selection',\n          fixed: 'left',\n          selectable: this.rowSelectableHandle,\n        },\n        {\n          label: '年龄',\n          prop: 'age',\n          width: 300,\n          sortable: true,\n        },\n    \n        {\n          label: '学校',\n          prop: 'school',\n          width: 200,\n        },\n        {\n          label: '学费',\n          prop: 'fee',\n          width: 200,\n        },\n\n        {\n          label: '编辑',\n          prop: 'edit',\n          slot: 'edit',\n          fixed: 'right',\n          width: 200,\n        },\n      ],\n      tableData:[]\n    };\n  },\n\n```\n\n## 多级表头\n\n给 column 设置 children，可以渲染出分组表头。\n\n```js\n   {\n          label: '多级表头',\n          children: [\n            {\n              label: '年级',\n              prop: 'grade',\n              width: 120,\n            },\n            {\n              label: '班级',\n              prop: 'class',\n            },\n          ],\n        },\n```\n\n## 自定义渲染内容 render\n\n给column设置render选项，Funtion(row, column, $index)\n\n```js\n     {\n          label: 'render',\n          prop: 'render',\n          width: 200,\n          render: (row, column, $index) =\u003e {\n            return (\n              \u003cdiv onClick={() =\u003e this.cellClick(row, column, $index)}\u003e\n                测试render\n              \u003c/div\u003e\n            );\n          },\n        },\n```\n\n## 设置展开项\n\n只需要对column配置项设置type:expand，展开的内容可以使用插槽slot，也可以使用render，如果同时配置slot,render,则slot会被忽略。\n\n```js\n{\n          type: 'expand',\n          slot: 'expand',\n        },\n```\n\n## 自定义插槽\n\n只需要对 column配置项设置 solt:''，slot为插槽的名字\n\n```js\n  {\n          label: '编辑',\n          prop: 'edit',\n          slot: 'edit',\n          fixed: 'right',\n          width: 200,\n        },\n```\n\n## 自定义表头\n\n只需要对 column配置项设置 renderHeader，~~renderHeader为element-ui的原生配置~~ （官方不推荐使用column上的render-header函数，推荐使用插槽 ！！，控制台会有提示，，囧），你也可以使通过配置slotHeader项使用插槽，**注意插槽名称不能重复，定义了插槽配置已定义在模板中声明**\n\n### renderHeader\n\n```js\n   {\n          label: '自定义表头',\n          prop: 'name',\n          width: 120,\n          sortable: true,\n          renderHeader: (column, scope) =\u003e {\n            console.log('scope', scope);\n            return \u003cspan class=\"cell-header-red-star\"\u003e{column.label}\u003c/span\u003e;\n          },\n        },\n```\n\n### 表头插槽 slotHeader\n\n```js\n       {\n          label: '姓名',\n          prop: 'name',\n          slotHeader: 'slotHeader',\n        },\n\n         \u003c!-- 插槽表头 --\u003e\n        \u003ctemplate v-slot:slotHeader=\"{ column }\"\u003e\n          \u003c!-- {{ scope.column.label }} --\u003e\n          \u003cspan\u003e插槽表头： {{ column.label }}\u003c/span\u003e\n        \u003c/template\u003e\n```\n\n## 分页控件pageSize 改变、currentPage 改变，都会触发page-change，Function({currentPage,pageSize})\n\n```js\n  \u003cvue-jsx-table\n        @page-change=\"pageChangeHandle\"\n        :currentPage.sync=\"paginationParams.pageNo\"\n        :total=\"100\"\n      \u003e\n  \u003c/vue-jsx-table\u003e    \npageChangeHandle(val) {\n      this.paginationParams.pageNo = val.currentPage;\n      this.paginationParams.pageSize = val.pageSize;\n    },\n```\n\n## 表格列内容为组件\n\n通过solt插槽，也可以使用render函数来渲染组件\n\n```js\n  \u003ctemplate v-slot:edit=\"{ row }\"\u003e\n          \u003cel-input v-model=\"row.name\"\u003e\u003c/el-input\u003e\n        \u003c/template\u003e\n\n```\n\n### Table Attributes\n\n所有的Table Attributes通过v-bind=\"$attrs\"实现，额外增加的Table Attributes：\n\n|  参数   | 说明  |  类型 | 默认值 |\n|  ----  | ----  | ----  | ----  |\n| columns  | 表格的列 |  Array |  [] |\n| columnsKeyName  | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件(Table-column Attributes的column-key) |  string |  - |  \n| align  | 对齐方式|  String |  left |\n| showPagination  | 是否展示分页控件 |  Boolean |  true |\n| currentPage  | 当前分页控件的当前页 |  Number |  1 |\n| pageSizes  | 分页控件的pageSizes |  Array |  [10, 20, 30, 50] |\n| pageSize  | 分页控件的pageSize|  Array |  [] |\n| layout  | 分页控件的layout  |  String | 'sizes, prev, pager, next,total' |\n| total  | 分页控件的total |  Number |  0 |\n| paginationStyle  | 分页控件的样式style |  Object |  - |\n| showOverflowTooltip  | 当内容过长被隐藏时显示 tooltip，如果column没单独配置showOverflowTooltip，则使用该属性，默认为true |  Boolean |  true |\n| showTableSetting  | 展示表格设置 |  Boolean |  false |\n| hideColumns  | 需要隐藏的列，label名称，有些场景需要根据部分条件展示隐藏列 |  Array |  [] |\n| customClass  | 自定义样式class |  Array |  ['vue-jsx-table-wrapper'] |\n\n### Table Events\n\n所有的 Table Events 通过v-on=\"$listeners\"实现，额外增加的 Table Events：\n\n|  参数   | 说明  |  类型 | 默认值 |  \n|  ----  | ----  | ----  | ----  |\n| size-change  | page-change，current-change改变都会触发此事件，为了方便分页改变而增加   |  Function |  'function({pageSize: 10,currentPage: 1,}) {}'|\n| size-change  | pageSize 改变时会触发 |  - |  - |\n| current-change  | currentPage 改变时会触发 |  - |  - |\n\n### 配置列 columns\n\n|  参数   | 说明  |  类型 | 默认值 |\n|  ----  | ----  | ----  | ----  |\n| prop  | 对应列内容的字段名|  string |  - |\n| slot  | 列的插槽名字(注意如果嵌套表格，slot名称不能有重复的，插槽作用域（{ row, $index }）) |  string |  - |\n| label  | 显示的标题 |  string |  - |\n| width  | 对应列的宽度 |  Number |  - |\n| showOverflowTooltip  | 当内容过长被隐藏时显示 tooltip |  Boolean |  - |\n| fixed  | 列是否固定在左侧或者右侧（true, left, right），true 表示固定在左侧 |  string, boolean |  - |\n| render  | jsx渲染函数 |  function | render(row, column, $index) |\n| type  | selection/index/expand |  string |  - |\n| renderHeader  | 表头，列标题 Label 区域渲染使用的 Function|  Function(column, scope })，column为配置项，scope为原生组件的scope 。（该属性不是原生参数）|  - |\n| cellredstar  | 表头文字前是否打红星标志 |  Boolean |  false |\n| sortable  | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 |  boolean, string （true, false, 'custom'） |  false |\n| formatter  | 用来格式化内容（element-ui原有属性）|  Function(row, column, cellValue, index) |  - |\n| selectable  | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选|  Function(row, index) |  - |\n| showHeaderTooltip  | 鼠标移到表头是否展示文案提示信息|  Boolean |  - |\n| headerTooltipText  | 表头展示文案信息内容|  String |  - |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelti%2Fvue-jsx-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelti%2Fvue-jsx-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelti%2Fvue-jsx-table/lists"}