Question

我有一个Vue组件，该组件被导入到组件文件中。我想做的是，我想呈现一个使用append函数导入的组件。我该怎么办？

<template>
    <JqxGrid :width="width" :source="dataAdapter" :columns="gridValues"
             :pageable="true" :autoheight="true" :sortable="true"
             :altrows="true" :enabletooltip="true" :editable="true"
             :selectionmode="'multiplecellsadvanced'"  :showtoolbar="true" :rendertoolbar="rendertoolbar">
    </JqxGrid>
</template>

<script>

    import JqxGrid from "../jqx-vue/vue_jqxgrid.vue";
    import Button from "./buttonComponent.vue";

    methods: {
        rendertoolbar: function (toolbar) {
        // this is where I am trying to add the other component but it is not rendering as a actual component, it is just spitting out as it is.
            toolbar.append($("<span style='margin: 5px;'>  <jqx-button class='custom-erp-button custom-btn-secondary' :button-name="+`Add`+"></jqx-button>  </span>"));
        },
        cellsrenderer: function (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            if (value < 20) {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
            }
            else {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
            }
        }
    }
</script>

<style>
</style>

Answer 1

我的第一个反应是“您不应该直接操作DOM或构造HTML字符串”（否则您为什么要使用Vue？），但是您正在使用JqxGrid，它似乎可以这种方式起作用（我不是熟悉JqxGrid）。

在任何情况下，您要呈现的内容都不严格是HTML，而是Vue模板字符串，需要编译为JavaScript呈现函数（请参见Vue.compile()）。即使您确实做到了，但我不确定它是否可以与JqxGrid一起使用。

JqxGrid确实应该使用scoped slots完成此操作。如果JqxGrid无法支持这样的渲染Vue组件，那么恐怕您不走运。

使用js附加和渲染Vue组件

1 个答案: