05 vue项目中加入easytable

本节我们将通过easytable显示数据。

完成nodejs，vue-cli，webpack，webpack-dev-server的安装

https://www.jianshu.com/p/eb4d9e132f62

访问提示的url，便能看到显示的表格【笔者没有关注居中】：

以上就是在vue项目中通过easytable显示数据的过程。

环境 Vue2.x

之前使用的报表开发插件       vue-easy-print @0.0.8     

能打印pdf报表,但是存在 不能打印多页 的问题,使用人数较少,文档较少,版本较低,放弃.

改用新的插件      print-js

能在原来的基础上解决打印多页pdf的问题

npm install print-js --save

    import printJS from 'print-js'

<visa-template  id="aaa" ></visa-template>

<el-button type="primary" onclick="printJS( {printable:'aaa', type:'html',scanStyles:false,css:['https://qiniu.smartpilot.cn/myreport.css'],style:''})" >

  生成报表

</el-button>

例如:

    style:'{div:{color:#008855}}'

    字体缩小  .reportTable{font-size:0.8em !important }

#能分页靠的是这个css

```

.reportBox {

  text-align: center

  width: 100%

  margin: auto

  page-break-after: always

  margin-top: 20px

  font-family: "微软雅黑"

}

```

vxe-table 引入 （vxe-table 3.1.6版本才行 3.1.8版本有问题 需要引入固定版本）

借助插件 babel-plugin-import 可以实现按需加载模块，减少文件体积。修改 .babelrc 或 babel.config.js 配置文件

基于 vxe-table 表格的适配插件，用于兼容 iview 、 view-design 组件库

最后这样按需引入模块，就可以减小体积了

table 列拖拽

---