vxe-table 获取滚动高度、还原滚动条位置、展开树形表格

一、场景说明

1. 点击按钮会打开抽屉，在抽屉内进行某些操作，关闭抽屉后会调接口刷新表格数据。
2. 刷新数据后，树形表格全部展开，且滚动条定位到点击按钮时的位置。

二、代码实现

<template>
  <div class="box">
    <vxe-button @click="openDrawer">新增</vxe-button>

    <vxe-table
      :data="tableData"
      max-height="400px"
      class="table"
      ref="xTable"
      :tree-config="{ children: 'children', expandAll: true }"
    >
      <vxe-column field="name" title="Name" tree-node></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>

    <a-drawer title="抽屉" :visible="visible" @close="onClose">
      <p>假设进行了一些操作，关闭抽屉后会刷新表格数据。</p>
      <p>刷新表格数据后，需要将滚动条定位到打开抽屉前的位置。</p>
    </a-drawer>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      visible: false,
      tableData: [
        {
    
    
          name:'一班',
          children: [
            {
    
     id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
            {
    
     id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
            {
    
     id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
            {
    
     id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
            {
    
     id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
            {
    
     id: 10006, name: 'Test6', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
            {
    
     id: 10007, name: 'Test7', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
            {
    
     id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
          ]
        },
        {
    
    
          name:'二班',
          children: [
            {
    
     id: 10009, name: 'Test9', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
            {
    
     id: 10010, name: 'Test10', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
            {
    
     id: 10011, name: 'Test11', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
            {
    
     id: 10012, name: 'Test12', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
            {
    
     id: 10013, name: 'Test13', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
            {
    
     id: 10014, name: 'Test14', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
            {
    
     id: 10015, name: 'Test15', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
            {
    
     id: 10016, name: 'Test16', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
          ]
        },
      ],
      scrollHeight: 0
    }
  },
  methods: {
    
    
    onClose() {
    
    
      // 1.关闭抽屉
      this.visible = false
      // 2.调接口刷新表格数据，此处省略
      // 3.展开树形表格
      setTimeout(() => {
    
    
        this.$refs.xTable.setAllTreeExpand(true)
        // 4.还原滚动条位置:定位到勾选行
        this.$nextTick(() => {
    
    
          this.$refs.xTable.scrollTo(0, this.scrollHeight)
        })
      }, 500)

    },
    openDrawer() {
    
    
      // 1.记录滚动条位置
      let {
    
     scrollTop } = this.$refs.xTable.getScroll()
      this.scrollHeight = scrollTop
      // 2.打开抽屉
      this.visible = true
    }


  }
}
</script>

<style>
.box {
    
    
  margin: 100px;
}

.table {
    
    
  margin: 5px 0;
}
</style>

三、关键代码

1. 记录滚动条位置

let {
    
     scrollTop } = this.$refs.xTable.getScroll()
this.scrollHeight = scrollTop

2. 还原滚动条位置（可能需要配合延时器）

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

3. 展开树形表格（可能需要配合延时器）

this.$refs.xTable.setAllTreeExpand(true)