{"_id":"@elias_zeng/el-data-table","_rev":"3-bbdcd02afe0788d47d6a09e5b58de18c","name":"@elias_zeng/el-data-table","dist-tags":{"latest":"1.14.0"},"versions":{"1.9.0":{"name":"@elias_zeng/el-data-table","version":"1.9.0","description":"base on element-ui, makes crud easily","author":{"name":"https://github.com/FEMessage"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/FEMessage/el-data-table.git"},"keywords":["vue","element-ui","table","data-table","element table"],"main":"dist/el-data-table.umd.js","module":"dist/el-data-table.esm.js","unpkg":"dist/el-data-table.min.js","browser":{"./sfc":"src/el-data-table.vue"},"types":"src/el-data-table.d.ts","scripts":{"build-prepublish-publish":"npm run build:es && npm run prepublish && npm publish","prepublish":"node update-package-json.js","test":"jest --verbose","dev":"vue-styleguidist server","doc":"vue-styleguidist build","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/el-data-table.umd.js","build:es":"rollup --config build/rollup.config.js --format es --file dist/el-data-table.esm.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/el-data-table.min.js","stdver":"standard-version -m '[skip ci] chore(release): v%s'","lint":"eslint \"**/*.@(js|vue)\" --fix","release":"gren release --override"},"dependencies":{"lodash.get":"^4.4.2","lodash.isempty":"^4.4.0","lodash.kebabcase":"^4.1.1","lodash.values":"^4.3.0"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@femessage/el-form-renderer":"^1.6.0","@femessage/github-release-notes":"^0.19.0","@femessage/types":"^1.0.3","axios":"^0.19.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","element-ui":"2.4.11","eslint":"^6.6.0","eslint-config-prettier":"^6.5.0","eslint-plugin-jest":"^23.0.2","eslint-plugin-prettier":"^3.1.1","eslint-plugin-vue":"^6.0.0","file-loader":"^3.0.1","glob":"^7.1.3","husky":"1.3.1","jest":"^24.8.0","less":"^3.9.0","less-loader":"^5.0.0","lint-staged":"^8.1.0","minimist":"^1.2.0","prettier":"1.18.2","rollup":"^1.9.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-terser":"^4.0.4","rollup-plugin-vue":"^4.7.2","standard-version":"^6.0.1","stylelint":"^9.10.0","stylelint-config-standard":"^18.2.0","vue":"^2.6.10","vue-loader":"^15.7.1","vue-styleguidist":"^3.16.3","vue-template-compiler":"^2.5.16","webpack":"^4.29.6"},"publishConfig":{"access":"public"},"vue-sfc-cli":"1.11.4","engines":{"node":">= 8.3.0","npm":">= 3.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged","post-commit":"git update-index --again","pre-push":"yarn test"}},"lint-staged":{"*.@(md|json)":["prettier --write","git add"],"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"]},"gren":"@femessage/grenrc","_id":"@elias_zeng/el-data-table@1.9.0","gitHead":"55e88ab9093cf25098445eb445e76a8e1f6aae22","bugs":{"url":"https://github.com/FEMessage/el-data-table/issues"},"homepage":"https://github.com/FEMessage/el-data-table#readme","_nodeVersion":"16.15.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-LA9qki5dogbSMXgsJsZ9kq1Kvdfg1dct2/uEMFOHG36jIyckP/cy8s1/yHWZ5X8C0lI80XYOEDPY0le56yn0/g==","shasum":"d687926b3f79d6e90dca5c2b7927e9df39740ecf","tarball":"https://registry.npmjs.org/@elias_zeng/el-data-table/-/el-data-table-1.9.0.tgz","fileCount":16,"unpackedSize":84258,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm0mPgDNeZ3J/0PE1NPlZAb7B44Ex3HGy9yZO9zmxHGwIhAIWfLmKvYeulN7umvF9vR2VRAoGbAKJA6UGZSXLM7lqi"}]},"_npmUser":{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"},"directories":{},"maintainers":[{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/el-data-table_1.9.0_1703835396156_0.7895315884131628"},"_hasShrinkwrap":false},"1.10.0":{"name":"@elias_zeng/el-data-table","version":"1.10.0","description":"base on element-ui, makes crud easily","author":{"name":"https://github.com/FEMessage"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/FEMessage/el-data-table.git"},"keywords":["vue","element-ui","table","data-table","element table"],"main":"dist/el-data-table.umd.js","module":"dist/el-data-table.esm.js","unpkg":"dist/el-data-table.min.js","browser":{"./sfc":"src/el-data-table.vue"},"types":"src/el-data-table.d.ts","scripts":{"build-prepublish-publish":"npm run build:es && npm run prepublish && npm publish","prepublish":"node update-package-json.js","test":"jest --verbose","dev":"vue-styleguidist server","doc":"vue-styleguidist build","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/el-data-table.umd.js","build:es":"rollup --config build/rollup.config.js --format es --file dist/el-data-table.esm.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/el-data-table.min.js","stdver":"standard-version -m '[skip ci] chore(release): v%s'","lint":"eslint \"**/*.@(js|vue)\" --fix","release":"gren release --override"},"dependencies":{"@femessage/el-data-table":"^1.23.2","lodash.get":"^4.4.2","lodash.isempty":"^4.4.0","lodash.kebabcase":"^4.1.1","lodash.values":"^4.3.0"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@femessage/el-form-renderer":"^1.6.0","@femessage/github-release-notes":"^0.19.0","@femessage/types":"^1.0.3","axios":"^0.19.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","element-ui":"2.4.11","eslint":"^6.6.0","eslint-config-prettier":"^6.5.0","eslint-plugin-jest":"^23.0.2","eslint-plugin-prettier":"^3.1.1","eslint-plugin-vue":"^6.0.0","file-loader":"^3.0.1","glob":"^7.1.3","husky":"1.3.1","jest":"^24.8.0","less":"^3.9.0","less-loader":"^5.0.0","lint-staged":"^8.1.0","minimist":"^1.2.0","prettier":"1.18.2","rollup":"^1.9.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-terser":"^4.0.4","rollup-plugin-vue":"^4.7.2","standard-version":"^6.0.1","stylelint":"^9.10.0","stylelint-config-standard":"^18.2.0","vue":"^2.6.10","vue-loader":"^15.7.1","vue-styleguidist":"^3.16.3","vue-template-compiler":"^2.5.16","webpack":"^4.29.6"},"publishConfig":{"access":"public"},"vue-sfc-cli":"1.11.4","engines":{"node":">= 8.3.0","npm":">= 3.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged","post-commit":"git update-index --again","pre-push":"yarn test"}},"lint-staged":{"*.@(md|json)":["prettier --write","git add"],"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"]},"gren":"@femessage/grenrc","_id":"@elias_zeng/el-data-table@1.10.0","gitHead":"55e88ab9093cf25098445eb445e76a8e1f6aae22","bugs":{"url":"https://github.com/FEMessage/el-data-table/issues"},"homepage":"https://github.com/FEMessage/el-data-table#readme","_nodeVersion":"16.15.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-HqkCfpnZlroqSXrzNqPs9HRlnwnrBPlXW+NyApGa53OqEmxTPthauf9AjNC7uqKJLsByKyx6GkwX64d0WLaL6A==","shasum":"308cbd1a915fbefde6bd6c7a49ba00d1abccfb53","tarball":"https://registry.npmjs.org/@elias_zeng/el-data-table/-/el-data-table-1.10.0.tgz","fileCount":16,"unpackedSize":84180,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhtzWdCUo3AketwbJkChWymEootn55/8/vjUQo5tQwHAiAGuXBZ/PHr0P5/FnWyXRlZ/IoRYad6RfgHNoVGSFHszg=="}]},"_npmUser":{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"},"directories":{},"maintainers":[{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/el-data-table_1.10.0_1703843690405_0.03771495548971404"},"_hasShrinkwrap":false},"1.12.0":{"name":"@elias_zeng/el-data-table","version":"1.12.0","description":"base on element-ui, makes crud easily","author":{"name":"https://github.com/FEMessage"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/FEMessage/el-data-table.git"},"keywords":["vue","element-ui","table","data-table","element table"],"main":"dist/el-data-table.umd.js","module":"dist/el-data-table.esm.js","unpkg":"dist/el-data-table.min.js","browser":{"./sfc":"src/el-data-table.vue"},"types":"src/el-data-table.d.ts","scripts":{"build-prepublish-publish":"npm run build:es && npm run prepublish && npm publish","prepublish":"node update-package-json.js","test":"jest --verbose","dev":"vue-styleguidist server","doc":"vue-styleguidist build","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/el-data-table.umd.js","build:es":"rollup --config build/rollup.config.js --format es --file dist/el-data-table.esm.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/el-data-table.min.js","stdver":"standard-version -m '[skip ci] chore(release): v%s'","lint":"eslint \"**/*.@(js|vue)\" --fix","release":"gren release --override"},"dependencies":{"@femessage/el-data-table":"^1.23.2","lodash.get":"^4.4.2","lodash.isempty":"^4.4.0","lodash.kebabcase":"^4.1.1","lodash.values":"^4.3.0"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@femessage/el-form-renderer":"^1.6.0","@femessage/github-release-notes":"^0.19.0","@femessage/types":"^1.0.3","axios":"^0.19.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","element-ui":"2.4.11","eslint":"^6.6.0","eslint-config-prettier":"^6.5.0","eslint-plugin-jest":"^23.0.2","eslint-plugin-prettier":"^3.1.1","eslint-plugin-vue":"^6.0.0","file-loader":"^3.0.1","glob":"^7.1.3","husky":"1.3.1","jest":"^24.8.0","less":"^3.9.0","less-loader":"^5.0.0","lint-staged":"^8.1.0","minimist":"^1.2.0","prettier":"1.18.2","rollup":"^1.9.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-terser":"^4.0.4","rollup-plugin-vue":"^4.7.2","standard-version":"^6.0.1","stylelint":"^9.10.0","stylelint-config-standard":"^18.2.0","vue":"^2.6.10","vue-loader":"^15.7.1","vue-styleguidist":"^3.16.3","vue-template-compiler":"^2.5.16","webpack":"^4.29.6"},"publishConfig":{"access":"public"},"vue-sfc-cli":"1.11.4","engines":{"node":">= 8.3.0","npm":">= 3.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged","post-commit":"git update-index --again","pre-push":"yarn test"}},"lint-staged":{"*.@(md|json)":["prettier --write","git add"],"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"]},"gren":"@femessage/grenrc","gitHead":"55e88ab9093cf25098445eb445e76a8e1f6aae22","bugs":{"url":"https://github.com/FEMessage/el-data-table/issues"},"homepage":"https://github.com/FEMessage/el-data-table#readme","_id":"@elias_zeng/el-data-table@1.12.0","_nodeVersion":"16.15.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Ej4EEXbcCC9jwkScQKZRAC3DKT/4NucuaqUDygwguAqfKMvJKivKL1ai3fUvVOzVqXwVl8RnlGhA2MzZy9EckA==","shasum":"c2a916c0275722c85d04621dab1d8c0c0223ba2d","tarball":"https://registry.npmjs.org/@elias_zeng/el-data-table/-/el-data-table-1.12.0.tgz","fileCount":17,"unpackedSize":183402,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+k+/OZi+QQdLZ4KXRzQMF81KaM+3Rhop2N+1Pa+VgvAiEAzfVG9RAGJpU2FR1/lHTARmtk4oPGhopp/Dn5TSMIILE="}]},"_npmUser":{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"},"directories":{},"maintainers":[{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/el-data-table_1.12.0_1703844561353_0.08257350797248852"},"_hasShrinkwrap":false},"1.14.0":{"name":"@elias_zeng/el-data-table","version":"1.14.0","description":"base on element-ui, makes crud easily","author":{"name":"https://github.com/FEMessage"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/FEMessage/el-data-table.git"},"keywords":["vue","element-ui","table","data-table","element table"],"main":"dist/el-data-table.umd.js","module":"dist/el-data-table.esm.js","unpkg":"dist/el-data-table.min.js","browser":{"./sfc":"src/el-data-table.vue"},"types":"src/el-data-table.d.ts","scripts":{"build-prepublish-publish":"npm run build:es && npm run prepublish && npm publish","prepublish":"node update-package-json.js","test":"jest --verbose","dev":"vue-styleguidist server","doc":"vue-styleguidist build","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/el-data-table.umd.js","build:es":"rollup --config build/rollup.config.js --format es --file dist/el-data-table.esm.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/el-data-table.min.js","stdver":"standard-version -m '[skip ci] chore(release): v%s'","lint":"eslint \"**/*.@(js|vue)\" --fix","release":"gren release --override"},"dependencies":{"@femessage/el-data-table":"^1.23.2","lodash.get":"^4.4.2","lodash.isempty":"^4.4.0","lodash.kebabcase":"^4.1.1","lodash.values":"^4.3.0"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-transform-runtime":"^7.4.3","@babel/preset-env":"^7.4.3","@femessage/el-form-renderer":"^1.6.0","@femessage/github-release-notes":"^0.19.0","@femessage/types":"^1.0.3","axios":"^0.19.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","element-ui":"2.4.11","eslint":"^6.6.0","eslint-config-prettier":"^6.5.0","eslint-plugin-jest":"^23.0.2","eslint-plugin-prettier":"^3.1.1","eslint-plugin-vue":"^6.0.0","file-loader":"^3.0.1","glob":"^7.1.3","husky":"1.3.1","jest":"^24.8.0","less":"^3.9.0","less-loader":"^5.0.0","lint-staged":"^8.1.0","minimist":"^1.2.0","prettier":"1.18.2","rollup":"^1.9.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-terser":"^4.0.4","rollup-plugin-vue":"^4.7.2","standard-version":"^6.0.1","stylelint":"^9.10.0","stylelint-config-standard":"^18.2.0","vue":"^2.6.10","vue-loader":"^15.7.1","vue-styleguidist":"^3.16.3","vue-template-compiler":"^2.5.16","webpack":"^4.29.6"},"publishConfig":{"access":"public"},"vue-sfc-cli":"1.11.4","engines":{"node":">= 8.3.0","npm":">= 3.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged","post-commit":"git update-index --again","pre-push":"yarn test"}},"lint-staged":{"*.@(md|json)":["prettier --write","git add"],"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"]},"gren":"@femessage/grenrc","gitHead":"55e88ab9093cf25098445eb445e76a8e1f6aae22","bugs":{"url":"https://github.com/FEMessage/el-data-table/issues"},"homepage":"https://github.com/FEMessage/el-data-table#readme","_id":"@elias_zeng/el-data-table@1.14.0","_nodeVersion":"16.15.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-s8wc/9s9sdem2vYr/xWVCjaR3aZxU6TSFvmkvZBzF8t2NzV8We6drwekH56sRUwCF+yrwVz/bf+xV4DyTwr+tA==","shasum":"15c5701036a80ecbf2237f26ddf73007fbc42327","tarball":"https://registry.npmjs.org/@elias_zeng/el-data-table/-/el-data-table-1.14.0.tgz","fileCount":17,"unpackedSize":183402,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC670ocp/WG9zx0A530kXA//3H0RJOxmnrIJfNonSeS0AiAMKJT3o+XclqWMmORiRXFC21Ddo9GJZCwWqX7Rj8cs1g=="}]},"_npmUser":{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"},"directories":{},"maintainers":[{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/el-data-table_1.14.0_1704156697176_0.14339225117834897"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-29T07:36:36.043Z","1.9.0":"2023-12-29T07:36:36.318Z","modified":"2024-01-02T00:51:37.532Z","1.10.0":"2023-12-29T09:54:50.605Z","1.12.0":"2023-12-29T10:09:21.546Z","1.14.0":"2024-01-02T00:51:37.344Z"},"maintainers":[{"name":"elias_zeng","email":"3.komorebi.37@gmail.com"}],"description":"base on element-ui, makes crud easily","homepage":"https://github.com/FEMessage/el-data-table#readme","keywords":["vue","element-ui","table","data-table","element table"],"repository":{"type":"git","url":"git+https://github.com/FEMessage/el-data-table.git"},"author":{"name":"https://github.com/FEMessage"},"bugs":{"url":"https://github.com/FEMessage/el-data-table/issues"},"license":"MIT","readme":"# el-data-table\r\n\r\n[![Build Status](https://badgen.net/travis/FEMessage/el-data-table/master)](https://travis-ci.com/FEMessage/el-data-table)\r\n[![NPM Download](https://badgen.net/npm/dm/@femessage/el-data-table)](https://www.npmjs.com/package/@femessage/el-data-table)\r\n[![NPM Version](https://badgen.net/npm/v/@femessage/el-data-table)](https://www.npmjs.com/package/@femessage/el-data-table)\r\n[![NPM License](https://badgen.net/npm/license/@femessage/el-data-table)](https://github.com/FEMessage/el-data-table/blob/master/LICENSE)\r\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/el-data-table/pulls)\r\n[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)\r\n\r\nAuto requesting byΒ `axios`, supports pagination, tree data structure, custom search, custom operation column, which makes rest api easilyπŸ‘\r\n\r\nThe table uses [@femessage/el-form-renderer](https://github.com/FEMessage/el-form-renderer) to render form.\r\n\r\n![](https://i.loli.net/2019/11/14/KxfWjch5F62lwyR.jpg)\r\n\r\n[δΈ­ζ–‡ζ–‡ζ‘£](./README-zh.md)\r\n\r\n## Table of Contents\r\n\r\n- [Introduction](#introduction)\r\n - [CRUD](#crud)\r\n - [Data Driven](#data-driven)\r\n - [Why](#why)\r\n- [Feature](#feature)\r\n- [Links](#links)\r\n- [Install](#install)\r\n- [Quick Start](#quick-start)\r\n - [Global Register Component](#global-register-component)\r\n - [Template](#template)\r\n- [Reference](#reference)\r\n- [Contributing](#contributing)\r\n- [Contributors](#contributors)\r\n- [License](#license)\r\n\r\n## Introduction\r\n\r\n### CRUD\r\n\r\nel-data-table is created to solve business problems, so CRUD logic is set inside.
For example, to develop `user` api, suppose its relative path like this:\r\n\r\n```javascript\r\n/api/v1/users\r\n```\r\n\r\nThe restful CRUD api should be:\r\n\r\n- Retrieve\r\n\r\n```javascript\r\nGET /api/v1/users?page=1&size=10\r\n```\r\n\r\ndefault data structure\r\n\r\n```js\r\n{\r\n \"code\":0,\r\n \"msg\":\"ok\",\r\n \"payload\":{\r\n \"content\":[], // dataPath\r\n \"totalElements\":2, // totalPath\r\n }\r\n}\r\n```\r\n\r\nYou can customize dataPath/totalPath.\r\n\r\nIf `hasPagination=false`, default dataPath is `payload`\r\n\r\n- Create\r\n\r\n```javascript\r\nPOST / api / v1 / users\r\n```\r\n\r\n- Update\r\n\r\n```javascript\r\nPUT /api/v1/users/:id\r\n```\r\n\r\n- Delete\r\n\r\n```javascript\r\nDELETE /api/v1/users/:id\r\n```\r\n\r\nThen only need to use the following code to complete CRUD functions\r\n\r\n```html\r\n\r\n```\r\n\r\n```javascript\r\n\r\n```\r\n\r\nThe results are as follows:\r\n\r\n- Retrieve\r\n ![](https://i.loli.net/2019/11/14/GIN79blaoPKhHmp.jpg)
![](https://i.loli.net/2019/11/14/lasJ7NhzFi4rY6n.jpg)\r\n\r\n- Create\r\n ![](https://i.loli.net/2019/11/14/NjvFqDV24Y9QJi5.jpg)\r\n\r\n- Update\r\n ![](https://i.loli.net/2019/11/14/5pBfd4KtMDIbOX9.jpg)\r\n\r\n- Delete\r\n ![](https://i.loli.net/2019/11/14/tEqsjIHKMbRpOXP.jpg)\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n\r\n### Data Driven\r\n\r\nMoving the content of the template to the script means that the template can be reduced and js can be extracted to another file to reuse.\r\nAt the same time, the data in js is actually a piece of json, this means code generation tool can help.\r\n\r\n![](https://i.loli.net/2019/11/14/1jpJdiNMhPHoZmF.jpg)
![](https://i.loli.net/2019/11/14/hfTaURHEOYAkoSr.jpg)
![9.jpeg](https://i.loli.net/2019/11/14/uaNq3mbWRXPk1gs.jpg)\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n\r\n### Why\r\n\r\nWhy do you create el-data-table based on el-table of element-ui?\r\n\r\nI often hear the following sounds:\r\n\r\n1. el-table can cover most scenarios without extended requirements\r\n2. wrap up so many things, it's heavy and high coupling\r\n3. bound with too many business logic, it's not flexible; business logic should handle by developers\r\n\r\nFirst of all, I have to say, el-table is really flexible, but when implementing paging requests, only el-table is not enough, and the el-pagination component needs to be combined. Most of the content of paging processing is repeated. Without a high level business component, we get duplicate code everywhere.\r\n\r\nIn fact, in the admin or dashboard web app, there are many CRUD operations, using restful API. It is possible to use only one url to make a component to complete CRUD functions.\r\n\r\nSecondly, many experienced developers think that components are the more flexible the better.\r\n\r\nHowever, for the \"newbees\" who lack of experience, they are not familiar with common business scenarios. Some basic operations, like form validation, space filtering, adding loading, exception handling, they may forget, which result in bugs.\r\n\r\nFor front-line business developers, in the face of endless developing task, in fact, they don't want to deal with repeated business logic. they just want to free their hands and get off work early.\r\n\r\nIn such situation, el-data-table was born.\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n\r\n## Feature\r\n\r\n- Use configuration to call restful api to complete CRUD functions\r\n- Support table display tree structure data\r\n- Bound with pagination logic\r\n- Support custom column buttons, and custom operation functions\r\n- Support saving query on url, which can resotre search status after history.go(-1) or location.reload()\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n\r\n## Links\r\n\r\n- [docs](https://FEMessage.github.io/el-data-table/)\r\n- [fem-vscode-helper](https://marketplace.visualstudio.com/items?itemName=FEMessage.fem-vscode-helper)\r\n\r\n[⬆ Back to Top](#table-of-contents)\r\n\r\n## Install\r\n\r\nEncourage usingΒ [Yarn](https://yarnpkg.com/en/docs/install#mac-stable)Β to install\r\n\r\n```sh\r\nyarn add @femessage/el-data-table\r\n```\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n\r\n## Quick Start\r\n\r\n### Global Register Component\r\n\r\nThis is for minification reason: in this way building your app, webpack or other bundler just bundle the dependencies into one vendor for all pages which using this component, instead of one vendor for one page\r\n\r\n```javascript\r\nimport Vue from 'vue'\r\n// register component and loading directive\r\nimport ElDataTable from '@femessage/el-data-table'\r\nimport ElFormRenderer from '@femessage/el-form-renderer'\r\nimport {\r\n Button,\r\n Dialog,\r\n Form,\r\n FormItem,\r\n Loading,\r\n Pagination,\r\n Table,\r\n TableColumn,\r\n Message,\r\n MessageBox\r\n} from 'element-ui'\r\nVue.use(Button)\r\nVue.use(Dialog)\r\nVue.use(Form)\r\nVue.use(FormItem)\r\nVue.use(Loading.directive)\r\nVue.use(Pagination)\r\nVue.use(Table)\r\nVue.use(TableColumn)\r\nVue.component('el-form-renderer', ElFormRenderer)\r\nVue.component('el-data-table', ElDataTable)\r\n// to show confirm before delete\r\nVue.prototype.$confirm = MessageBox.confirm\r\n// show tips\r\nVue.prototype.$message = Message\r\n// if the table component cannot access `this.$axios`, it cannot send request\r\nimport axios from 'axios'\r\nVue.prototype.$axios = axios\r\n```\r\n\r\n### Template\r\n\r\n```vue\r\n\r\n```\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n\r\n## Reference\r\n\r\n- [form rules detail see asynchronc-veriator](https://github.com/yiminghe/async-validator)\r\n- [ll-input enter to submit](https://github.com/ElemeFE/element/pull/5920)\r\n- [html spec form submission](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)\r\n- [what_is_a_URL](https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL)\r\n- [history_API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)\r\n- [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)\r\n- [regExp](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)\r\n- [routing implementations details in vue-router](https://zhuanlan.zhihu.com/p/27588422)\r\n- [peer-dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/)\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n\r\n## Contributing\r\n\r\nFor those who are interested in contributing to this project, such as:\r\n\r\n- report a bug\r\n- request new feature\r\n- fix a bug\r\n- implement a new feature\r\n\r\nPlease refer to our [contributing guide](https://github.com/FEMessage/.github/blob/master/CONTRIBUTING.md).\r\n\r\n[⬆ Back to Top](#table-of-contents)\r\n\r\n## Contributors\r\n\r\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\"\"/
levy
πŸ’» πŸ‘€ πŸ“– πŸš‡ πŸ€”		\"\"/
Donald Shen
πŸ’» ⚠️ πŸ“–		\"\"/
MiffyCooper
πŸ’» πŸ“–		\"\"/
Huanfeng Chen
πŸ’»		\"\"/
EVILLT
πŸ’» πŸ›		\"\"/
Alvin
πŸ’» πŸ›		\"\"/
Han
πŸ’» πŸ› πŸ“–
\"\"/
kunzhijia
πŸ’» πŸ”§ πŸ’‘		\"\"/
Edgar
πŸ’» πŸ›		\"\"/
Barretem
πŸ’»		\"\"/
ι˜Ώη¦Ήγ€‚
πŸ“–		\"\"/
lujunwei
πŸ’»		\"\"/
cjf
πŸ› πŸ’»		\"\"/
Jack-rainbow
πŸ›
\"\"/
ColMugX
πŸ’»		\"\"/
snowlocked
πŸ’» πŸ“–		\"\"/
Sponge
πŸ› πŸ’»		\"\"/
4Ark
πŸ’» πŸ“–		\"\"/
Htongbing
πŸ’»		\"\"/
PPPenny
πŸ’»		\"\"/
PopupDialog
πŸ›
\"\"/
Jogiter
πŸ’»		\"\"/
yolofit
πŸ›		\"\"/
huazaili
πŸ›
\r\n\r\n\r\n\r\n\r\n\r\n\r\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\r\n\r\n## License\r\n\r\n[MIT](https://www.yuque.com/deepexi-serverless/onx52o/LICENSE)\r\n\r\n[⬆Back to Top](#table-of-contents)\r\n","readmeFilename":"README.md"}