{"id":23387362,"url":"https://github.com/chikara-chan/el-table-plus","last_synced_at":"2025-04-11T05:09:23.615Z","repository":{"id":57221257,"uuid":"95088488","full_name":"chikara-chan/el-table-plus","owner":"chikara-chan","description":"🛴 A high-level table component, integrating el-table and el-pagination of Element UI.","archived":false,"fork":false,"pushed_at":"2018-04-05T06:47:00.000Z","size":42,"stargazers_count":33,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T05:09:18.574Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chikara-chan.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}},"created_at":"2017-06-22T07:42:25.000Z","updated_at":"2021-01-30T08:30:51.000Z","dependencies_parsed_at":"2022-08-29T01:51:03.733Z","dependency_job_id":null,"html_url":"https://github.com/chikara-chan/el-table-plus","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chikara-chan%2Fel-table-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chikara-chan%2Fel-table-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chikara-chan%2Fel-table-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chikara-chan%2Fel-table-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chikara-chan","download_url":"https://codeload.github.com/chikara-chan/el-table-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345266,"owners_count":21088244,"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-12-22T01:15:46.198Z","updated_at":"2025-04-11T05:09:23.588Z","avatar_url":"https://github.com/chikara-chan.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eEl Table Plus\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/chikara-chan/el-table-plus\"\u003e\u003cimg alt=\"Travis Status\" src=\"https://img.shields.io/travis/chikara-chan/el-table-plus/master.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/el-table-plus\"\u003e\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/v/el-table-plus.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/chikara-chan/el-table-plus/blob/master/LICENSE\"\u003e\u003cimg alt=\"LICENSE\" src=\"https://img.shields.io/npm/l/el-table-plus.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Introduction\n\nA high-level table component, integrating el-table and el-pagination of Element UI.\n\n## Feature\n\n- Configure columns in script.\n- Render custom head and body.\n- Manage data source innerly.\n- Control pagination easily.\n\n## Quick Start\n\n``` bash\n$ npm install --save el-table-plus\n```\n\n``` js\nimport ElTablePlus from 'el-table-plus';\nimport 'el-table-plus/lib/index.css';\n\nVue.use(ElTablePlus);\n```\n\n## Online Example\n\n[codesandbox](https://codesandbox.io/s/71wpwx701q)\n\n## Example\n\n**html**\n\n``` html\n\u003cdiv\u003e\n  \u003cel-form :model=\"form\" ref=\"form\" inline\u003e\n    \u003cel-form-item\u003e\n      \u003cel-input v-model=\"form.search\" placeholder=\"请输入\"\u003e\u003c/el-input\u003e\n    \u003c/el-form-item\u003e\n    \u003cel-form-item\u003e\n      \u003cel-button type=\"primary\" @click=\"submit\"\u003e查询\u003c/el-button\u003e\n    \u003c/el-form-item\u003e\n  \u003c/el-form\u003e\n  \u003cel-table-plus ref=\"table\" @sort-change=\"sortChange\" @filter-change=\"filterChange\"\n    @selection-change=\"selectionChange\" :current-change-async=\"currentChangeAsync\"\n    :columns=\"tableColumns\" :page-size=\"10\"\u003e\n    \u003ctemplate slot=\"caption\"\u003e成员列表\u003c/template\u003e\n    \u003ctemplate slot=\"actionBar\"\u003e\n      \u003cel-button @click=\"create\" type=\"primary\"\u003e创建成员\u003c/el-button\u003e \n    \u003c/template\u003e\n  \u003c/el-table-plus\u003e\n\u003c/div\u003e\n```\n\n**js**\n\n``` js\n  const mockAjax = ({ pageNum, pageSize, search }) =\u003e Promise.resolve({\n    data: Array.apply(null, { length: pageSize }).map((item, index) =\u003e\n      ({\n        id: (pageNum - 1) * pageSize + index,\n        name: search || '张三',\n        type: index % 2 ? '有效' : '无效',\n        gender: index % 2\n      })\n    ),\n    total: 100\n  });\n\n  export default {\n    data() {\n      return {\n        form: {\n          search: ''\n        },\n        tableColumns: [\n          {\n            type: 'selection'\n          },\n          {\n            type: 'expand',\n            renderBody(h) { // eslint-disable-line\n              return (\n                \u003cspan\u003e厉害了，我滴哥！\u003c/span\u003e\n              );\n            }\n          },\n          {\n            label: '普通列',\n            prop: 'id'\n          },\n          {\n            label: '排序列',\n            prop: 'name',\n            sortable: 'custom'\n          },\n          {\n            label: '过滤列',\n            prop: 'type',\n            filters: [{ text: '有效', value: 1 }, { text: '无效', value: 0 }],\n            columnKey: 'type'\n          },\n          {\n            label: '格式化列',\n            prop: 'gender',\n            formatter(gender) {\n              return {\n                1: '男',\n                0: '女'\n              }[gender];\n            }\n          },\n          {\n            renderHeader(h) { // eslint-disable-line\n              return (\n                \u003cspan\u003e自定义列\u003c/span\u003e\n              );\n            },\n            renderBody: (h, { id }) =\u003e [\n              \u003cel-button type=\"text\" onClick={() =\u003e this.getDetail(id)}\u003e详情\u003c/el-button\u003e\n            ]\n          }\n        ]\n      };\n    },\n    methods: {\n      filterChange(filters) {\n        console.log(filters);\n      },\n      sortChange({column, prop, order}) {\n        console.log(column, prop, order);\n      },\n      selectionChange(selections) {\n        console.log(selections);\n      },\n      getDetail(id) {\n        console.log(id);\n      },\n      create() {\n        console.log('create');\n      },\n      submit() {\n        this.$refs.form.validate(async valid =\u003e {\n          if (!valid) {\n            return;\n          }\n          this.$refs.table.reload();\n        });\n      },\n      async currentChangeAsync(currentPage, pageSize) {\n        const { data, total } = await mockAjax({\n          ...this.form,\n          pageNum: currentPage,\n          pageSize: pageSize\n        });\n\n        return {\n          data,\n          total\n        };\n      }\n    },\n    mounted() {\n      this.submit();\n    }\n  };\n```\n\n## API\n\n### Attributes\n\nAs same as Element UI [Table Attributes](http://element.eleme.io/#/en-US/component/table). Besides, add these attributes:\n\nParam | Type | Default | Description\n--- | --- | --- | ---\ncolumns | object[] | [] | See Table Attributes - column below.\npage-size | number | 20 |\ncurrent-change-async | async function(currentPage, pageSize) | | Triger when page changes，require returning value `{ data: object[], total: number }`.\npagination-align | String | 'center' | One of `'left'`, `'right'` and `'center'`.\n\n#### Attributes - column\n\nAs same as Element UI [Table-column Attributes](http://element.eleme.io/#/en-US/component/table). Besides, add these attributes:\n\nParam | Type | Default | Description\n--- | --- | --- | ---\nrenderBody | function(h, row) | | Render custom body or expand body.\n\n### Events\n\nAs same as Element UI [Table Events](http://element.eleme.io/#/en-US/component/table).\n\n### Methods\n\nMethod | Param | Description\n--- | --- | ---\nreload | | Call `current-change-async` event, and reload in first page.\nreloadCurrent | | Call `current-change-async` event, and reload in current page.\n\n### Slots\n\nAs same as Element UI [Table-column Slots](http://element.eleme.io/#/en-US/component/table). Besides, add these slots:\n\nName | Description\n--- | ---\ncaption | The caption of table.\nactionBar | The action bar of table.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchikara-chan%2Fel-table-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchikara-chan%2Fel-table-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchikara-chan%2Fel-table-plus/lists"}