第一種:javascript
<Tooltip placement="bottom"> <Button>Multiple lines</Button> <div slot="content" style="white-space: normal;"> A balloon appears when the mouse passes over this text </div> </Tooltip>
第二種: java
render: (h, params) => { let texts = ''; //表格列顯示文字 if (params.row.content !== null) { if (params.row.content.length > 6) { //進行截取列顯示字數 texts = params.row.content.substring(0, 6) + "....."; } else { texts = params.row.content; } } return h('div', [ h('Tooltip', { props: { placement: 'bottom', // transfer: true //是否將彈層放置於 body 內 }, style: { cursor: 'pointer', } }, [ //這個中括號表示是Tooltip標籤的子標籤 texts, //表格列顯示文字 h('div', { slot: 'content', style: { whiteSpace: 'normal' } }, params.row.content //整個的信息即氣泡內文字 ) ]) ]); }
顯示結果以下:app