|
1 |
| -## 这里是更新文档 |
| 1 | + |
| 2 | +## 介绍 |
| 3 | +基于 vue2 的 组件。[API文档](http://doc.huangsw.com/vue-easytable/app.html) |
| 4 | + |
| 5 | + |
| 6 | +## 主要功能 |
| 7 | +1. 自适应,可以随着浏览器窗口改变自动适应 |
| 8 | +2. 固定列,表头固定 |
| 9 | +3. 列宽拖动(默认支持) |
| 10 | +4. 排序,支持单个、多个字段排序 |
| 11 | +5. 自定义列、自定义单元格样式、loading效果等 |
| 12 | +6. 自带分页组件 |
| 13 | + |
| 14 | +## 安装 |
| 15 | + |
| 16 | +``` |
| 17 | +npm install vue-easytable --save-dev |
| 18 | +``` |
| 19 | + |
| 20 | +## 使用([更多功能](http://doc.huangsw.com/vue-easytable/app.html)) |
| 21 | + |
| 22 | + |
| 23 | +``` |
| 24 | +import 'vue-easytable/packages/themes-base/index.css' |
| 25 | +import {VTable,VPagination} from 'vue-easytable' |
| 26 | +
|
| 27 | +Vue.component(VTable.name, VTable) |
| 28 | +Vue.component(VPagination.name, VPagination) |
| 29 | +``` |
| 30 | + |
| 31 | +```html |
| 32 | +<template> |
| 33 | + <v-table |
| 34 | + :width="1100" |
| 35 | + :columns="tableConfig.columns" |
| 36 | + :table-data="tableConfig.tableData" |
| 37 | + ></v-table> |
| 38 | +</template> |
| 39 | +``` |
| 40 | +```javascript |
| 41 | +<script> |
| 42 | + |
| 43 | + export default{ |
| 44 | + data() { |
| 45 | + return { |
| 46 | + tableConfig: { |
| 47 | + tableData:[ |
| 48 | + {"name":"tom","gender":"男","job":"the cat"}, |
| 49 | + {"name":"jerry","gender":"男","job":"the mouse"}, |
| 50 | + {"name":"张飞","gender":"女","job":"勇而有义,皆万人之敌,而为之将"} |
| 51 | + ], |
| 52 | + columns: [ |
| 53 | + {field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center'}, |
| 54 | + {field: 'gender', title: '性别', width: 80, titleAlign: 'center',columnAlign:'center'}, |
| 55 | + {field: 'job', title: '职业', titleAlign: 'center',columnAlign:'left'} |
| 56 | + ] |
| 57 | + } |
| 58 | + } |
| 59 | + } |
| 60 | + } |
| 61 | +</script> |
| 62 | +``` |
| 63 | + |
| 64 | +### 参考 |
| 65 | +[饿了么ui组件](http://element.eleme.io/#/zh-CN/component/quickstart) |
| 66 | + |
| 67 | + |
| 68 | + |
0 commit comments