<template>
<view :id="uniId" style="position: relative;">
<view v-if="textContent" class="text-content">{{ textContent }}</view>
<view v-show="tooltipContent" class="child" :id="`${uniId}-child`">{{ tooltipContent }}</view>
<scroll-view scroll-x="true" class="body" @scroll="mouseleave()">
<u-table class="table" :style="{'width': tableWidth}" color="#000000cc" fontSize="24">
<u-tr>
<u-th v-for="item in tableColumns" :key="item.prop" :style="{'textAlign': item.align || 'center'}" :width="item.cellsWidth">{{ item.label }}</u-th>
</u-tr>
<u-tr v-for="(row, index) in tableData" :key="index">
<u-td v-for="item in tableColumns" :key="item.prop"
:style="{...tdStyle(item), 'textAlign': item.align || 'center'}" :width="item.cellsWidth">
<span v-if="item.type === 'index'">{{ index + 1 }}</span>
<span v-else :id="`${item.prop}-${index}`" @mouseleave="mouseleave()" @mouseenter="mouseenter($event, row[item.prop], `${item.prop}-${index}`)">{{ row[item.prop] }}</span>
</u-td>
</u-tr>
</u-table>
</scroll-view>
</view>
</template>
<script>
export default {
name: 'leader-table',
props: {
// 表格宽度
tableWidth: {
type: String,
default: '100%'
},
// 单元格宽度
cellsWidth: {
type: String,
default: '100%'
},
// 表格上方文本内容
textContent: {
type: String,
default: ''
},
// 单元格样式
tdStyle: {
type: Function,
default: () => {}
},
tableColumns: {
type: Array,
default: () => []
},
tableData: {
type: Array,
default: () => []
}
},
data() {
return {
// 生成唯一标识,方便每个表格组件定位
uniId: Math.floor(Math.random() * Date.now()).toString(36),
tooltipContent: ''
}
},
methods: {
mouseleave () {
this.tooltipContent = ''
},
mouseenter (event, content, tdId) {
this.tooltipContent = content
const TdContent = document.getElementById(tdId)
// 内容的宽度超出范围则显示tooltip
this.tooltipContent = TdContent.scrollWidth > TdContent.clientWidth ? content : ''
this.$nextTick(_ => {
const parent = document.getElementById(this.uniId)
const child = document.getElementById(`${this.uniId}-child`)
let x = event.clientX - parent.offsetLeft - child.offsetWidth
let y = event.pageY - parent.offsetTop - child.offsetHeight
if (x < 0) {
x = 0
} else if (x + child.offsetWidth > parent.offsetWidth) {
x = parent.offsetWidth - child.offsetWidth
}
if (y < 0) {
y = 0;
} else if (y + child.offsetHeight > parent.offsetHeight) {
y = parent.offsetHeight - child.offsetHeight
}
child.style.left = x + "px"
child.style.top = y + "px"
})
}
}
}
</script>
<style lang='scss' scoped>
.text-content {
text-size-adjust: none;
color: #0000008c;
font-family: "PingFang SC";
font-size: 20rpx;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 12rpx;
margin-top: 18rpx;
transform-origin: 0 0;
white-space: nowrap;
}
.child {
z-index: 1;
position: absolute;
color: white;
font-size: 24rpx;
padding: 4px;
border-radius: 5px;
background-color: #3c3c3c;
max-width: 60%;
}
.table {
border: none !important;
::v-deep.u-th {
height: 61.33rpx !important;
background-color: #E9EFFF;
text-align: center;
white-space: nowrap;
border: none !important;
flex-shrink: 0;
color: #000000;
font-size: 24rpx;
font-weight: 700;
}
.u-td {
display: flex !important;
min-height: 66.67rpx !important;
border: none !important;
border-top: 1px solid #e5e5e5 !important;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: ellipsis;
span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
</style>
vue自定义表格tooltip
最新推荐文章于 2024-07-16 15:13:51 发布