官方文档

全局安装

  1. npm install xe-utils@3 vxe-table@3
  1.       import Vue from 'vue'
  2.       import 'xe-utils'
  3.       import VXETable from 'vxe-table'
  4.       import 'vxe-table/lib/style.css'
  6.       Vue.use(VXETable)
  8.       // 给 vue 实例挂载内部对象，例如：
  9.       // Vue.prototype.$XModal = VXETable.modal
  10.       // Vue.prototype.$XPrint = VXETable.print
  11.       // Vue.prototype.$XSaveFile = VXETable.saveFile
  12.       // Vue.prototype.$XReadFile = VXETable.readFile

实践记录

动态编辑表格

文档
场景：动态添加字段，比如一个商品的数量，价格，并且将参数传递给后端

  1. 设置 edit-config={trigger: 'click', mode: 'cell'} 启用单元格点击编辑的功能

注意，如果后端返回的数据中没有对应的字段，依旧可以写，并且在最后获取table数据的时候可以拿到完整的数据

表格输入检验

文档
场景：当输入框比如为价格时，那么要求只能输入正整数

通过调用 validate 函数校验数据，edit-rules 校验规则配置，如果第一个参数为 true 则全量校验
（如果不指定数据，则默认只校验临时变动的数据，例如新增或修改…等）

  1. 1.添加校验规则 
  2. :edit-rules="validRules"
  5. 2.检验方法 （推荐使用全量数据校验）
  6. async validAllEvent () {
  7.   const $table = this.$refs.xTable
  8.   const errMap = await $table.validate(true).catch(errMap => errMap)
  9.   if (errMap) {
  10.     this.$XModal.message({ status: 'error', content: '校验不通过！' })
  11.   } else {
  12.     this.$XModal.message({ status: 'success', content: '校验成功！' })
  13.   }
  14. },
  17.   //备注：之前使用的是快速校验，该方法校验好像没什么用，且需要自己点击才可以进行输入框的检验

表尾计算

文档
场景：表格底部需要计算数值，如总价，总数等