element表格文本超出显示省略号，鼠标悬停出现完整文字提示

1.表格文字超出部分省略号显示。在表格的样式中添加CSS样式，如下，可直接粘贴：

.table1 ::v-deep .el-table__body-wrapper .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 这是头部文字溢出显示省略号
.table1 /deep/ .el-table th > .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

2.鼠标悬停单元格出现提示（第一种方法）

show-overflow-tooltip 属性设置为 true 来启用文本溢出时的提示效果，

 tooltip-effect 属性为 'dark' 或 'light' 来指定信息提示的样式，默认黑色，可不写此句

这样当鼠标悬停在省略的文字上时，会显示完整的信息提示。

  <el-table-column
    prop="name"
    label="姓名"
    show-overflow-tooltip
    :tooltip-effect="'dark'"
  >
  </el-table-column>
 

2.鼠标悬停单元格出现提示（第二种方法）

使用 Element UI 的工具提示组件<el-tooltip>，用于在鼠标悬停时显示提示框。通过 :content 属性，将提示框的内容设置为当前行的 name 属性的值。placement="top"：这是工具提示的位置，设置为 "top" 表示在鼠标悬停时在上方显示提示框。

 <div>{{ scope.row.name }}</div>//在提示框中显示的文本内容

 <el-table-column prop="name" label="名字" width="180">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.name" placement="top">
            <div>{{ scope.row.name }}</div>
          </el-tooltip>
        </template>
      </el-table-column>