携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >>
集成原因：****
Element ui 中 el-table无法满足erp模式下的表格操作模式，如：键盘控制、双击修改、右键快捷、拖拽等，因此选择vxe-table满足erp表格需求。
文档地址：****
官方地址：
扩展地址：
全局安装****
npm install xe-utils@3 vxe-table@3
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
// 给 vue 实例挂载内部对象，例如：
// Vue.prototype.$XModal = VXETable.modal
// Vue.prototype.$XPrint = VXETable.print
// Vue.prototype.$XSaveFile = VXETable.saveFile
// Vue.prototype.$XReadFile = VXETable.readFile
全局参数****
VXETable.setup({
size: 'small', // 全局尺寸
table: {
border: true,
stripe: true, // 条纹
resizable: true, // 列是否允许拖动列宽调整大小
showOverflow: true, // 当内容过长时显示为省略号
highlightHoverRow: true, // 鼠标移到行是否要高亮显示
highlightCurrentRow: true, // 是否要高亮当前行
scrollY: { // 纵向虚拟滚动配置（不支持深层结构和展开行）
rHeight: 36 // 当启用虚拟滚动后，该参数用于设置每一行的固定高度
}
})
代码说明****
1. vxe-grid****
Vxe-table高级表格，通过数据渲染表格。
align: 所有的列对齐方式
show-footer: 是否显示表尾
keep-source: 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）
height: 表格的高度；支持铺满父容器或者固定高度，如果设置 auto 为铺满父容器（如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素）
data: 表格数据（与 loadData 行为一致，更新数据是不会重置状态）
columns: 列配置
edit-rules: 校验规则配置项
scrollX: 横向虚拟滚动配置（不支持深层结构和展开行）
columnKey: 是否需要为每一列的 VNode 设置 key 属性（非特殊情况下不需要使用）
toolbarConfig: 工具栏配置
mouse-config: 鼠标配置项
menu-config: 快捷菜单配置项
footer-method: 表尾的数据获取方法，返回一个二维数组
keyboard-config: 按键配置项
edit-config: 可编辑配置项
menu-click: 只对 menu-config 配置时有效，当点击快捷菜单时会触发该事件
custom: 如果与工具栏关联，在自定义列按钮被手动点击后会触发该事件（由于是自定义未使用该字段）
2. data数据****
每个模块均需要设置不同的data数据
columns****
type：列的类型(seq序号/checkbox复选框/radio单选框/expand展开行)
field：列字段名
title：表头
visible：是否显示
width：宽度
fixed：固定列(left/right)
sortable：是否允许列排序
filters：配置筛选条件（以下是其属性）
editRender：可编辑渲染器配置项（以下是其属性）
slots: {filter:}：自定义筛选模板 {edit:}：自定义可编辑组件模板（以下是其属性）
所有在表格内的操作都需要使用自定义模版，所有处理后才显示的数据也需使用自定义模版
公共方法(mixin页面调用vxeConfig)****
columnDrop // 拖拽列
getColumns // 获取所有列配置
vxeColumn // 新表格显隐列
toggleFixedColumn // 固定和取消固定列方法
visibleMethod // 控制右键操作禁用
contextMenuClickEvent // 鼠标右键操作
insertEvent // 插入行
delCate // 删除行
filterData // 表格筛选内容
filterMethod // 表格内容筛选方法
filterResetrMethod // 表格内容筛选重置方法
备注：暂时运用到的就是这些，持续更新
常见问题列表****
1. 问题描述：渲染器中 input 和 $input 有什么区别？
HTML input 和 vxe-input
2. 问题描述：xe-utils 和表格是属于两个不同的库，仅仅只是依赖关系，在项目中使用工具类的相关方法
import XEUtils from 'xe-utils'
// 可以直接 import 使用也可以挂载 vue 实例中
Vue.prototype.$utils = XEUtils
3. 问题描述：关于 table 和 grid 的区别
vxe-table 基础表格：标签方式调用，用于静态列
vxe-grid 高级表格：JSON方式调用，全动态方式，集成 vxe-table、vxe-toolbar、vxe-pager 于一体的全功能高级表格
4. 问题描述：关于 columnIndex、columnIndex、columnIndex、rowIndex、rowIndex、_rowIndex 的区别
表头：
column：列配置对象
columnIndex：相对于 columns 中的索引
$columnIndex：相对于可视区渲染中的列索引（也就是说和实际渲染 th 相对应）
_columnIndex：相对于当前表格列的索引
单元格：
row：行数据对象
rowIndex：相对于 data 中的索引
$rowIndex：相对于可视区渲染中的行索引（也就是说和实际渲染 tr 相对应）
_rowIndex：相对于当前表格数据的索引（比如排序后、筛选之后等的相对索引）
column：列配置对象
columnIndex：相对于 columns 中的索引
$columnIndex：相对于可视区渲染中的列索引（也就是说和实际渲染 th 相对应）
_columnIndex：相对于当前表格列的索引
表尾：
$rowIndex：相对于 footerData 中的索引
items：行的数据集
itemIndex：行的数据集中项索引（相对于 items 的索引）
column：列配置对象
columnIndex：相对于 columns 中的索引
_columnIndex：相对于当前表格列的索引
5. 问题描述：表格支持哪些可编辑列渲染
默认支持原生的 input、select、textarea 可编辑列渲染，也支持高级的 select、$textarea 可编辑列渲染，你可以任意选择使用自行封装的组件或者第三
方组件库都是可以集成渲染的
