vue-easytable的使用

vue-easytable的使用

---

简单使用

初学Vue，由于在项目的使用过程中，需要自己写一些表格，所以自己上网搜到这个组件，就写一些自己的使用心得。首先附上组件官方网站：vue-easytable.

首先是安装，安装的话比较简单，NPM就能装好：

npm install vue-easytable --save-dev

然后在router文件下的index.js中引入样式和导入组件即可，即加入下面的语句：

import 'vue-easytable/libs/themes-base/index.css'
import {
   VTable,VPagination} from 'vue-easytable'

Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)

然后我们就能够在自己组件的页面里面写vue-easytable了，具体的使用比较简单，在官网上面都有说，主要说说几点自己使用的吧，首先肯定是要建立一个表，建立表的话用到v-table标签，在标签内部可以自己设计需要的属性，如下图所示：

<v-table
    :is-vertical-resize="true" 				// 设置表格的纵向自适应
    :columns="tableConfig.columns" 			// 列的集合
    :title-rows="tableConfig.titleRows"		// 表格的表头
    :table-data="tableConfig.tableData"		// 表格的数据集
    :show-vertical-border="false"			// 是否显示垂直border
    :width="1295" 							// 设置表格的宽度
    :height="540" 							// 设置表格的高度
    :min-height="500"						// 设置表格的最低高度
    row-hover