element-ui中el-table列文字超出部分省略加悬浮提示

当我们表格内文字过多时，它会自动换行显示，但是它改变了表格的行高，效果看起来有些不美观，所以我们把多余的字用悬浮显示。

 

更改：

:show-overflow-tooltip="true"//el-table字体长度过长，浮动显示

代码中添加

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :show-overflow-tooltip="true"//浮动提示
        >
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

　　

效果展示：

设置CSS效果

tooltip的类是el-tooltip__popper，所有设置一下CSS样式控制宽度就行了，css样式代码如下：

<style lang="css">
.el-tooltip__popper{

font-size: 14px;

max-width:50%;

backgroud: #68859a !important;  /*背景色　　!important优先级*/

} /*设置显示隐藏部分内容，按50%显示*/

</style>