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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
vue.js滚动条插件vue-scroll的基本用法2023-12-12
vue3项目打包与上线详细图文教程2023-12-12
vue3鼠标拖拽滑动效果实现demo2023-12-12
vue如何动态获取当前时间2023-12-12
element ui设置table自适应表格宽,不自动换行问题2023-12-12
vue中跨域以及sessionId不一致问题及解决2023-12-12
Vue中常见混淆用法汇总2023-12-12
vue axios sessionID每次请求都不同的原2023-12-12
美国设下计谋,用娘炮文化重塑日本,已影响至中国2021-11-19
时空伴随者是什么意思?时空伴随者介绍2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表2021-10-26
电脑版 - 返回首页
2006-2024 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
