解决tableel-tooltip内容过多闪烁问题

 <el-table-column
              prop="problemDesc"
              label="问题描述"
              min-width="95">
              <template slot-scope="scope">
                <el-tooltip
                  v-if="scope.row.problemDesc"
                  popper-class="workorder-reason-popper"
                  effect="dark"
                  :content="scope.row.problemDesc"
                  placement="top"
                  :disabled="isShowTooltip">
                  <div
                    @mouseover="onMouseOver(scope.row.problemDesc )"
                    style="overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;">
                    <span :ref="scope.row.problemDesc ">{{ scope.row.problemDesc }}</span>
                  </div>
                </el-tooltip>
                <span v-else></span>
              </template>
            </el-table-column>
            isShowTooltip:false
 onMouseOver(str) {
      // 内容超出,显示文字提示内容
      let tag = this.$refs[str];
      let parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度
      let contentWidth = tag.offsetWidth; // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth;
    },

css
.workorder-reason-popper{
  max-width: 300px;
  overflow: auto;
  max-height: 300px;
 
  .popper__arrow{
    display: none !important;
  }
  .el-tooltip__popper[x-placement^=top]{
    margin-bottom: 0 !important;
  }
}

你可能感兴趣的:(vue.js,json,javascript)