element-ui裡的el-table是怎麼實現超出內容省略並加tooltip提示的?
阿新 • • 發佈:2020-12-08
效果圖
效果描述:
只有超出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也可以實現,具體看需求