Element Plus的el-table表格中单元格内容过多显示省略号

1、el-table表格中内容超出单元格的宽度会自动换行，会使整个表格看起来显得不太美观，此时可以使用el-table-column 自带的 show-overflow-tooltip="true"  属性来设置，可以使超出单元格宽度的内容变成省略号，而且鼠标放上去会提示单元格中原本有的全部的内容，但是这种方法只能查看，无法复制完整的内容。

<el-table-column 
    prop="address" 
    label="地址" 
    show-overflow-tooltip="true" 
    min-width="100">

</el-table-column>

3、如果想要实现超出单元格内容既能够显示出完整的内容，又想要能够复制全部内容，可以使用插槽，设置el-tooltip来提示，如下图所示：

<el-table-column prop="address" label="地址" min-width="100">
    <template #default="scope">
        //content绑定的是单元格中对应的值
        <el-tooltip
            :content="scope.row.address"
            raw-content
            placement="top-start"
            v-if="scope.row.address"
        >
          //判断单元格中有值，并且值的长度小于等于15，显示单元格中的值
          <span v-if="scope.row.address && scope.row.address.length <= 15">
               {{scope.row.address}}
          </span>
          //如果单元格中有值，并且值得长度大于15，便使用substr截取0-15的内容显示，后面的变成省略号
          <span v-if="scope.row.address&& scope.row.address.length > 15">                
               {{scope.row.address.substr(0, 15) + "..."}}
          </span>
        </el-tooltip>
        <span v-else-if="scope.row.address== null"> NA </span>
    </template>
</el-table-column>

但有时候可能因为电脑分辨率的原因，单元格中所截取的显示的内容会不太合适，也可以手动写一个css样式，来实现溢出显示省略号

:deep(table tr span.el-tooltip__trigger) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}