專案使用vue+element-ui

tooltip-effect="light" <el-table>需要設定這個屬性, 然後在需要使用的<el-table-column>中使用 show-overflow-tooltip="true" 既能實現效果

<!--表格資料及操作-->
    <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="light">
      <!--勾選框-->
      <el-table-column type="selection" width="55">
      </el-table-column>
      <!--索引-->
      <el-table-column type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180" sortable>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="編輯" width="100">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini">編輯</el-button>
        </template>
      </el-table-column>
      <el-table-column label="刪除" width="100">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
 

顯示效果

有兩點需要注意：

①el-table標籤中需要新增tooltip-effect="dark"屬性

②el-table-column標籤中需要新增show-overflow-tooltip屬性

預設情況下若內容過多會折行顯示，若需要單行顯示可以使用show-overflow-tooltip屬性，它接受一個Boolean，為true時多餘的內容會在 hover 時以 tooltip 的形式顯示出來。