在el-dialog中使用el-tabs 时,使所有的选项高度一致

 在el-dialog 弹窗中使用el-tabs， 切换选项卡时窗口高度会乱蹦，导致弹窗按钮到处跑。

定义一个模板，然后通过默认打开第一个选项卡的高度，重新设置el-tabs高度。更改css样式使选项卡撑开

 

<template>

  <el-tabs @tab-change="tabchange" :style="'height:' + autoheight + 'px'">

    <slot></slot>

  </el-tabs>

</template>



<script>




export default {



  emits: ["tab-change"],

  data() {

    return {

      autoheight: null

    };

  },

  methods: {

    tabchange() {

      if (this.autoheight == null)

        this.autoheight = this.$el.offsetHeight;

      this.$emit("tab-change");

    },



  },

};

</script>

<style>

.el-tabs__content {

  height: calc(100% - 36px);

}



.el-tab-pane {

  height: 100%;

}

</style>