Question

我编写了一个支持子行的grid component，即一个可切换的行，其中每个正常行下都有一个跨越表的整个宽度的单元格。为了跟踪子行状态，我使用名为openChildRows的数据属性，默认为空数组。当用户单击每行第一列上的切换图标时，该行的子行将打开。额外的点击将其关闭。 openChildRows数组包含空行的ID。

我遇到的问题是，当我为子行使用一个组件时，所有打开的行在之后切换到的那一行将被重新装入。这显然效率低下，特别是如果子行组件在挂载时发送ajax请求。理想情况下，我想要的是只安装新的子行。

我使用JSX为模板编写了网格。以下是相关代码：

行模板：

module.exports = function(h, that) {
    var rows = [];
    var columns;
    var rowKey = that.opts.uniqueKey;

    var rowClass;
    var data = that.source=='client'?that.filteredData:that.tableData;
    var recordCount = (that.Page-1) * that.limit;

    data.map(function(row, index) {

      index = recordCount + index + 1;

      columns = [];

      if (that.hasChildRow) {
        var childRowToggler = <td><span on-click={that.toggleChildRow.bind(that,row[rowKey])} class={`VueTables__child-row-toggler ` + that.childRowTogglerClass(row[rowKey])}></span></td>;
        if (that.opts.childRowTogglerFirst) columns.push(childRowToggler);
      }


      that.allColumns.map(function(column) {
          let rowTemplate = that.$scopedSlots && that.$scopedSlots[column];

          columns.push(<td class={that.columnClass(column)}>
            {rowTemplate ? rowTemplate({ row, column, index }) : that.render(row, column, index, h)}
        </td>)
      }.bind(that));

      if (that.hasChildRow && !that.opts.childRowTogglerFirst) columns.push(childRowToggler);

      rowClass = that.opts.rowClassCallback?that.opts.rowClassCallback(row):'';

      rows.push(<tr class={rowClass} on-click={that.rowWasClicked.bind(that, row)} on-dblclick={that.rowWasClicked.bind(that, row)}>{columns} </tr>);

    // Below is the code that renders open child rows
      if (that.hasChildRow && this.openChildRows.includes(row[rowKey])) {

        let template = this._getChildRowTemplate(h, row);

        rows.push(<tr class='VueTables__child-row'><td colspan={that.allColumns.length+1}>{template}</td></tr>);
      }

    }.bind(that))

    return rows;

}

切换方法代码：

  module.exports = function (rowId, e) {

  if (e) e.stopPropagation();

  if (this.openChildRows.includes(rowId)) {
    var index = this.openChildRows.indexOf(rowId);
    this.openChildRows.splice(index,1);
  } else {
    this.openChildRows.push(rowId);
  }
};

_getChildRowTemplate方法：

module.exports = function (h, row) {
  // scoped slot
  if (this.$scopedSlots.child_row) return this.$scopedSlots.child_row({ row: row });

  var childRow = this.opts.childRow;

  // render function
  if (typeof childRow === 'function') return childRow.apply(this, [h, row]);

  // component
  return h(childRow, {
    attrs: {
      data: row
    }
  });
};

Answer 1

我改变了：

if (that.hasChildRow && this.openChildRows.includes(row[rowKey])) {

        let template = this._getChildRowTemplate(h, row);

        rows.push(<tr class='VueTables__child-row'><td colspan={that.allColumns.length+1}>{template}</td></tr>);
}

为：

  rows.push(that.hasChildRow && this.openChildRows.includes(row[rowKey])?
    <tr class='VueTables__child-row'><td colspan={that.allColumns.length+1}>{this._getChildRowTemplate(h, row)}</td></tr>:h());

瞧！

关于Vue.js 2

1 个答案: