vue 하이퍼텍스트 캡처, 부유 상자 알림 구현

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는 초장기 텍스트 캡처를 실현합니다. 띄우기 프레임 힌트는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.

좋은 웹페이지 즐겨찾기