關於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.布魯尼所說，你應該使用組件。然而，這隻適用於Vue 2，因爲Vue 1使用真正的DOM，並且僅限於HTML限制。在這種情況下，瀏覽器將去除表中的任何特殊元素。 您是否在尋找Vue 1的解決方案？