二次封装el-tooltip组件，文本溢出时才显示

<template>
  <span>
    <el-tooltip
      v-if="text.length > maxNum"
      class="item"
      effect="dark"
      :content="text"
      placement="top"
    >
      <span>{{ text.substring(0, maxNum) + "..." }}</span>
    </el-tooltip>
    <span v-else>{{ text | filterEmptyTable }}</span>
  </span>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
    maxNum: {
      type: Number,
      default: 15, 
    },
  },
};
</script>

使用

import maxText from '@/components/kwm-maxText'

  <div class="li">
   <div class="li-text">老师身份:</div>
   <maxText :text="teacher.teacherIdentity" :max-num="10" />
  </div>

Tip：tooltip必须设置高度；使用时max-num属性可修改默认超过某个数字后溢出显示...并提示tooltip