添加了scroll:{y}属性的表格，筛选结果为空时横向滚动条消失

[arika163]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.6.5

Environment

windows10@1909,chrome@81.0.4044.122,vue@2.6.11

Reproduction link

Steps to reproduce

对demo中的column8进行筛选

What is expected?

筛选结果为空时，横向滚动条依然保留，用户可以移会原先位置，把筛选清除

What is actually happening?

一旦筛选，横向滚动条消失，且自动向左滚动到极限位置，这会导致用户无法重置筛选，只要用户不刷新页面，就再也无法看到数据

---

考虑加个js，表空的时候把表头的margin-bottom去掉？

[arika163]

实践发现用js强行展示滚动条依然无效，我的表格元数据是每隔5秒重新获取一次的，写入表格会触发滚动条自动向左滚动，体验非常差

[arika163]

几天都没人理我，无奈自己想出了hack办法，供参考：

  mounted() {
    // 首先我们需要一个用于查找组件的深度优先遍历算法
    const depthFirstSearch = (node:any, discriminant:any) => {
      if(discriminant(node)) {
        return node
      } else if(node.$children.length > 0) {
        let i = 0
        let result = null
        while(i < node.$children.length) {
          const find:any = depthFirstSearch(node.$children[i],discriminant)
          i++
          if(find) {
            result = find
            break // 剪枝操作
          }
        }
        return result
      } else {
        return null
      }
    }
    // 搜索table的一个组件，包含函数getLocalData（用于计算表格的currentDataSource）
    // 拦截getLocalData函数，将currentDataSource的最新length提交至当前组件
    const component1 = depthFirstSearch(this.$refs.table,(node:any) => node.getLocalData)
    const getLocalData = component1.getLocalData
    component1.getLocalData = (...args:any) => {
      const result = getLocalData.apply(component1,args)
      this.currentDataSourceLength = result.length
      return result
    }
    // 搜索table的一个组件，包含函数resetScrollX（用于data更新空数据时将表格的scrollLeft归零）
    // 拆卸该组件用于重置scrollLeft的watcher，从而拦截表格在空数据时自动向左滚动的行为
    const component2 = depthFirstSearch(this.$refs.table,(node:any) => node.resetScrollX)
    component2._watchers.find((item:any) => item.expression === 'data').teardown()
  }

之后用currentDataSourceLength来compute table的scrollY就可以了，length是0的时候把scrollY改成undefined，这样就保留了滚动条。有更好的思路欢迎留言交流。

关联 #1414 #3566 #3565

[KunerRick]

横向滚动条被no-data区域挡住了，我这边的处理方式是设置no-data区域的背景色为透明，并设置pointer-events:none；

[Polaris-tl]

通过全局样式把滚动条弄出来就行了

.ant-table-placeholder {
  margin-top: 7px !important;
}

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.