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

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

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

（注意：我使用了

export default

而不是

module.exports

，因为否则我会得到一个错误，即

module.exports

是只读的）

src/common/tables/templates/custom.js

从“merge”导入合并；
导出默认功能（h、模块、类、插槽）{
var filterId='VueTables\uuuu search\uu'+this.id；
var ddpId='VueTables_uu下拉分页uu'+this.id；
var perpageId='VueTables\uuuu limit\uuu'+this.id；
var perpageValues=require（'vue-tables-2/编译/模块/每页值'）。调用（this，h）；
var genericFilter=this.hasGenericFilter？
{this.display（'filter'）}
{modules.normalFilter（类，filterId）}
:'';
var perpage=perpageValues.length>1？
{this.display（'limit'）}
{modules.perPage（perpageValues，classes.select，perpageId）}
:'';
var dropdownPagination=this.opts.pagination&&this.opts.pagination.dropdown？
1}
>
{this.display（'page'）}
{modules.dropdownPagination（classes.select，ddpId）}
:'';
var columnsDropdown=this.opts.columnsDropdown？
{modules.columnsDropdown（类）}
:'';
var footerHeaders=this.opts.footerHeaders？
{modules.headers（classes.right）}:''；
var shouldShowTop=genericFilter | |
每页| |
下拉分页| |
列下拉列表| |
slots.beforeFilter | |
槽.后滤器| |
slots.beforeflimit | |
后限位；
var桌面=
{slots.beforeFilter}
{genericFilter}
{slots.afterFilter}
{slots.beforeLimit}
{perpage}
{slots.afterLimit}
{dropdownPagination}
{columnsDropdown}
;
返回
{桌面}
{modules.pagination（合并）（class.pagination{
包装器：`${classes.row}${classes.column}${classes.contentCenter}`，
导航：班级中心，
计数：`${classes.center}${classes.column}`
}))}
{slots.beforeTable}
{modules.headers（classes.right）}
{slots.beforeFilters}
{modules.columnFilters（类）}
{slots.afterFilters}
{页脚标题}
{slots.beforeBody}
{slots.prependBody}
{模块.行（类）}
{slots.appendBody}
{slots.afterBody}
{slots.postable}
{modules.pagination（合并）（class.pagination{
包装器：`${classes.row}${classes.column}${classes.contentCenter}`，
导航：班级中心，
计数：`${classes.center}${classes.column}`
}))}
{modules.dropdownPaginationCount（）}
}

表格组件

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

---

解决方案是仍然使用module.exports，但将导入移动到

merge

，因为否则会出现

导出为只读的错误

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>
  }

module.exports=函数（h、模块、类、插槽）{
const merge=require（'merge'）
var filterId='VueTables\uuuu search\uu'+this.id；
var ddpId='VueTables_uu下拉分页uu'+this.id；
var perpageId='VueTables\uuuu limit\uuu'+this.id；
var perpageValues=require（'vue-tables-2/编译/模块/每页值'）。调用（this，h）；
var genericFilter=this.hasGenericFilter？
{this.display（'filter'）}
{modules.normalFilter（类，filterId）}
:'';
var perpage=perpageValues.length>1？
{this.display（'limit'）}
{modules.perPage（perpageValues，classes.select，perpageId）}
:'';
var dropdownPagination=this.opts.pagination&&this.opts.pagination.dropdown？
1}
>
{this.display（'page'）}
{modules.dropdownPagination（classes.select，ddpId）}
:'';
var columnsDropdown=this.opts.columnsDropdown？
{modules.columnsDropdown（类）}
:'';
var footerHeaders=this.opts.footerHeaders？
{modules.headers（classes.right）}:''；
var shouldShowTop=genericFilter | |
每页| |
下拉分页| |
列下拉列表| |
slots.beforeFilter | |
槽.后滤器| |
slots.beforeflimit | |
后限位；
var桌面=
{slots.beforeFilter}
{genericFilter}
{slots.afterFilter}
{slots.beforeLimit}
{perpage}
{slots.afterLimit}
{dropdownPagination}
{columnsDropdown}
;
返回
{桌面}
{modules.pagination（合并）（class.pagination{
包装器：`${classes.row}${classes.column}${classes.contentCenter}`，
导航：班级中心，
计数：`${classes.center}${classes.column}`
}))}
{slots.beforeTable}
{modules.headers（classes.right）}
{slots.beforeFilters}
{modules.columnFilters（类）}
{slots.afterFilters}
{页脚标题}
{slots.beforeBody}
{slots.prependBody}
{模块.行（类）}
{slots.appendBody}
{slots.afterBody}
{slots.postable}
{modules.pagination（合并）（class.pagination{
包装器：`${classes.row}${classes.column}${classes.contentCenter}`，
导航：班级中心，
计数：`${classes.center}${classes.column}`
}))}
{modules.dropdownPaginationCount（）}
}