element table文本超出隐藏

 方案一：

<template>
  <div class="box">
    <el-table
      :data="rightList"
      :header-cell-style="{
        'background-color': '#04112d',
        height: '90px',
        padding: '0',
        'text-align': 'center',
        'border-bottom': '1px solid #454c69',
        'font-size': '26px',
        color: '#3180FB',
        'font-family': 'Adobe Heiti Std',
        'font-weight': 'normal'
      }"
      :row-style="{
        'background-color': '#04112d',
        'font-size': '21px',
        color: ' #97c0fc',
        cursor: 'pointer'
      }"
      :cell-style="{
        height: '90px',
        'text-align': 'center',
        'line-height': '40px',
        padding: '0',
        'border-bottom': '0px',
        'font-family': 'MicrosoftYaHei',
        'font-weight': 400,
        color: '#ffffff',
        'line-height': 'auto',
        'font-size': '21px'
      }"
      height="560"
      width="2123"
      ref="table"
    >
      <el-table-column type="index" label="序号" width="100px">
      </el-table-column>
      <el-table-column prop="time" label="问题清单" width="200px">
        <template slot-scope="scope">
          <!-- tips悬浮提示 -->
          <el-tooltip
            placement="top"
            v-model="scope.row.showTooltip"
            :open-delay="100"
            effect="dark"
            :disabled="!scope.row.showTooltip"
          >
            <div slot="content">{{ scope.row.wtqd }}</div>
            <div @mouseenter="showTips($event, scope.row)" class="myNote">
              {{ scope.row.wtqd }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="river" label="出处">
        <template slot-scope="scope">
          <div>
            {{ scope.row.cc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="site" label="责任单位">
        <template slot-scope="scope">
          <div>
            {{ scope.row.zrdw }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="location" label="责任人">
        <template slot-scope="scope">
          <div>
            {{ scope.row.zrr }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="contorlType" label="整改措施">
        <div>
          {{ "--" || "暂无" }}
        </div>
      </el-table-column>
      <el-table-column prop="waterType" label="整改时间">
        <template slot-scope="scope">
          <div class="fontRed">
            {{ "2021-10-31" || "暂无" }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="huaxue" label="备注">
        <template slot-scope="scope">
          <!-- tips悬浮提示 -->
          <el-tooltip
            placement="top"
            v-model="scope.row.showTooltip2"
            :open-delay="100"
            effect="dark"
            :disabled="!scope.row.showTooltip2"
          >
            <div slot="content">{{ scope.row.bz }}</div>
            <div @mouseenter="showTips($event, scope.row)" class="myNote">
              {{ scope.row.bz }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rightList: [
        {
          id: 1,
          wtqd:
            "卡岔河一级支流腰保守沟水质为劣五类（总磷0.69）主要由于①老边村东侧排污渠汇入（COD61 总磷2.08），河道旁有猪舍排口；②老边东屯支沟汇入（COD2030 氨氮233 总磷87.5），水体颜色深，水质较差。",
          cc: "伊通河8月份简报",
          zrdw: "榆树市政府",
          zrr: "郭大伟",
          zgsj: "2021年10月",
          bz: "3-8月均存在该问题"
        },
        {
          id: 2,
          wtqd:
            "卡岔河一级支流长兴沟水质为劣五类（氨氮34.9 总磷4.80）主要由于①粪污污染：前兴隆沟南断面水质为劣五类(氨氮11.5 总磷1.25)，河道的底泥为黄色且伴有恶臭味；②后卡路东支流旁有畜禽粪便堆放（总磷0.66），水体浑浊，水质较差。        ",
          cc: "伊通河8月份简报",
          zrdw: "榆树市政府",
          zrr: "张青远/魏  坤",
          zgsj: "已完成",
          bz: "3-8月均存在该问题"
        },
        {
          id: 3,
          wtqd:
            "卡岔河一级支流黑林河水质为劣五类（氨氮3.96 总磷1.17）主要由于①舒兰来水超标：三梁村东支流（氨氮2.10 总磷0.77）， 北二道岗子东支流（氨氮41.5 总磷4.30）；②西老营咀子南支流水质为劣五类（氨氮4.65 总磷2.67），水体浑浊，水质较差。",
          cc: "伊通河8月份简报",
          zrdw: "榆树市政府",
          zrr: "郭大伟",
          zgsj: "2021年10月",
          bz: "3月、4月、5月、7月、8月均存在该问题"
        },
        {
          id: 4,
          wtqd: "于家镇污水处理厂排水超标（COD104 总磷0.73）。",
          cc: "伊通河8月份简报",
          zrdw: "榆树市政府",
          zrr: "王志远",
          zgsj: '"立整立改长期坚持"',
          bz: "4月、6月、7月、8月均存在该问题"
        },
        {
          id: 5,
          wtqd: "弓棚镇污水处理厂排水超标（COD100）。",
          cc: "伊通河8月份简报",
          zrdw: "榆树市政府",
          zrr: "于洪志",
          zgsj: '"立整立改长期坚持"',
          bz: "4月、6月、7月、8月均存在该问题"
        },
        {
          id: 6,
          wtqd:
            "松花江一级支流解放河水质为劣五类（总磷0.56），主要由于上游来水光明桥断面水质为劣五类（COD24 总磷0.77），水体浑浊。",
          cc: "伊通河8月份简报",
          zrdw: "榆树市政府",
          zrr: "李保会/姜洪涛",
          zgsj: '"立整立改长期坚持"',
          bz: ""
        },
        {
          id: 7,
          wtqd:
            "沐石河一级支流八家子河水质劣五类（总磷0.55），主要由于①八家子河2号支流水质劣五类（COD41 氨氮4.45 总磷1.26）；②八家子河3号支流水质劣五类（总磷0.42）；③柴福林水库下游断面水质劣五类（COD56)。可能是雨水冲刷导致。",
          cc: "伊通河8月份简报",
          zrdw: "九台区城子街街道",
          zrr: "王庶民",
          zgsj: '"立整立改"',
          bz: ""
        },
        {
          id: 8,
          wtqd:
            "沐石河一级支流城子街河水质劣五类（COD42），主要由于①上游来水东边沿屯水质为劣五类（COD47 总磷0.58）；②城子街镇附近有一施工现场，下游水质为劣五类（COD41 总磷0.56）。",
          cc: "伊通河8月份简报",
          zrdw: "九台区城子街街道",
          zrr: "王庶民",
          zgsj: '"立整立改"',
          bz: ""
        },
        {
          id: 9,
          wtqd:
            "沐石河一级支流康家河（总磷0.70），主要由于①康家河支流1汇入（总磷0.44）；②康家河支流2汇入（氨氮2.02 总磷0.82）。可能是雨水冲刷导致。",
          cc: "伊通河8月份简报",
          zrdw: "九台区城子街街道",
          zrr: "王庶民",
          zgsj: '"立整立改"',
          bz: ""
        },
        {
          id: 10,
          wtqd:
            "沐石河一级支流铜匠沟水质为劣五类（总磷0.80），主要由于①铜匠沟南侧2支流（总磷0.74），水质浑浊，上游未发现其他点源污染，②铜匠沟南侧支流（总磷0.53）上游有垃圾堆放；③铜匠沟南侧4支流（总磷0.57）一污水排口存在排水痕迹。",
          cc: "伊通河8月份简报",
          zrdw: "九台区城子街街道",
          zrr: "王庶民",
          zgsj: '"立整立改"',
          bz: "6-8月均存在该问题"
        }
      ]
    };
  },
  methods: {
    showTips(obj, row) {
      /*obj为鼠标移入时的事件对象*/
      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement("div");
      TemporaryTag.innerText = row.rwmb; // 需填写对应得字段
      TemporaryTag.className = "getTextWidth";
      document.querySelector("body").appendChild(TemporaryTag);
      let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
      document.querySelector(".getTextWidth").remove();

      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;

      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/

      currentWidth <= 2 * cellWidth
        ? (row.showTooltip = false)
        : (row.showTooltip = true);
    },
    showTips2(obj, row) {
      /*obj为鼠标移入时的事件对象*/
      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement("div");
      TemporaryTag.innerText = row.cs; // 需填写对应得字段
      TemporaryTag.className = "getTextWidth";
      document.querySelector("body").appendChild(TemporaryTag);
      let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
      document.querySelector(".getTextWidth").remove();

      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;

      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/

      currentWidth <= 2 * cellWidth
        ? (row.showTooltip2 = false)
        : (row.showTooltip2 = true);
    }
  }
};
</script>

<style>
.myNote{
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}
.box >>> .el-tooltip__popper {
    position: absolute;
    border-radius: 4px;
    padding: 10px;
    z-index: 2000;
    font-size: 12px;
    line-height: 1.2;
    max-width: 200px !important;
    word-wrap: break-word;
}
</style>

方案二：

<el-tooltip effect="dark" :content="scope.row.rwmb" placement="top">
    <span class="myNote">{{ scope.row.rwmb }}</span>
</el-tooltip>