vue3中el-tab拖拽排序点击确认后重新渲染页面纯前端页面

在Vue3中，当使用Element UI库中的`el-tabs`组件并实现拖拽排序功能时，通常需要结合Vuex或者自定义事件来进行状态管理。当你允许用户通过点击确认按钮完成拖拽后的排序，并希望页面能够刷新显示新的顺序，可以按照以下步骤操作：

1. **数据存储**: 使用Vuex或`ref`在组件外部维护tabs数组的状态。例如，在Vuex store中创建一个tabs数组，并设置初始顺序。

// store.js 或者单文件组件的data部分
export const state = () => ({
  tabs: ['tab1', 'tab2', 'tab3']
});

2. **拖拽处理**: 在`el-tabs`的子组件上监听`@sort-change`事件，触发一个动作更新store中的tabs顺序。

<template>
  <el-tabs v-model="activeName" @sort-change="handleSortChange">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item">
      <!-- tab内容 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['tabs'])
  },
  methods: {
    handleSortChange(tabOrder) {
      this.$store.commit('updateTabOrder', tabOrder);
    }
  }
};
</script>

3. **状态同步**: 在`updateTabOrder`这个store动作中，修改`tabs`状态并触发视图更新。如果需要重新渲染整个页面，可以在`commit`之后加上`this.$forceUpdate()`。

// store.js
export const mutations = {
  updateTabOrder(state, newTabOrder) {
    state.tabs = newTabOrder;
    // 如果你想强制刷新页面
    this.$root.$forceUpdate();
  }
}

4. **点击确认按钮**: 当用户点击确认按钮后，你可以触发一个提交mutation的操作，比如`confirmSort`，调用`updateTabOrder`函数。

5. **相关问题--:**
- 用户如何触发确认按钮的事件？
- 如何避免在切换其他tab时意外触发排序？
- 是否有其他的优化策略，如只更新受影响的tabpanel？