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>