Question

我第一次使用vue。我有一个需要在2列中显示并打印（需要时）的对象列表。我在这里codepen进行了所有设置，这些设置似乎可以在Chrome上正常运行。但是，当我尝试在IE上运行类似的代码时，浏览器仍按预期在两列中显示列表。但是，从第二页开始，打印功能似乎不起作用。第一页打印正确，但是从第二页开始，第二列变为第一列。我该如何解决？这是我的代码：

HTML

<main>
  <p><label>Columns:<label> <input type="number" v-model="colset"></p>
  <div class="container">
    <table class="col" v-for="column in columns">
      <tr class="item-container" v-for="item in column">
        <td>{{item.fname}}</td><td>{{item.lname}}</td><td>{{item.age}}</td>
      </tr>
    </table>
  </div>
</main>

CSS

.container {
  display: flex;
  border: 1px solid;
}
.col {
  margin: 10px;
  border: 1px solid;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.item-container {
   border: 1px solid;
   padding: 5px;
   margin: 5px;
}

VUE

new Vue({
  el: 'main',
  data: {
    items: [
      {fname: 'Long Item 1',lname: 'Long One',age: 2},
      {fname: 'Long Item 2',lname: 'Long Two',age: 3},
      {fname: 'Long Item 3',lname: 'Long Three',age: 4},
      {fname: 'Long Item 4',lname: 'Long  Four',age: 5},
      {fname: 'Long Item 5',lname: 'Long  Five',age: 6},
      {fname: 'Long Item 6',lname: 'Long  Six',age: 7},
      {fname: 'Long Item 7',lname: 'Long  Seven',age: 8}
    ],
    colset: 2
  },
  computed: {
    columns () {
      let columns = []
      let mid = Math.ceil(this.items.length / this.colset)
      for (let col = 0; col < this.colset; col++) {
         columns.push(this.items.slice(col * mid, col * mid + mid))
      }
      return columns
    }
  }
})

使用IE中的Vue无法在2列中打印对象列表

0 个答案: