Vue3点击事件实现使table中最后一列可编辑的同时，表格中的滚动条自动滚动到该列位置

这个小功能我大概花了小半天的时间才实现，所以无比痛恨给我提这个需求的人，还好最后没有放弃，谨以此博客作为记录我被迫走上前端之路的第n天！！！
代码来自项目里面的一部分，所以可能有点乱#@&

点击事件：
这里当isEdit值为true时显示保存，否则显示历史回溯

 <div class="import" @click="historyBack"> {{ isEdit ? '保存' : '历史回溯' }}</div>

表格：

• 下述代码中，id="tableRef"是一定要设置的，tableRef可自定义，不用跟我一样，但是js里面用的时候要保持同步

 <Table :columns="columns" :data-source="dataSource" :pagination="false" :bordered="true"
        :scroll="{ x: 'max-content', y: 'calc(100vh - 200px)' }" rowKey="info_date" id="tableRef">
        <template #bodyCell="{ column, text, index }">
          <!--如果该列为deviation_cause，则进行自定义设置-->
          <template v-if="column.dataIndex == 'deviation_cause'">
          	<!--如果isEdit为true，显示文本输入框，否则显示text-->
            <span v-if="isEdit">
              <Input.TextArea v-model:value="dataSource[index][column.dataIndex]" />
            </span>
            <div v-else>{{ text }}</div>
          </template>
        </template>
      </Table>

js部分实现：

const isEdit = ref(false); // 定义并初始化isEdit
// 历史回溯
const historyBack = () => {
  isEdit.value = !isEdit.value; // 点击事件发生，isEdit值随之变化
  // 这一部分就是实现滚动条滑倒最后的核心代码
  nextTick(() => {
    const table = document.getElementById('tableRef'); //定位到表格
    if (table) {
      const scrollableArea = table.querySelector('.ant-table-body'); // 组件用的是antd的表格
      if (scrollableArea) {
        scrollableArea.scrollLeft = scrollableArea.scrollWidth; //滚动条滚动到最右侧
      }
    }
  });
}