{"id":13601456,"url":"https://github.com/yujinpan/el-table-infinite-scroll","last_synced_at":"2025-04-11T04:31:02.117Z","repository":{"id":50307062,"uuid":"212125385","full_name":"yujinpan/el-table-infinite-scroll","owner":"yujinpan","description":"Infinite scroll for el-table.","archived":false,"fork":false,"pushed_at":"2024-07-12T06:49:31.000Z","size":4235,"stargazers_count":187,"open_issues_count":14,"forks_count":41,"subscribers_count":4,"default_branch":"v3","last_synced_at":"2024-10-02T06:29:28.349Z","etag":null,"topics":["el-table","element-ui","infinite-scroll","table-infinite-scroll"],"latest_commit_sha":null,"homepage":"https://yujinpan.github.io/el-table-infinite-scroll/","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/yujinpan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"docs/support.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-01T15:01:11.000Z","updated_at":"2024-09-27T09:21:36.000Z","dependencies_parsed_at":"2024-01-16T23:26:47.734Z","dependency_job_id":"8631e49b-e9c7-4529-a892-a805e33ba8db","html_url":"https://github.com/yujinpan/el-table-infinite-scroll","commit_stats":{"total_commits":104,"total_committers":2,"mean_commits":52.0,"dds":"0.038461538461538436","last_synced_commit":"42d3724f8df1e705495b7aff8c311aa97ab28062"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinpan%2Fel-table-infinite-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinpan%2Fel-table-infinite-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinpan%2Fel-table-infinite-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujinpan%2Fel-table-infinite-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yujinpan","download_url":"https://codeload.github.com/yujinpan/el-table-infinite-scroll/tar.gz/refs/heads/v3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223458332,"owners_count":17148451,"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":["el-table","element-ui","infinite-scroll","table-infinite-scroll"],"created_at":"2024-08-01T18:01:03.013Z","updated_at":"2024-11-07T04:30:53.889Z","avatar_url":"https://github.com/yujinpan.png","language":"JavaScript","funding_links":[],"categories":["TypeScript","Components \u0026 Libraries"],"sub_categories":["Blog Posts"],"readme":"# el-table-infinite-scroll\n\nInfinite scroll for el-table.\n\n\u003e This directive only does event forwarding,\n\u003e which is equivalent to replacing the target DOM\n\u003e of `ElInfiniteScroll` with the scroll layer of `ElTable`.\n\n## Documentation\n\n[https://yujinpan.github.io/el-table-infinite-scroll](https://yujinpan.github.io/el-table-infinite-scroll)\n\n## vue3 + element-plus\n\n### Install\n\n** Version \u003e= 3 **\n\n```sh\nnpm install --save el-table-infinite-scroll@3\n```\n\n### Usage\n\n#### Global register\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./src/App.vue\";\n\nimport ElTableInfiniteScroll from \"el-table-infinite-scroll\";\n\nconst app = createApp(App);\n\napp.use(ElTableInfiniteScroll);\napp.mount(\"#app\");\n```\n\n#### Component register\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-table v-el-table-infinite-scroll=\"load\"\u003e\u003c/el-table\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { default as vElTableInfiniteScroll } from \"el-table-infinite-scroll\";\n\u003c/script\u003e\n```\n\n### Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-table\n    v-el-table-infinite-scroll=\"load\"\n    :data=\"data\"\n    :infinite-scroll-disabled=\"disabled\"\n    height=\"200px\"\n  \u003e\n    \u003cel-table-column type=\"index\" /\u003e\n    \u003cel-table-column prop=\"date\" label=\"date\" /\u003e\n    \u003cel-table-column prop=\"name\" label=\"name\" /\u003e\n    \u003cel-table-column prop=\"age\" label=\"age\" /\u003e\n  \u003c/el-table\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from \"vue\";\n\nconst dataTemplate = new Array(10).fill({\n  date: \"2009-01-01\",\n  name: \"Tom\",\n  age: \"30\",\n});\n\nconst data = ref([]);\nconst disabled = ref(false);\nconst page = ref(0);\nconst total = ref(5);\n\nconst load = () =\u003e {\n  if (disabled.value) return;\n\n  page.value++;\n  if (page.value \u003c= total.value) {\n    data.value = data.value.concat(dataTemplate);\n  }\n\n  if (page.value === total.value) {\n    disabled.value = true;\n  }\n};\n\u003c/script\u003e\n```\n\n### Options\n\nSupported [element-plus/infinite-scroll](https://element-plus.org/zh-CN/component/infinite-scroll.html#指令) all options.\n\n## vue2 + element-ui\n\n### Install\n\n** Version ^ 2 **\n\n```sh\nnpm install --save el-table-infinite-scroll@2\n```\n\n### Usage\n\n#### Global register\n\n```js\nimport Vue from \"vue\";\n\nimport ElTableInfiniteScroll from \"el-table-infinite-scroll\";\n\nVue.directive(\"el-table-infinite-scroll\", ElTableInfiniteScroll);\n```\n\n#### Component register\n\n```vue\n\u003cscript\u003e\nimport ElTableInfiniteScroll from \"el-table-infinite-scroll\";\n\nexport default {\n  directives: {\n    \"el-table-infinite-scroll\": ElTableInfiniteScroll,\n  },\n};\n\u003c/script\u003e\n```\n\n### Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-table\n    v-el-table-infinite-scroll=\"load\"\n    :data=\"data\"\n    :infinite-scroll-disabled=\"disabled\"\n    height=\"200px\"\n  \u003e\n    \u003cel-table-column type=\"index\" /\u003e\n    \u003cel-table-column prop=\"date\" label=\"date\" /\u003e\n    \u003cel-table-column prop=\"name\" label=\"name\" /\u003e\n    \u003cel-table-column prop=\"age\" label=\"age\" /\u003e\n  \u003c/el-table\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nconst dataTemplate = new Array(10).fill({\n  date: \"2009-01-01\",\n  name: \"Tom\",\n  age: \"30\",\n});\n\nexport default {\n  data() {\n    return {\n      data: [],\n      page: 0,\n      total: 5,\n    };\n  },\n  methods: {\n    load() {\n      if (this.disabled) return;\n\n      this.page++;\n      if (this.page \u003c= this.total) {\n        this.data = this.data.concat(dataTemplate);\n      }\n\n      if (this.page === this.total) {\n        this.disabled = true;\n      }\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n### Options\n\nSupported [element-ui/infinite-scroll](https://element.eleme.cn/#/zh-CN/component/infiniteScroll#attributes) all options.\n\n## Contribution\n\nThanks to [JetBrains](https://www.jetbrains.com/?from=el-table-infinite-scroll) for supporting my free open source license.\n\n![JetBrains](./jetbrains.svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyujinpan%2Fel-table-infinite-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyujinpan%2Fel-table-infinite-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyujinpan%2Fel-table-infinite-scroll/lists"}