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>