效果：
html:
<div class="evaluate">
<div class="list flex-column-center" v-for="(item, index) in evaluateList" :key="index"
@mouseenter="mouseenterHandler(item)" @mouseleave="mouseleaveHandler(item)">
<div class="el-popover el-popper el-popover--plain formula" x-placement="top"
v-if="item.showTooltip" :style="cluStyle(item.formula)">
{{ item.formula }}
<div x-arrow="" class="popper__arrow" style="left: 116px;"></div>
</div>
<div class="title">{{ item.title }}</div>
<div class="num-box">
<div class="num">{{ item.num }}</div>
<div class="unit">{{ item.unit }}</div>
<div class="label">{{ item.label }}</div>
</div>
<div class="compare">{{ item.compare }}</div>
</div>
</div>js:
evaluateList: [
{
title: "取水关键指标",
num: "1.3",
unit: "m³水/吨焦",
label: "吨焦取水量",
compare: "节水企业 < 1.2",
formula: "吨焦取水量(%)=取水量（m³)/企业产焦量(吨)",
showTooltip: false,
},
{
title: "用水漏损关键指标",
num: "0",
unit: "%",
label: "用水综合漏损率",
compare: "节水企业 < 3",
formula: "用水综合漏失率(%)=漏失水量(m³)/取水量(m³)",
showTooltip: false,
},
{
title: "重复利用关键指标",
num: "98.5",
unit: "%",
label: "间接冷却水循环率",
compare: "节水企业 ≥ 98",
formula: "间接冷却水循环率(%)=间接冷却水循环量(m³)/(间接冷却水循环量(m³)+间接冷却水系统补充水量(m³))",
showTooltip: false,
},
{
title: "重复利用关键指标",
num: "79.2",
unit: "%",
label: "废水回收率",
compare: "节水企业 ≥ 75",
formula: "废水回用率(%)=回用水量(m³)/废水收集量(m³)",
showTooltip: false,
},
{
title: "重复利用关键指标",
num: "98.0",
unit: "%",
label: "重复利用率",
compare: "节水企业 ≥ 98",
formula: "重复利用率(%)=复用水量(m³)/用水量(m³)",
showTooltip: false,
},
], cluStyle(content) {
if (content.length && content.length <50) {
return `top:-60px`
}
if (content.length && content.length >50) {
return `top:-80px`
}
},
mouseenterHandler(item) {
item.showTooltip = true
},
mouseleaveHandler(item) {
item.showTooltip = false
},css:
.evaluate {
width: 100%;
height: calc(100% - 20px);
display: flex;
justify-content: space-around;
.list {
width: 20%;
height: 100%;
position: relative;
.title {
font-size: 14px;
color: #47e2ff;
}
.num-box {
width: 108px;
height: 116px;
background: url(~@/assets/img/text-bg3.png);
display: flex;
flex-direction: column;
align-items: center;
.num {
font-family: "ShuHeiTi";
font-size: 20px;
margin-top: 30px;
}
.unit {
margin-bottom: 15px;
}
}
.compare {
background-color: #326aef;
padding: 5px 20px;
}
.formula {
position: absolute;
top: -80px;
}
}
}下面这里不要加作用域 scoped否则不生效哦！！
<style lang="scss">
.el-tooltip__popper {
font-size: 14px;
max-width: 20%
}
.el-popover--plain {
padding: 10px;
}效果：
html:
<avue-crud :option="optionWatervolume" v-show="activeTab == 'watervolume'" :table-loading="loading" :data="data"
:page.sync="page" :search.sync="searchForm" v-model="form" ref="crud" :permission="permissionList"
@row-click="rowClick" @search-change="searchChange" @search-reset="searchReset"
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
@refresh-change="refreshChange" @on-load="onLoad" @cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave">
<template slot-scope="{ row }" slot="deviceName">
<!-- 悬浮提示 -->
<el-tooltip placement="top" v-model="row.showTooltip" :open-delay="500" effect="light"
:disabled="!row.showTooltip" class="device">
<!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
<div slot="content">
{{ row.text }}
</div>
<div>{{ row.deviceName }}</div>
</el-tooltip>
</template>
<template slot-scope="{ row }" slot="fieldTag">
<el-row class="row">
<el-select v-model="row.fieldTag" placeholder="请选择" @change="handselect(row, row.fieldTag)" ref="select"
size="mini">
<el-option v-for="(item, index) in row.waterFieldConfigList" :key="index" :label="item.fieldTag"
:value="item.fieldName">
</el-option>
</el-select>
</el-row>
</template>
<template slot-scope="{ row }" slot="measurementMethod">
<el-row class="row">
<span>{{ row.measurementMethod == "REALTIME_VALUE" ? "实时值" : row.measurementMethod == "CUMULATIVE_VALUE" ?
"累计值" : "-"
}}</span>
</el-row>
</template>
</avue-crud>js：
cluStyle(content) {
if (content.length && content.length == 10) {
return `bottom:-${content.length*6}px`
}
if (content.length && content.length < 10) {
return `bottom:-${content.length * 10}px`
}
if (content.length&& content.length > 14&&content.length <30 ) {
return `bottom:-${content.length*4}px`
}
if (content.length&&content.length >29 && content.length <40) {
return `bottom:-${content.length*3}px`
}
if (content.length && content.length >39 && content.length <75) {
return `bottom:-${content.length*2.2}px`
}
if (content.length && content.length >74&& content.length <90) {
return `bottom:-${content.length*2}px`
}
if (content.length && content.length >89) {
return `bottom:-${content.length*1.8}px`
}
},
cellMouseEnter(row, column, cell, event) {
if (column.label == "计量设备") {
check(row.id).then(res => {
let text = ""
if (res.data.code == 200) {
text = res.data.data
this.$set(row, "text", text)
this.$set(row, "showTooltip", true)
}
})
}
},
cellMouseLeave(row) {
this.$set(row, "showTooltip", false)
},css:
<style lang="scss">
.el-tooltip__popper {
font-size: 14px;
max-width: 20%
}
</style>
