{"id":16908133,"url":"https://github.com/dream2023/vue-ele-table","last_synced_at":"2025-10-03T18:47:27.221Z","repository":{"id":34980312,"uuid":"193683916","full_name":"dream2023/vue-ele-table","owner":"dream2023","description":"vue-ele-table | 基于 element-ui 数据驱动表格","archived":false,"fork":false,"pushed_at":"2023-01-04T01:05:04.000Z","size":5102,"stargazers_count":37,"open_issues_count":26,"forks_count":16,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-05-31T15:26:38.611Z","etag":null,"topics":["datatable","el-editable","element-table","element-ui","element-ui-table","vue-ele-table","vue-table"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/dream2023.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":"2019-06-25T10:09:04.000Z","updated_at":"2024-05-30T23:59:24.000Z","dependencies_parsed_at":"2023-01-15T11:30:41.631Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/vue-ele-table","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/vue-ele-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244656734,"owners_count":20488640,"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":["datatable","el-editable","element-table","element-ui","element-ui-table","vue-ele-table","vue-table"],"created_at":"2024-10-13T18:50:17.815Z","updated_at":"2025-10-03T18:47:22.203Z","avatar_url":"https://github.com/dream2023.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-ele-table | 基于 element-ui 的表格二次封装\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)\n[![npm](https://img.shields.io/npm/v/vue-ele-table.svg)](https://www.npmjs.com/package/vue-ele-table)\n[![download](https://img.shields.io/npm/dw/vue-ele-table.svg)](https://npmcharts.com/compare/vue-ele-editable?minimal=true)\n\n## 说明\n\nvue-ele-table 是基于[element-ui table](https://element.eleme.cn/#/zh-CN/component/table) 和 [vue-ele-editable](https://github.com/dream2023/vue-ele-editable) 的进一步封装, 内置了 \u003ccode\u003e搜索、排序、筛选、过滤、分页、显示隐藏列、行内编辑\u003c/code\u003e 功能, 隐藏了细节, 目的是为了保证开发的质量, 加快开发的速度 😁。\n\n⚠️ 但是, 由于在接口的设计上, 每个项目千差万别, 本来想将本组件变得更加通用和适应, 但是发现越改操作越复杂, 违背了当初的意愿。所以您如果想要应用到自己的项目中, 一种方法是可以参考本项目的 API 设计规范, 另一种方法是 clone/download 后, 放到自己项目中进行修改, 另外如果您有好的建议, 尽管提 issue, 一定第一时间响应(PS: 本项目代码注释相当详细, 相信你能看懂)\n\n\u003e 如果 star 超过 100, 有视频详细源码讲解\n\n## 演示\n\n[![演示图](./public/example.gif)](https://codepen.io/dream2023/pen/agwMpY)\n\n## 在线示例\n\n[https://codepen.io/dream2023/pen/agwMpY](https://codepen.io/dream2023/pen/agwMpY)\n\n## 安装\n\n```bash\nnpm install vue-ele-table --save\n```\n\n## 使用\n\n```js\nimport EleTable from 'vue-ele-table'\nVue.use(EleTable)\n\n// 在引入 EleTable 时，可以传入一个全局配置对象, 例如:\nVue.use(EleTable, {\n  // 每页显示的数量\n  defaultSize: 10,\n  // 用于改变请求的key,\n  // 例如: 原 { page: 1, size: 20  }, 经过下面设置后, 就会变为: { page: 1, per_page: 20 }\n  paramsKey: {\n    size: 'per_page'\n  },\n  // editable 相关的配置, 具体参考:\n  // https://github.com/dream2023/vue-ele-editable\n  editable: {\n    image: {\n      lazy: true\n    }\n    // ...\n  }\n})\n```\n\n## API 规范\n\n### 返回数据格式\n\n```js\n{\n  \"total\": Number, // 总条数\n  \"list\": Array // 数据列表\n},\n// 或者 直接数组\n[\n  { },\n  { }\n]\n\n\n// 例如:\n// 默认分页\n{\n  \"total\": 300,\n  \"list\": [\n    { id: 1, age: 19, name: '张三' },\n    { id: 2, age: 33, name: '李四' },\n    { id: 3, age: 22, name: '王五' },\n  ]\n}\n\n// 直接返回数组, 则表明无需分页\n[\n  { id: 1, age: 19, name: '张三' },\n  { id: 2, age: 33, name: '李四' },\n  { id: 3, age: 22, name: '王五' },\n]\n```\n\n### 分页控制\n\n```js\n{\n  \"page\": Number, // 页码, 默认为 1\n  \"size\": Number, // 每页显示条数，默认值 20\n},\n\n// 例如:\n// 也就是 当前是 第2页, 每页显示 30 条\n{\n  \"page\": 2,\n  \"size\": 30\n}\n```\n\n### 排序控制\n\n```js\n// 请求参数\n{\n  \"_order_field\": String, // 排序字段名\n  \"_order_direction\": \"asc\" || \"desc\", // 正序 或 倒序\n},\n\n// 例如:\n// 含义: 排序字段是 id, 正序 asc\n{\n  \"_order_field\": 'id',\n  \"_order_direction\": \"asc\"\n}\n```\n\n### 筛选控制\n\n```js\n{\n  \"_filter\": String, // 支持多筛选, 用 | 分割不同字段, 用 : 分割值和字段, 用 , 分割值\n\n  // 例如:\n  // 含义: (type=1 或 type = 2 或 type=3) 且 name = 'abc'\n  \"_filter\": \"type:1,2,3|name:abc\"\n}\n\n\n```\n\n### 时间筛选控制\n\n```js\n{\n  \"_filter_time\" : String, // 分割原理同上\n\n  // 例如:\n  // 含义: (create_time \u003e 12121212 且 create_time \u003c 13131313) 且 (update_time \u003e 14141414 且 update_time \u003c 15151515)\n  \"_filter_time\" = \"create_time:12121212,13131313|update_time:14141414,15151515\",\n}\n```\n\n### 搜索控制\n\n```js\n{\n  \"_search_field\": \"字段|字段|字段\",\n  \"_search_keyword\": \"搜索内容\"\n}\b,\n\n// 例如:\n// 含义: (name 或者 title 或者 article) 包含 学习vue 的记录\n{\n  \"_search_field\": \"name|title|article\",\n  \"_search_keyword\": \"学习vue\"\n}\n```\n\n## Props 参数\n\n```js\nprops: {\n  // 是否显示顶部删除按钮\n  isShowTopDelete: {\n    type: Boolean,\n    default: true\n  },\n  // 是否显示右侧删除按钮\n  isShowRightDelete: {\n    type: Boolean,\n    default: true\n  },\n  // 是否显示多选框\n  isShowSelection: {\n    type: Boolean,\n    default: true\n  },\n  // 是否显示index列\n  isShowIndex: {\n    type: Boolean,\n    default: true\n  },\n  // 是否显示分页\n  isShowPagination: {\n    type: Boolean,\n    default: true\n  },\n  // 主键\n  // 用途: 删除, 更新等按钮操作\n  primaryKey: {\n    type: String,\n    default: 'id'\n  },\n  // 请求函数\n  // 用途: 所有请求都有内部完成, 所以需要一个请求函数, 改函数的返回值必须是一个Promise实例\n  requestFn: {\n    type: Function,\n    required: true\n  },\n  // 更新函数\n  // 用途: 用于行内编辑时, 更新数据, 具体参考: https://github.com/dream2023/vue-ele-editable\n  updateFn: Function,\n  // 批量删除函数\n  deletesFn: Function,\n  // 删除函数\n  deleteFn: Function,\n  // 表格描述, 下面会详细论述\n  tableDesc: {\n    type: Object,\n    default () {\n      return {}\n    }\n  },\n  // 列描述, 下面会详细论述\n  columnsDesc: {\n    type: Object,\n    required: true\n  },\n  // 顶部按钮, 下面会详细论述\n  topButtons: Array,\n  // 顶部时间过滤字段\n  // 这个比较简单, 只需要传递字段就行了, 例如 ['create_time', 'update_time'] 或者 'create_time'\n  topTime: [String, Array],\n  // 顶部搜索字段, 下面会详细论述\n  topSearch: [Object, Array],\n  // 右侧按钮, 下面会详细论述\n  rightButtons: {\n    type: Array,\n    default () {\n      return []\n    }\n  }\n}\n```\n\n### columnsDesc\n\n```html\n\u003c!-- 伪代码, 帮助理解 --\u003e\n\u003cel-table-column\n  v-for=\"(column, field) of columnsDesc\"\n  :key=\"field\"\n  :filters=\"column.options\"\n  :label=\"column.text\"\n  :sortable=\"column.sortable === true ? 'custom' : column.sortable\"\n  :width=\"column.width\"\n  v-bind=\"column.columnAttrs\"\n\u003e\n  \u003cele-editable\n    :customAttrs=\"column.componentAttrs\"\n    :customData=\"{\n      [primaryKey]: scope.row[primaryKey]\n    }\"\n    :defaultValue=\"column.defaultValue\"\n    :displayFormatter=\"column.displayFormatter\"\n    :emptyText=\"column.emptyText\"\n    :field=\"field\"\n    :inline=\"column.inline\"\n    :isNoWrapper=\"column.isNoWrapper\"\n    :options=\"column.options\"\n    :request-fn=\"updateFn\"\n    :rules=\"column.rules\"\n    :title=\"column.titleField ? scope.row[column.titleField] : column.text\"\n    :type=\"column.type\"\n    :valueFormatter=\"column.valueFormatter\"\n    v-model=\"scope.row[field]\"\n  /\u003e\n\u003c/el-table-column\u003e\n```\n\n```js\ncolumnsDesc: {\n  // 字段\n  status: {\n    text: '状态', // 表头名字\n    sortable: true, // 该列是否需要排序,\n    width: 100, // 列宽\n    options: [ // 用于筛选\n      { text: '正常', value: true }, // text 用来显示, value 是 text 对应的值\n      { text: '禁用', value: false }\n    ],\n    columnAttrs: { // 其他关于 column 的属性, 都使用 columnAttrs\n      resizable: false, // 禁止拖动\n    },\n\n    // 下面的是关于 editable 相关的属性\n    // https://github.com/dream2023/vue-ele-editable\n    type: 'status', // 指定 列 显示的类型,\n    defaultValue: 1, // 默认值,\n    // ...\n  },\n  name: {\n    type: 'input',\n    text: '姓名'\n  },\n  // ...\n}\n```\n\n### tableDesc\n\n```html\n\u003c!-- 伪代码 --\u003e\n\u003cel-table\n  :class=\"tableDesc.class\"\n  :style=\"tableDesc.style\"\n  v-bind=\"tableDesc.attrs\"\n  v-on=\"tableDesc.on\"\n\u003e\u003c/el-table\u003e\n```\n\n```js\ntableDesc: {\n  class: {},  // 添加的类\n  style: {}, // 添加的自定义样式\n  attrs: {}, // 添加的自定义属性\n  on: {}, // 添加的自定义事件\n}\n```\n\n```js\n// 例子: 指定默认排序字段\ntableDesc: {\n  attrs: {\n    'default-sort': {prop: 'date', order: 'descending'}\n  }\n}\n```\n\n### topButtons\n\n```js\n{\n  primaryKey: 'id', // 假定主键字段为 id\n  topButtons: [\n    {\n      text: '新增', // 文字\n      attrs: { // btn相关属性\n        type: 'success',\n      },\n      click: (ids, rows) =\u003e {\n        // 点击事件\n        console.log(ids, rows) // 传递过来勾选中的列的 主键集合 和 列的集合\n      }\n    },\n    {\n      // ...\n    }\n  ]\n}\n```\n\n### rightButtons\n\n```js\n{\n  primaryKey: 'id', // 假定主键字段为 id\n  rightButtons: [\n    {\n      text: '编辑', // 显示的文字\n      attrs: { // btn相关属性\n        type: 'success',\n      },\n      click: (id, index, row) =\u003e {\n        // 点击事件\n        console.log(id, index, row) // 传递过来 主键值, 行的index值, 和 行值\n      }\n    }\n  ]\n}\n```\n\n### topSearch\n\n```js\ntopSearch: [\n  { text: '用户名', value: 'name' }, // text: 显示在提示框的内容, value: 字段\n  { text: '省份', value: 'address' }\n]\n```\n\n### 综合案例\n\n```js\ndata () {\n  return {\n    rightButtons: [\n      {\n        text: '编辑',\n        click: (id, index, data) =\u003e {\n          console.log(id, index, data)\n        }\n      }\n    ],\n    topButtons: [\n      {\n        text: '新增',\n        click: (ids) =\u003e {\n          console.log(ids)\n        }\n      },\n      {\n        text: '启用',\n        attrs: {\n          type: 'success'\n        },\n        click: (ids) =\u003e {\n          console.log(ids)\n        }\n      },\n      {\n        text: '禁用',\n        attrs: {\n          type: 'warning'\n        },\n        click: (ids) =\u003e {\n          console.log(ids)\n        }\n      }\n    ],\n    topTime: 'create_time',\n    topSearch: [\n      { text: '用户名', value: 'name' },\n      { text: '省份', value: 'address' }\n    ],\n    columnsDesc: {\n      id: {\n        text: 'ID',\n        sortable: true,\n        width: 80\n      },\n      avatar: {\n        text: '头像',\n        type: 'image'\n      },\n      name: {\n        text: '名字',\n        type: 'input'\n      },\n      type: {\n        text: '类型',\n        options: ['VIP1', 'VIP2', 'VIP3', 'SVIP']\n      },\n      address: {\n        text: '省份'\n      },\n      birthday: {\n        text: '出生日期'\n      },\n      status: {\n        text: '状态',\n        type: 'status',\n        width: 100,\n        options: [\n          { text: '正常', type: 'success', value: 1 },\n          { text: '禁用', type: 'danger', value: 0 }\n        ]\n      },\n      create_time: {\n        text: '创建时间',\n        type: 'datetime-text'\n      }\n    }\n  }\n}\n```\n\n## 相关链接\n\n- [vue-ele-editable](https://github.com/dream2023/vue-ele-editable)\n- [element table](https://element.eleme.cn/#/zh-CN/component/table)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Fvue-ele-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-table/lists"}