vue-tables-2 中未考虑自定义模板

Question

使用 vue-tables-2，我从 default one 创建了一个自定义模板，以在顶部添加分页。

我的问题是自定义模板在需要时没有被考虑在内。默认模板仍然显示，即使我删除了自定义模板中的大部分内容。

（注意：我使用 export default 而不是 module.exports，因为否则我会收到 module.exports 是只读的错误消息）

src/common/tables/templates/custom.js

import merge from 'merge';

export default function(h, modules, classes, slots) {
    var filterId = 'VueTables__search_' + this.id;  
    var ddpId = 'VueTables__dropdown-pagination_' + this.id;
    var perpageId = 'VueTables__limit_' + this.id;
    var perpageValues = require('vue-tables-2/compiled/modules/per-page-values').call(this,h);

    var genericFilter = this.hasGenericFilter?
    <div class="VueTables__search-field">
    <label for={filterId} class={classes.label}>{this.display('filter')}</label>
    {modules.normalFilter(classes, filterId)}
    </div>:'';

    var perpage =  perpageValues.length>1?<div class="VueTables__limit-field">
    <label class={classes.label} for={perpageId}>{this.display('limit')}</label>
    {modules.perPage(perpageValues, classes.select, perpageId)}
    </div>:'';

    var dropdownPagination = this.opts.pagination && this.opts.pagination.dropdown?
    <div class="VueTables__pagination-wrapper">    
    <div class={`${classes.field} ${classes.inline} ${classes.right} VueTables__dropdown-pagination`}
    v-show={this.totalPages>1}
    >
    <label for={ddpId}>{this.display('page')}</label>
    {modules.dropdownPagination(classes.select, ddpId)}
    </div>
    </div>:'';

    var columnsDropdown = this.opts.columnsDropdown?
    <div class="VueTables__columns-dropdown-wrapper">
    {modules.columnsDropdown(classes)}
    </div>:'';

    var footerHeadings = this.opts.footerHeadings?
    <tfoot><tr>{modules.headings(classes.right)}</tr></tfoot>:'';

    var shouldShowTop = genericFilter || 
      perpage || 
      dropdownPagination || 
      columnsDropdown || 
      slots.beforeFilter || 
      slots.afterFilter || 
      slots.beforeLimit || 
      slots.afterLimit;

    var tableTop = <div class={classes.row} v-show={shouldShowTop}>
      <div class={classes.column}>
      <div class={`${classes.field} ${classes.inline} ${classes.left} VueTables__search`}>
      {slots.beforeFilter}
      {genericFilter}
      {slots.afterFilter}  
      </div>
      <div class={`${classes.field} ${classes.inline} ${classes.right} VueTables__limit`}>
      {slots.beforeLimit}
      {perpage}
      {slots.afterLimit}    
      </div>
      {dropdownPagination}
      {columnsDropdown}
      </div>
      </div>;

    return <div class={"VueTables VueTables--" + this.source}>
    {tableTop}
    {modules.pagination(merge(classes.pagination, {
      wrapper:`${classes.row} ${classes.column} ${classes.contentCenter}`,
      nav:classes.center,
      count:`${classes.center} ${classes.column}`
    }))}
    {slots.beforeTable}
    <div class="table-responsive">
    <table class={`VueTables__table ${this.opts.skin?this.opts.skin:classes.table}`}>
    <thead>
    <tr>
    {modules.headings(classes.right)}
    </tr>
    {slots.beforeFilters}  
    {modules.columnFilters(classes)}
    {slots.afterFilters}  
    </thead>
    {footerHeadings}
    {slots.beforeBody}      
    <tbody>
    {slots.prependBody}
    {modules.rows(classes)}
    {slots.appendBody}
    </tbody>
    {slots.afterBody}
    </table>
    </div>
    {slots.afterTable}
    {modules.pagination(merge(classes.pagination, {
      wrapper:`${classes.row} ${classes.column} ${classes.contentCenter}`,
      nav:classes.center,
      count:`${classes.center} ${classes.column}`
    }))}
    {modules.dropdownPaginationCount()}

    </div>
  }

