excel-differ是游戏测试常用的测试工具。在有些业务场景下，excel-diff的结果可能需要通过web展示。Vue技术栈下的vxe-table表格组件能够支持大量数据的展示，因此可以用vxe-table展示excel-diff的结果。
excel-diff的算法本身，先前的文章已有讲解，在结果展示上会按file->sheet来分。为了让结果展示更加人性化，需要对表格的样式进行区分。在vxe-table的api列表中，我们可以通过cell-class-name的回调函数指定每个单元格的样式。针对excel-diff的结果可以这样设计样式：
- 新增行/列：背景浅绿色
- 删除行/列：背景浅红色
- 重复行/列：背景浅灰色
- 移动行/列：背景浅橙色
- 修改单元格：背景浅黄色，字体红色
用户在实际查看excel-diff结果时，通常需要自动滚动到对应的位置。vxe-table提供了如下api支持滚动：
scrollToRow(row, fieldOrColumn)：滚动到对应的行或列（注意field不是展示出来的表头）scrollToColumn(fieldOrColumn)：滚动到对应的列
获取行、列的实例，可以用这些方法：
getRowById(rowid)：根据行的唯一主键（string）获取行getColumns()：获取columns列表getColumnById(colid)：根据列的唯一主键（string）获取列getColumnByField(field)：根据列的字段名获取列
需要注意的是，滚动后，默认滚动到的行会置顶，列会放到最左边，观感不是很好。因此可以做以下的优化：
- 当处在较为靠左的列，直接滚动到最左边
- 当处在较为靠右的列，直接滚动到最右边
- 其他情况下，滚动到前面隔2个的列
- 滚动到的行也可做类似处理，这样大部分选中数据都会显示在上面靠左的位置，基本满足观感需求
针对大的表，可能会出现性能问题。性能的优化tips有以下几个：
- 针对excel数据本身，过滤空表头、空行等无效数据，保证只有有效数据参与diff计算
- 表格需要设定
scroll-x与scroll-y虚拟滚动设置，尽量一次性不渲染太多内容 - 用Object.freeze冻结excel数据、diff结果相关的object，因为这些object本身就应当是immutable的，用Object.freeze可避免vue做底层各属性的getter/setter绑定
- 对于每个单元格取
cell-class-name，也需要预先computed + Object.freeze一个缓存data，使得回调函数判断class-name直接可以在其中取字段来判断，这样逻辑复杂度会小 - 数据预处理中，如果要用到循环逻辑，可考虑普通的for循环代替forEach