{"id":20829356,"url":"https://github.com/heftykoo/vue-bel-table","last_synced_at":"2025-06-11T17:36:09.465Z","repository":{"id":57394664,"uuid":"86672633","full_name":"HeftyKoo/vue-bel-table","owner":"HeftyKoo","description":"A vue table component that base on element ui.Just for using el-table component more convenient。  对element的table组件进行了封装，更方便地使用elment ui的el-table组件","archived":false,"fork":false,"pushed_at":"2017-05-20T03:41:17.000Z","size":8469,"stargazers_count":11,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T14:11:22.242Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/HeftyKoo.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":"2017-03-30T07:30:45.000Z","updated_at":"2023-12-07T15:32:43.000Z","dependencies_parsed_at":"2022-09-19T17:43:13.147Z","dependency_job_id":null,"html_url":"https://github.com/HeftyKoo/vue-bel-table","commit_stats":null,"previous_names":["yeyuqiudeng/vue-bel-table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-bel-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-bel-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-bel-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-bel-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HeftyKoo","download_url":"https://codeload.github.com/HeftyKoo/vue-bel-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252955167,"owners_count":21831063,"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-11-17T23:20:01.304Z","updated_at":"2025-05-07T21:22:14.568Z","avatar_url":"https://github.com/HeftyKoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-bel-table\n\n[![GitHub issues](https://img.shields.io/github/issues/yeyuqiudeng/vue-bel-table.svg)](https://github.com/yeyuqiudeng/vue-bel-table/issues)\n[![GitHub forks](https://img.shields.io/github/forks/yeyuqiudeng/vue-bel-table.svg)](https://github.com/yeyuqiudeng/vue-bel-table/network)\n[![GitHub stars](https://img.shields.io/github/stars/yeyuqiudeng/vue-bel-table.svg)](https://github.com/yeyuqiudeng/vue-bel-table/stargazers)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/yeyuqiudeng/vue-bel-table.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=%5Bobject%20Object%5D)\n\n[![NPM](https://nodei.co/npm/vue-bel-table.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/vue-bel-table/)\n\n## Description\n\nA vue table component that base on element ui.Just for using el-table component more convenient。\n\n对element的table组件进行了封装，更方便地使用elment ui的el-table组件\n\n## Dependency\n\n* [^Vue2.0](https://github.com/vuejs/vue)\n* [^Element 1.2.0](https://github.com/ElemeFE/element)\n\n## Installation\n\n```javascript\n npm install vue-bel-table\n```\n\n## Usage\n\n```javascript\nimport BelTable from 'vue-bel-table'\nVue.use(BelTable, options)\n```\n\n## Options\n\n```javascript\noptions: {\n  \ttable: Object, // 自定义table默认属性，必须为element ui支持的表格属性\n  \tcolumn: Object // 自定义列默认属性，必须为element ui支持的列属性\n}\n// 如果不传递，默认属性如下\n// 组件内的默认配置如下\ntable: {  // table的默认属性\n    data: [],\n    maxHeight: 600,\n    border: true\n},\ncolumn: { // column的默认属性\n  \tshowOverflowTooltip: true,\n  \theaderAlign: 'center',\n  \tresizable: true\n}\n```\n\n## Props\n\n```javascript\ndata: Array, // 表格的数据，1.1.0 新增，如果存在，configs中的attr的中可以不存在data属性\nconfigs: Object\n// configs的具体配置如下\nconfigs: {\n   table: {  // 表格配置\n     default: {}, // 默认配置，配置属性要跟element ui的table attributes 一致，如果有配置，则忽略组件内defaultAttr的table默认配置\n     attr: {} // 配置属性要跟element ui的table attributes一致\n   },\n   columnDefault: {}, // column的默认配置，要跟element ui的column attributes一致，如果有配置，则忽略defaultAttr的column默认配置\n   columns: [  // column配置\n     {\n       attr: {}, // column的默认配置，要跟element的column attributes一致\n       scopedSlot: '', // scope slot名称\n     }\n   ]\n }\n```\n\n## events\n\n跟element ui 的 events 一致\n\n## Table Methods\n\n跟element ui 的table methods 一致\n\n## example\n\n1.1.0后更推荐这样使用：\n\n```vue\n\u003ctemplate\u003e\n    \u003cbel-table\n      ref=\"table\"\n      @row-click=\"toggleRowSelection\"\n      :data=\"tableData\"\n      :configs=\"tableConfig\"\u003e\n      \u003ctemplate slot=\"date\" scope=\"scope\"\u003e\n        \u003cspan\u003e{{scope.row.date}}\u003c/span\u003e\n      \u003c/template\u003e\n    \u003c/bel-table\u003e\n\u003c/template\u003e\n\n\u003cscript type=\"text/babel\"\u003e\n  export default {\n    data () {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        tableConfig: {\n          get () {\n            return {\n              columns: [\n                {\n                  attr: {\n                    type: 'selection',\n                    width: 80,\n                    align: 'center'\n                  }\n                },\n                {\n                  attr: {\n                    prop: 'date',\n                    label: '日期',\n                    minWidth: 180,\n                    scopedSlot: 'date',\n                  }\n                },\n                {\n                  attr: {\n                    prop: 'name',\n                    label: '姓名',\n                    minWidth: 180\n                  }\n                },\n                {\n                  attr: {\n                    prop: 'address',\n                    label: '地址',\n                    minWidth: 180\n                  }\n                }\n              ]\n            }\n          }\n        }\n      }\n    },\n    methods: {\n      toggleRowSelection (row) {\n        this.$refs.table.toggleRowSelection(row)\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n1.1.0以前的使用方式，1.1.0以后的版本同样兼容\n\n```vue\n\u003ctemplate\u003e\n    \u003cbel-table\n      ref=\"table\"\n      @row-click=\"toggleRowSelection\"\n      :configs=\"tableConfig\"\u003e\n      \u003ctemplate slot=\"date\" scope=\"scope\"\u003e\n        \u003cspan\u003e{{scope.row.date}}\u003c/span\u003e\n      \u003c/template\u003e\n    \u003c/bel-table\u003e\n\u003c/template\u003e\n\n\u003cscript type=\"text/babel\"\u003e\n  export default {\n    data () {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    computed: {\n      tableConfig: {\n        get () {\n          return {\n            table: {\n              attr: {\n                data: this.tableData\n              }\n            },\n            columns: [\n              {\n                attr: {\n                  type: 'selection',\n                  width: 80,\n                  align: 'center'\n                }\n              },\n              {\n                attr: {\n                  prop: 'date',\n                  label: '日期',\n                  minWidth: 180,\n                  scopedSlot: 'date',\n                }\n              },\n              {\n                attr: {\n                  prop: 'name',\n                  label: '姓名',\n                  minWidth: 180\n                }\n              },\n              {\n                attr: {\n                  prop: 'address',\n                  label: '地址',\n                  minWidth: 180\n                }\n              }\n            ]\n          }\n        }\n      }\n    },\n    methods: {\n      toggleRowSelection (row) {\n        this.$refs.table.toggleRowSelection(row)\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheftykoo%2Fvue-bel-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheftykoo%2Fvue-bel-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheftykoo%2Fvue-bel-table/lists"}