I18n多国语版本中，切换语言时e-tabs当前选项卡的定位条位置不准确，如何解决呢？

[st14160]

当切换按钮的语言后，由于文字数量发生改版，按钮宽度变化，被选中的按钮下方的指示线定位不准确。

中文：

英文：

[st14160]

目前找到一个解决办法，是监听切换语言时，重新调整DOM元素的样式。但这个方法是直接操作了DOM，不推荐。 哪位大神有更合理的办法呢？

以下是目前找到的方法： watch： watch: { 'user.language'() { this.resetTabActivePosition(this.$refs.tabs.$el); } },

methods： `methods: { resetTabActivePosition($el) {

  setTimeout(() => {

    var activeEl = $el.querySelector('.el-tabs__item.is-active');

    var lineEl = $el.querySelector('.el-tabs__active-bar');

    var style = getComputedStyle(activeEl);

    var pl = style.paddingLeft.match(/\d+/)[0] * 1;

    var pr = style.paddingRight.match(/\d+/)[0] * 1;

    var w = style.width.match(/\d+/)[0] * 1;

    lineEl.style.transform = 'translateX(' + (activeEl.offsetLeft + pl) + 'px)';

    lineEl.style.width = (w - pl - pr) + 'px';

  }, 100);

},

}`

组件加上ref <el-tabs ref="tabs" v-model="activeName" @tab-click="tabsClick">

[chengkai2022]

切换语言后，局部重新渲染这个tabs，我觉得ui应该会自己适配吧，我没试过，操作dom和修改样式应该是不可取的方法

[oneyoung19]

在 el-tabs 组件提供了calcPaneInstances这个方法。

设置其参数为 true，可以强制重新渲染。

假设给 el-tabs 设置了 ref 为 tabs，那么可以在watch中监听语言：

lang: {
   handler (lang) {
      if (this.$refs.tabs) {
         this.$refs.tabs.calcPaneInstances(true)
      }
  },
  immediate: true
}