element-ui中el-table列⽂字超出部分省略加悬浮提⽰
当我们表格内⽂字过多时，它会⾃动换⾏显⽰，但是它改变了表格的⾏⾼，效果看起来有些不美观，所以我们把多余的字⽤悬浮显⽰。
更改：
:show-overflow-tooltip="true"//el-table字体长度过长，浮动显⽰
代码中添加
<template>
<el-table
:data="tableData"
>
<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"
label="地址"
:show-overflow-tooltip="true"//浮动提⽰
>
</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',css特效文字
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1516 弄'
}]
}
}
}
</script>
效果展⽰：
设置CSS效果
tooltip的类是el-tooltip__popper，所有设置⼀下CSS样式控制宽度就⾏了，css样式代码如下：<style lang="css">
.el-tooltip__popper{
font-size: 14px;
max-width:50%;
backgroud: #68859a !important;  /*背景⾊  !important优先级*/
} /*设置显⽰隐藏部分内容，按50%显⽰*/
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。