iview在table组件里render封装的Poptip弹出位置错误，如何解决？

Question

在封装的table组件里加了一个通用的poptip组件，但是poptip第一次弹出时位置错误，总是从页面最顶端弹出。

table组件里的处理：

    handleColumns(columnsPro) {
        this.columns = columnsPro.map((item, index) => {
            let res = item;
            if (res.resourceTip) {
                res = this.supportPrompt(res, index);
            }
            return res;
        });
    }
    
    supportPrompt(item, index) {
        item.render = (h, params) => {
            return h('div', [
                h(ResourceOperationTip, {
                    props: {
                        value: this.datasPro[params.index][params.column.key],
                        resourceTip: params.column.resourceTip
                    }
                })
            ]);
        };
        return item;
    }

封装的poptip组件：

<template>
    <div class="resource-operation-tip">
        <Poptip
                :placement="placement"
                :width="width"
                :trigger="trigger"
                transfer popper-class="resource-operation-poptip">
            <p class="value" style="color: #2db7f5">{{ value }}</p>
            <div slot="content">
                <Table border :columns="resourceColumns" :data="resourceData"></Table>
            </div>
        </Poptip>
    </div>
</template>

<script>
    import {getSessionStore, setSessionStore} from '@/libs/storage';
    import axios from '@/libs/api.request';

    export default {
        name: 'ResourcePoptip',
        props: {
            value: [String, Number],
            resourceTip: [String, Object]
        },
        watch: {
            resourceTip: {
                immediate: true,    // 没有这句代码无法监听到props
                handler(resourceTip) {
                    let data = [];
                    if (Object.keys(this.operationList).length === 0) {
                        this.getOperationList();
                    }
                    if (typeof resourceTip === 'string') {
                        data = this.operationList[resourceTip];
                    } else {
                        if (resourceTip.type) {
                            data = this.operationList[resourceTip.type];
                        } else {
                            console.error('resourceTip error...')
                        }
                        if (resourceTip.placement) {
                            this.placement = resourceTip.placement
                        }
                        if (resourceTip.width) {
                            this.width = resourceTip.width
                        }
                        if (resourceTip.trigger) {
                            this.trigger = resourceTip.trigger
                        }
                    }
                    this.resourceData = data;
                }
            }
        },
        data() {
            return {
                getResourceOperationListUrl: 'url',
                operationList: {},
                resourceData: [],
                resourceColumns: [
                    {
                        title: '模块',
                        key: 'name',
                        width: 90
                    },
                    {
                        title: 'URL',
                        key: 'url',
                        render: (h, params) => {
                            return h('a', {
                                attrs: {
                                    href: params.row.url,
                                    target: '_blank'
                                }
                            }, params.row.url);
                        }
                    }
                ],
                placement: 'right',
                width: 500,
                trigger: 'click',
                color: '#2db7f5'
            }
        },
        methods: {
            getOperationList() {
                let resourceOperationList = getSessionStore('resourceOperationList');
                if (!resourceOperationList) {
                    this.axiosGet().then(resourceOperationList => {
                        this.operationList = resourceOperationList;
                        setSessionStore('resourceOperationList', this.operationList)
                    });
                } else {
                    this.operationList = JSON.parse(resourceOperationList);
                }
            },
            axiosGet() {
                return axios.request({
                    url: this.getResourceOperationListUrl
                }).then(res => {
                    if (res.data.status !== 0) {
                        console.error(res.data);
                    }
                    return res.data.data;
                }).catch(error => {
                    console.error(error);
                });
            }
        }
    };
</script>

<style lang="less">
</style>

也试过去掉Poptip的transfer属性，但是去掉之后虽然弹出位置正常了，但必须连续点击三次才能正常显示；第一次点击没反应，第二次弹出会立刻消失，第三次开始才会正常弹出

Answer 1

把slot里的Table改为使用原生的table标签，用v-html手动生成表格内容，解决了这个问题；
具体原因还不明，只能暂时先这样了

Answer 2

popper-class="resource-operation-poptip"

<style lang="stylus">
.poptip-wrap {
  max-width: 80px
}

.datepicker-style {
  max-height: 300px
}
</style>

这样写样式不生效，请教大佬指点一下

Answer 3

确实是iview的Table组件造成的，具体原因不明，不过可以在Poptip的on-popper-show事件里加上一个控制Table是否显示的变量，比如this.showTable = true，先让poptip显示出来再显示Table，就不会错位了。