Question

这是一个相当棘手的问题，我很希望，但是如果有人回答这个问题，我会感到惊讶。

我需要每25条记录重复一个标题行。 问题是IE 。如果我将trait HasVirtualFields { public function save(array $options = []) { if (isset($this->virtualFields)) { $this->attributes = array_diff_key($this->attributes, array_flip($this->virtualFields)); } $return = parent::save($options); $this->refresh(); // Refresh the model for the new virtual column values return $return; } } class YourModel { use HasVirtualFields; protected $virtualFields = ['grand_total']; }循环放在tbody和tr之间的v-for标记内，则IE 11将其从DOM中“提升”到<template>之前，因此引用了<table> i标签中的datarow会导致错误。

但是，如果我将<tr>移至v-for，则该循环有效且IE不在乎，但是CSS令人反感，我无法在最后覆盖它，并且所有这些<tbody>在语义上是错误的。

所以我不禁要问，当i = 25、50、75等时，有什么方法可以使用VueJS在循环tr下方“动态”添加<tbody>吗？

<tr>

Answer 1

一种替代解决方案，使用计算属性来重塑数据集，然后获得所需的结果，如下面的演示所示：

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    dataset: Array.from({length: 10}, (v, i) => Array.from({length: 3}, (subV, subI) => {
      return i
    }) ),
    headerOccp: 4,
    headers: ['A', 'B', 'C']
  },
  computed: {
    computedDataset: function () {
      return this.dataset.reduce((pre, cur) => {
        if(pre.length % this.headerOccp === 0) {
          pre.push({'type':'header', 'data':this.headers})
        }
        pre.push({'type':'row', 'data':cur})
        return pre
      }, [])
    }
  }
})

.header {
  background-color: green;
  font-weight: bold;
}
.row {
  color: red;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <table>
      <tbody>
      <tr v-for="(row, rowIndex) in computedDataset" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row.data" :key="cellIndex" :class="row.type">{{ cell }}</td>
      </tr>
  </table>
  <h3>Data:</h3>
  <p>
    {{computedDataset}}
  </p>
</div>

VueJS每25秒钟添加一次-IE DOM无法识别<template>

1 个答案: