vxe-table问题记录

一、表格分页跳转后滚动条回到顶部

问题： 官方文档（vxetable.cn/v3/#/grid/a… 中提供了三种方式。

但使用下列方法后均无法实现效果。

this.$refs.xTable.clearScroll()
this.$refs.xTable.scrollTo(0,0)

解决：

绑定vxe-table的scroll事件

<vxe-table
  ref="xTable"      
  @scroll="onScroll"
>
 onScroll() {
  // 参考: 滚动条滚动到底部
  const el = this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper')
  if (el) {
    el.scrollTop = el.scrollHeight
  }
}

调用表格清除滚动方法后返回Promise对象，在then中处理定义一个控制表格滚动开关的变量。

this.$refs.xTable.clearScroll().then(() => {
    this.tableScrollSwitch = true;
});

将触发滚动事件优化，避免正常滚动不能用

    onScroll() {
      if (this.tableScrollSwitch) {
        const el = this.$refs.xTable.$el.querySelector(".vxe-table--body-wrapper");
        if (el) {
         //滚动条回到顶部
          el.scrollTop = 0;
          el.scrollLeft = 0;
        }
        this.tableScrollSwitch = false;
      }
    },

二、表格导出后 以 0 开头的数据会被删除

解决 在需要导出的列上添加 cell-type="string" 设置类型为字符串

    <vxe-table-column
          field="ANTITUMOR_NUM"
          cell-type="string"
          title="抗肿瘤药物品规数">
    </vxe-table-column>

三、表格后端排序、前端分页错乱问题

解决 需要设置 :sort-config="{ remote: true }"

四、表格分页序号根据当前页码生成

解决 需要设置

  :seq-config="{
          startIndex: (pageSet.currentPage - 1) * pageSet.pageSize,
  }"