web前端h函数渲染第三方组件NTooltip弹出提示

357 阅读1分钟

vue naiveui table 某个列加点击事件与tooltip弹出提示

const state = reactive({
    columns: computed(() => {
        let arr = basicColumns; // 定义好的列
        // 找到当前要更改的列
        let nameEn = arr.find((item) => item.key === "nameEn");
        if (nameEn) {
            nameEn.render = (row) => {
                return h(NTooltip, {trigger: 'hover'}, {
                    trigger: () => {
                        return h(
                            "span",
                            {
                                onClick: () => {
                                    window.open(`/xxx/xxx`,"_blank");
                                },
                                style: {
                                    textDecoration: "underline",
                                    cursor: "pointer",
                                },
                            },
                            row.nameEn
                        );
                    },
                    default: () => "查看船舶"
                })
            };
        }
        return arr;
    }),
})