Vuejs和DataTables绑定到render()

时间:2019-07-03 21:35:38

标签: javascript datatables vuejs2

在DataTables中,我将render()放入columnDefs中,以允许在非常简单的绑定中使用自定义html。我想将vue语法放入render函数中,并使数据表将该块扔到每一行上。像这样:

new Vue({
    el: "#app",
    components: {"data-tables": datatables},
    data: {
        message:"hi",
        tableData: [...]
        columnDefs: [{
            title: "Actions", width: "20%", data: null,
            render: (data: any, type: string, row: any, meta: object) => {
                return `<div class="row hcenter">
                          <a title="Edit" class="btn btn-default" type="button">
                            <i class="fa fa-edit"></i>{{message}}
                          </a>
                        </div>`}
        }]
     }
})

和模板:

{
    template: '<table v-bind:id="tableId"></table>',
    props: ["tableData", "columnDefs", "options", "tableId"],
    data() {
        return { dtHandle: null }
    },
    watch: {
        tableData(val, oldVal) {
            ...
        }
    },
    mounted() {
        this.$nextTick(() => {
            // Other things
            ...

            // Create datatable and save
            this.dtHandle = $(this.$el).DataTable(options);
            // Probably something here to bind anything new <<<<<<<<<<<<<<<<<<<<<<
        });
    }
}

来自淘汰赛世界,我将做以下事情以便按需应用绑定:

ko.cleanNode(element);
ko.applyBindings(context, element);

Vuejs中是否有类似的东西可以让我在页面上扔任意HTML,并将Vue绑定到当前模型?

或者,还有另一种方法可以做到这一点或类似的方法吗?我试图使datatables组件尽可能简单和通用,所以我真的很想从包含页面传递所有信息。

0 个答案:

没有答案