1. 程式人生 > 其它 >element-ui裡的el-table是怎麼實現超出內容省略並加tooltip提示的?

element-ui裡的el-table是怎麼實現超出內容省略並加tooltip提示的?

效果圖
在這裡插入圖片描述
效果描述:
只有超出10個字的標題才會顯示el-tooltip,沒有超出的不會顯示
思路:表格中的資料超出10個字顯示隱藏,用hover效果顯示el-tooltip並顯示全部的文字
程式碼:

     <el-table-column label="標題" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.title"
              placement="bottom"
              popper-class="tips"
            >
              <span v-if="scope.row.title.length >= 10">{{
                scope.row.title
              }}</span>
            </el-tooltip>
            <span v-if="scope.row.title.length < 10">{{
              scope.row.title
            }}</span>
          </template>
     </el-table-column>
/deep/.el-table td {
    border-bottom: 1px solid #2E2C3D;
    background: #242133;

    .cell span {
        display: block;
        width: 10em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

**提示:**把cell樣式裡面的em單位換成width也可以實現,具體看需求