elementUI底层只做了根据根据表格中单元格的宽度来控制是否显示气泡,加一个show-overflow-tooltip属性,当内容超出就显示气泡。传统的,如果我们要自定义一个气泡,这时候可能不太好精确的判断什么时候就内容超出了设置的minWidth,就显示气泡。
现在有一个需求,可以实现表格行固定高度,当超出高度,就显示气泡;并且气泡、单元格要保留原始格式。(出现气泡的方法,也适用于自定义气泡,超出宽度,恰到好处的显示气泡。)
先看一下效果图:
实现的代码:
结构部分:
<div style="margin:20px 0;">根据高度显示气泡,表格单元格显示原始格式</div>
<el-table
class="testHeightTip"
:data="tableData"
@cell-mouse-enter="handleCellMouseEnter"
style="width: 100%" border>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="序号"
align="center"
fixed="left"
width="64">
<template slot-scope="scope">
<span>{{scope.$index }}</span>
</template>
</el-table-column>
<el-table-column
label="商品 ID"
prop="id">
</el-table-column>
<el-table-column
label="商品名称"
align="left"
prop="name">
<template slot-scope="scope">
<el-tooltip v-if="scope.column.show===true" popper-class="preTooltip"
effect="dark"
placement="top">
<span slot="content" v-html="scope.row.name"></span>
<span v-html="scope.row.name"></span>
</el-tooltip>
<span v-else v-html="scope.row.name"></span>
</template>
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</ai-table-column>
</el-table>
@cell-mouse-enter="handleCellMouseEnter"
增加了一个方法。
下面我们就看一下这个方法里面的代码
handleCellMouseEnter(row, column, cell, event) {
const cellChild = event.target.querySelector('.cell'); // 获取cell元素
const range = document.createRange() // 创建一个范围
// 设置范围的区间
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
// 获取内容真实高度
const rangeHeight = range.getBoundingClientRect().height;
if(rangeHeight>cellChild.offsetHeight){
column.show = true // 设置一个新的属性show进column,用于判断是否显示气泡,true为显示气泡,false为不显示气泡
column.index=true
}else{
column.show = false
column.index=false
}
},
在插槽中利用v-if=“scope.column.show===true” 进行设置为显示气泡时候展示的结构,v-else为不展示气泡时候的结构
当我们在输入框中,输入了空格,或者按下enter进行换行,如果你们的需求也是这么变态,要求显示原始格式的话,可以用<span v-html="scope.row.name"></span>
在数据处理这里进行字符串替换:
this.tableData.forEach((v,index)=>{
v.name = v.name.replace(/↵/g, '<br>');
v.name = v.name.replace(new RegExp(/( )/g)," ");
})
最后贴一下data的假数据定义:
tableData: [
{
id: '12987122',
name: '(1)整理科研项目进行质量内审需要的测试报告、word版的测试用例↵(2)2020-05-14上了一个版本,验证开发解决的bug↵↵3、2222222222222222222222222↵4、呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪↵5、ggggggg↵6、55555555555555555555555↵7、顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶↵8、顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '(1)整理 科研项目进行质量内审需要的测试报告、word版的测试用例↵(2)2020-05-',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '(1)编写2020年5月12号左右进行质量内审的需要的测试类的文档(测试计划、测试用例)↵(2)验证bug,2020年5月9号需要上一个版本',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '(1)编写2020年5月12号左右进行质量内审的需要的测试类的文档(测试计划、测试用例)<br/>(2)验证bug,2020年5月9号需要上一个版本',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],