a-table给整行添加悬浮效果

<template>
    <div class="published">
        <div>
            <a-table
                :columns="columns"
                :data-source="data"
                :row-selection="rowSelection"
                :pagination="pageInfo"
                class="main-table base-table"
                @change="getChange"
                :custom-row="customRow"
                :row-key="rowKey"
                size="middle"
                :loading="loading"
            >
            </a-table>

            <a-tooltip
                v-if="showRowTooltip"
                :visible="showRowTooltip"
                :title="tooltipContent"
                placement="top"
                overlayClassName="row-tooltip"
                :get-popup-container="triggerNode => triggerNode.parentNode"
            >
                <div class="tooltip-placeholder" :style="tooltipStyle"></div>
            </a-tooltip>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Demo",
        data() {
            return {
                rowKey: "id",
                detailVisible: false,
                pageInfo: {
                    defaultCurrent: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '25', '100', '250'],
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: total => `共有 ${total} 条`,
                    total: 0,
                    itemRender: (page, type, originalElement) => {
                        switch (type) {
                            case "prev":
                                return <a class="prev" title="上一页" href="javascript:;">上一页</a>;
                            case "next":
                                return <a class="next" title="下一页" href="javascript:;">下一页</a>;
                            default:
                                return originalElement;
                        }
                    },
                    current: 1
                },
                pageParams: { pageNum: 1, pageSize: 10 },
       
                showRowTooltip: false,
                tooltipContent: '',
                tooltipStyle: {
                    position: 'fixed',
                    top: '0px',
                    left: '0px',
                    width: '0px',
                    height: '0px',
                    pointerEvents: 'none',
                    zIndex: '-1'
                },
            }
        },
        computed: {
            rowSelection() {
                return {
                    selectedRowKeys: this.selectedRows,
                    onChange: selectedRowKeys => this.selectedRows = selectedRowKeys,
                    getCheckboxProps: record => ({
                        props: {
                            disabled: record?.salesActivityList?.length > 0 , // Column configuration not to be checked
                        },
                    }),
                }
            },
            selectCount() {
                return this.selectedRows.length;
            }
        },
        methods: {
            getList: getSupplierItems,
            customRow(record) {
                return {
                    on: {
                        click: () => {
                            const { rowKey, selectedRows: selectedRowKeys } = this;
                            if(!record?.salesActivityList || record?.salesActivityList?.length ===0  ){
                                if (selectedRowKeys.includes(record[rowKey])) {
                                    this.selectedRows = selectedRowKeys.filter(value => value !== record[rowKey]);
                                } else {
                                    this.selectedRows.push(record[rowKey]);
                                }
                                record.isItemPre = false;
                                this.detail = record;
                                this.detailVisible = true;
                                this.$refs.supplieritemsdetails?.reseteditor()
                            }else{

                            }

                        },

                        // 修改悬浮事件
                        mouseenter: (event) => {
                            if(record?.salesActivityList?.length > 0  ){
                                this.showRowTooltip = true;
                                this.tooltipContent = "该商品正在促销中，除状态外其他信息不可修改";


                                // 获取行元素位置
                                const rowElement = event.currentTarget;
                                const rect = rowElement.getBoundingClientRect();
                                rowElement.classList.add('my-ant-table-row-disabled');
                                // 计算 tooltip 位置，确保不超出视窗边界
                                const tooltipTop = rect.top ;
                                const tooltipLeft = rect.left;
                                const maxWidth = window.innerWidth - 20; // 留出一些边距

                                this.tooltipStyle = {
                                    position: 'fixed',
                                    top: `${Math.max(0, tooltipTop)}px`,
                                    left: `${Math.max(0, tooltipLeft)}px`,
                                    width: `${Math.min(rect.width, maxWidth)}px`,
                                    height: '1px',
                                    pointerEvents: 'none',
                                    zIndex: '1000',
                                    backGround: "white",
                                    color: "black"
                                };
                            }
                        },
                        mouseleave: (event) => {
                            this.showRowTooltip = false;

                            const rowElement = event.currentTarget;
                            rowElement.classList.remove('my-ant-table-row-disabled');
                            // 隐藏时重置位置
                            this.tooltipStyle = {
                                position: 'fixed',
                                top: '0px',
                                left: '0px',
                                width: '0px',
                                height: '0px',
                                pointerEvents: 'none',
                                zIndex: '-1'
                            };
                        }
                    },
                    class: ["pointer"]
                };
            },
            
        },
        mounted() {

        }
    }
</script>

<style>
.published .ant-tooltip-inner{
    background-color: white;
    color: black;
}
.published .ant-tooltip-arrow:before{
    background-color: #fff;
}

.my-ant-table-row-disabled{
    opacity: 0.4;
    background-color: #f5f5f5;
    cursor: not-allowed;
    transition: all 0.2s;
}
</style>