在Vue2.0上我应该如何编译模板和绑定模板事件

Question

我有如下组件，如何动态编译rowTemplate和cellTemplate，并在模板上绑定动态添加的事件？

在下面的代码中，只有原始html的输出。

我想不出任何办法来解决这个问题。请帮忙，谢谢！

<template>
    <div class="table-scrollable">
        <table class="table table-bordered table-hover" :class="{ 'table-striped' : stripe }">
            <thead>
                <tr v-if="columns.length">
                    <th v-if="isRowIndex">#</th>
                    <th v-for="(col, index) in columns">
                        {{ col.name }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-else v-for="(entry, index) in data">
                    <td v-if="isRowIndex">{{ index + 1 }}</td>
                    <td v-for="col in columns">
                        {{ addNewElement(entry,col)}} 
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                rowTemplate: '<tr v-else v-for="(entry, index) in data">' +
                    '   <td v-if="isRowIndex">{{ index + 1 }}</td>' +
                    '   <td v-for="col in columns">' +
                    '       {{ entry[col.field] }} ' +
                    '   </td>' +
                    '</tr>',

                columns: [{
                    name: app.localize('Actions'),
                    width: 200,
                    cellTemplate: '<div class=\"ui-grid-cell-contents\">' +
                        '  <div class="btn-group dropdown" uib-dropdown="" dropdown-append-to-body>' +
                        '    <button class="btn btn-xs btn-primary blue dropdown-toggle" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span></button>' +
                        '    <ul uib-dropdown-menu>' +
                        '      <li><a @click="impersonate(entry)">' + app.localize('LoginAsThisTenant') + '</a></li>' +
                        '      <li><a @click="editTenant(entry)">' + app.localize('Edit') + '</a></li>' +
                        '      <li><a @click="editFeatures(entry)">' + app.localize('Features') + '</a></li>' +
                        '      <li><a @click="deleteTenant(entry)">' + app.localize('Delete') + '</a></li>' +
                        '    </ul>' +
                        '  </div>' +
                        '</div>'
                }, {
                    name: app.localize('TenancyCodeName'),
                    field: 'tenancyName',
                    cellTemplate: '<div class=\"ui-grid-cell-contents\">' +
                        '  <i title="' + app.localize('HasOwnDatabase') + '" class="fa fa-database"></i> {{entry.tenancyName}}' +
                        '</div>'
                }]
            }
        },
        methods: {
            addNewElement(entry, col) {
                if (col.cellTemplate && col.cellTemplate.length > 0) {
                    // Here I should be how to compile the template and binding template events

                } else {
                    return entry[col.field];
                }
            }
        }
    }
</script>

Answer 1

正如 J. Bruni 所说，您应该使用组件。但是，这仅适用于 Vue 2，因为 Vue 1 使用真实的 DOM 并且仅限于 HTML 限制。在这种情况下，浏览器会去掉表格中的任何特殊元素。 您是否正在为 Vue 1 寻找解决方案？