关于element-ui国际化label超出换行问题

做国际化的时候遇到这个问题 ，默认开发大家都以中文来设置label-width，国际化翻译后就会导致字符太长出现换行的情况，下面以element默认size来举例

默认size的样式为line-height:40px ;换行就会出现倍增

解决方案：

1）监听dom node 节点变化，肯定有人疑惑为什么要这么做；

什么是MutationObserver ，想了解的同学可以去看看；

因为vue+element在开发过程中会有很多未来元素（现在不存在但未来或许存在）

const observeDom = new MutationObserver((mutations, observe) => {
   this.$nextTick(() => {
   this.resetLabel();
  });
});
observeDom.observe(document.getElementById('toTop'), { childList: true, subtree: true });

2）

匹配现有页面的所有label高度对比是初始化的N倍，设置不同的line-height

实例以36为基数，大家可以自行设置contrastHeightlist枚举

  Vue.prototype.resetLabel = () => {
    const contrastHeightlist = [{number: 36, height: '36px'}, {number: 72, height: '20px'}, {number: 108, height: '13px'}, {number: 144, height: '10px'}];
    // 初始化height36基数
    (Array.from($('.el-form-item__label')) || []).forEach(ele => {
      const currenNOde = $(ele)[0];
      // 初始化line-height 和font-szie
      currenNOde.style.cssText += ';line-height:36px!important';
      $(ele).find('span').css('cssText', 'font-size:14px!important');
      // 重新设置
      let setting = contrastHeightlist.find(v => { return v.number === currenEle.offsetHeight; });
      currenNOde.style.cssText += `;line-height:${currenNOde.offsetHeight > 144 ? '10px' : (setting ? setting.height : '36px')}!important;`;
    });
  }

最终成果

今天的分享就到这里，大家有什么疑问的地方可以在下面提问；

ps：分享不易，喜欢的同学可以点赞收藏支持鼓励下哈