vue render function & dataset

vue render function & dataset

https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

solution 1

dataset

    {
        key: "hotWordHeat",
        title: "热词热度",
        // width: 100,
        width: 200,
        align: "center",
        // sortable: true,
        // className: "disabled-user-selection",
        // 🔥U+1F525
        render: (h, params) => {
            let hotWordHeat = params.row.hotWordHeat;
            if (hotWordHeat) {
                return h("div", [
                    // h("Icon", {
                    //     props: {
                    //         name: "person",
                    //     }
                    // }),
                    // h("span", `🔥`),
                    // h("span", `<i data-icons="fire"></i>`),
                    h("i", {
                        attrs: {
                            // dataset: "data-icons=fire",
                            // dataset: {
                            //     "data-icons": "fire",
                            // },
                            "data-icons": "fire",
                        },
                        // dataset: {
                        //     "data-icons": "fire",
                        // },
                        // class: {
                        //     "data-icons-fire": true,
                        // },
                        // domProps: {
                        //     // dataset: "data-icons=fire",
                        //     dataset: {
                        //         "data-icons": "fire",
                        //     },
                        // },
                    }),
                    h("strong", hotWordHeat),
                ]);
            } else {
                return h("div", [
                    h("strong", hotWordHeat),
                ]);
            }
        },
    },

global css & not scoped css

<style lang="scss">
    .data-icons-fire {
        display: inline-block;
        content: url("./icons/fire.png");
        width: 14px;
        height: 14px;
        background: #fff;
    }
    [data-icons="fire"] {
        display: inline-block;
        content: url("./icons/fire.png");
        width: 14px;
        height: 14px;
        background: #fff;
    }
</style>

solution 2

class

// dataset

    {
        key: "hotWordHeat",
        title: "热词热度",
        // width: 100,
        width: 200,
        align: "center",
        // sortable: true,
        // className: "disabled-user-selection",
        // 🔥U+1F525
        render: (h, params) => {
            let hotWordHeat = params.row.hotWordHeat;
            if (hotWordHeat) {
                return h("div", [
                    // h("Icon", {
                    //     props: {
                    //         name: "person",
                    //     }
                    // }),
                    // h("span", `🔥`),
                    // h("span", `<i data-icons="fire"></i>`),
                    h("i", {
                        // attrs: {
                        //     dataset: "data-icons=fire",
                        // },
                        dataset: {
                            "data-icons": "fire",
                        },
                        class: {
                            "data-icons-fire": true,
                        },
                    }),
                    h("strong", hotWordHeat),
                ]);
            } else {
                return h("div", [
                    h("strong", hotWordHeat),
                ]);
            }
        },
    },

<style lang="scss">
    .data-icons-fire {
        display: inline-block;
        content: url("./icons/fire.png");
        width: 14px;
        height: 14px;
        background: #fff;
    }
</style>

<style lang="scss" scoped>
    /* .data-icons-fire {
        display: inline-block;
        content: url("./icons/fire.png");
        width: 23px;
        height: 23px;
        background: #fff;
    } */
    [data-icons="fire"] {
        display: inline-block;
        content: url("./icons/fire.png");
        width: 23px;
        height: 23px;
        background: #fff;
    }
</style>