vxe-table Get the scroll height, restore the scroll bar position, expand the tree table

1. Scenario description

1. Clicking the button will open the drawer, and perform certain operations in the drawer. After closing the drawer, the interface will be called to refresh the table data.
2. After the data is refreshed, the tree form is fully expanded, and the scroll bar is positioned at the position when the button is clicked.

2. Code implementation

<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>

3. Key code

1. record scrollbar position

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

2. Restore the position of the scroll bar (may need to cooperate with the delayer)

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

3. Expand the tree form (may need to cooperate with the delayer)

this.$refs.xTable.setAllTreeExpand(true)