Table分量

// ...
    data () {
      return {
        // ...
        template: require('../../common/tables/templates/custom'),
      }
    },
// ...

Answer 1

解决方案是仍然使用 module.exports，但移动 merge 的导入，否则会出现 exports 是只读的错误。

module.exports = function(h, modules, classes, slots) {
  const merge = require('merge')

  var filterId = 'VueTables__search_' + this.id;  
  var ddpId = 'VueTables__dropdown-pagination_' + this.id;
  var perpageId = 'VueTables__limit_' + this.id;
  var perpageValues = require('vue-tables-2/compiled/modules/per-page-values').call(this,h);

  var genericFilter = this.hasGenericFilter?
  <div class="VueTables__search-field">
  <label for={filterId} class={classes.label}>{this.display('filter')}</label>
  {modules.normalFilter(classes, filterId)}
  </div>:'';

  var perpage =  perpageValues.length>1?<div class="VueTables__limit-field">
  <label class={classes.label} for={perpageId}>{this.display('limit')}</label>
  {modules.perPage(perpageValues, classes.select, perpageId)}
  </div>:'';

  var dropdownPagination = this.opts.pagination && this.opts.pagination.dropdown?
  <div class="VueTables__pagination-wrapper">    
  <div class={`${classes.field} ${classes.inline} ${classes.right} VueTables__dropdown-pagination`}
  v-show={this.totalPages>1}
  >
  <label for={ddpId}>{this.display('page')}</label>
  {modules.dropdownPagination(classes.select, ddpId)}
  </div>
  </div>:'';

  var columnsDropdown = this.opts.columnsDropdown?
  <div class="VueTables__columns-dropdown-wrapper">
  {modules.columnsDropdown(classes)}
  </div>:'';

  var footerHeadings = this.opts.footerHeadings?
  <tfoot><tr>{modules.headings(classes.right)}</tr></tfoot>:'';

  var shouldShowTop = genericFilter || 
    perpage || 
    dropdownPagination || 
    columnsDropdown || 
    slots.beforeFilter || 
    slots.afterFilter || 
    slots.beforeLimit || 
    slots.afterLimit;

  var tableTop = <div class={classes.row} v-show={shouldShowTop}>
    <div class={classes.column}>
    <div class={`${classes.field} ${classes.inline} ${classes.left} VueTables__search`}>
    {slots.beforeFilter}
    {genericFilter}
    {slots.afterFilter}  
    </div>
    <div class={`${classes.field} ${classes.inline} ${classes.right} VueTables__limit`}>
    {slots.beforeLimit}
    {perpage}
    {slots.afterLimit}    
    </div>
    {dropdownPagination}
    {columnsDropdown}
    </div>
    </div>;

    return <div class={"VueTables VueTables--" + this.source}>
    {tableTop}
    {modules.pagination(merge(classes.pagination, {
      wrapper:`${classes.row} ${classes.column} ${classes.contentCenter}`,
      nav:classes.center,
      count:`${classes.center} ${classes.column}`
    }))}
    {slots.beforeTable}
    <div class="table-responsive">
    <table class={`VueTables__table ${this.opts.skin?this.opts.skin:classes.table}`}>
    <thead>
    <tr>
    {modules.headings(classes.right)}
    </tr>
    {slots.beforeFilters}  
    {modules.columnFilters(classes)}
    {slots.afterFilters}  
    </thead>
    {footerHeadings}
    {slots.beforeBody}      
    <tbody>
    {slots.prependBody}
    {modules.rows(classes)}
    {slots.appendBody}
    </tbody>
    {slots.afterBody}
    </table>
    </div>
    {slots.afterTable}
    {modules.pagination(merge(classes.pagination, {
      wrapper:`${classes.row} ${classes.column} ${classes.contentCenter}`,
      nav:classes.center,
      count:`${classes.center} ${classes.column}`
    }))}
    {modules.dropdownPaginationCount()}

    </div>
  }

vue-tables-2 中未考虑自定义模板

Custom template not taken into account in vue-tables-2

javascript

jsx

vue.js

vuejs2

vue-tables-2