elementui的table列超出隐藏tooltip悬浮显示问题
作者：LLL_LH
这篇文章主要介绍了elementui的table列超出隐藏tooltip悬浮显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
elementui的table列超出隐藏tooltip悬浮显示
<el-table-column label="内容" show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.desc}}
</template>
</el-table-column>当表格中的某些内容过长会导致表格变形，所以可以只显示一行，超出的部分隐藏，鼠标滑过时显示所有内容，
如上所示，添加show-overflow-tooltip属性。
注意：
显示的内容只能包裹在行内元素里，或者不添加，不能包裹在块级元素里面
el-table文字超出隐藏；el-table表格文字一行展示，超出隐藏，多余的内容会在 hover时显示
el-table文字 默认情况下若内容过多会折行显示，若需要单行显示可以给el-table-column使用show-overflow-tooltip属性，
它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
给el-table-column添加show-overflow-tooltip
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" show-overflow-tooltip label="地址">
</el-table-column>
</el-table>
</template><script>
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。