在iview表格插入title提示

實現效果：當表格數據內容較多的時候，文本不換行，超出部分顯示為省略號的時候，鼠標移動到某個表格內容的時候，展示出全部內容，像title屬性一樣。

實現方法：

方法一：

直接用iview組件的屬性：tooltip。以tooltip組件顯示完整內容

方法二：

利用render函數實現。自定義渲染當前列，給其加上title屬性

代碼如下：

<template><div class="box"><Table :columns="columns" :data="tableData" height="350px"></Table></div> </template><script> export default {data() {return {columns: [{title: "物品",key: "title",ellipsis: true,// 方法一// tooltip: true,// 方法二render: (h, params) => {return h("div", [h("span",{attrs: {title: params.row.title,},},params.row.title),]);},},{title: "價格",key: "value",},],tableData: [{title: "薯片",value: 5,},{title:"零食大禮包：包含辣條（親嘴燒、衛龍）、純牛奶、喜之郎、QQ星、薯片、酸奶、餅干",value: 45,},{title: "可口可樂",value: 6,},{title: "蘋果手機",value: 5000,},{title: "香水",value: 300,},],};}, }; </script><style> .box {width: 300px; } </style>

效果：

方法一：

方法二：

總結

以上是生活随笔為你收集整理的在iview表格插入title提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。