vue 하이퍼텍스트 캡처, 부유 상자 알림 구현
스타일:
<style>
.overflow-table .ivu-table-cell{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
table:기본 코드:
{
title: ' ',
key: 'ucCode',
render: (h, params) => {
return h('span', {
domProps: {
title: params.row.ucCode
}
}, params.row.ucCode)
}
}
추가 정보: 프런트엔드에서 ElementUI + Vue table 헤더를 사용하여 tooltip 띄우기 프롬프트 상자 추가잔말 말고 코드 봐~
<el-table
empty-text=“ …”
:data=“contentList”
style=“width: 100%”
@sort-change=“sort”
class=“pro-table-item”
tooltip-effect=“dark”
<template v-for="(item,index) in titleList">
<el-table-column
v-if="index == '0'"
:prop="index.toString()"
:label="item"
sortable="custom"
min-width="120"
:render-header="renderHeader"
>
</el-table-column>
<el-table-column
v-else
:prop="index.toString()"
:label="item"
min-width="120"
:render-header="renderHeader"
show-overflow-tooltip
renderHeader(h, { column }) {
if(column.label.length>13) {
return (
{column.label}
)
} else {
return (
{column.label}
)
}
},
모든 시계 헤드에 tooltip을 띄우고 싶지 않습니다. 길이를 초과하고overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
이상의 이 vue는 초장기 텍스트 캡처를 실현합니다. 띄우기 프레임 힌트는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.