elementui-table组件列表中的tooltip内容过长超出屏幕换行显示
在Element UI的Table组件中使用Tooltip来显示过长的内容时,可以利用Table的show-overflow-tooltip
属性。这个属性会在单元格内容过长时自动显示Tooltip。
下面是一个简单的例子,展示如何在Element UI的Table组件中使用Tooltip:
<template>
<el-table
:data="tableData"
style="width: 100%"
max-height="250"
show-header
>
<el-table-column
prop="date"
label="日期"
width="180"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip
>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号'
},
// ...更多数据
]
}
}
}
</script>
在这个例子中,我们为Table的每一列添加了show-overflow-tooltip
属性。当单元格内容过长时,就会自动显示Tooltip。这样用户可以通过悬停来查看完整内容,而不会破坏表格的可读性。
评论已关闭