Zeilenumbruch in Bootstrap-Tabellen: Eine Anleitung zur Implementierung des Zeilenumbruchs in Bootstrap-Tabellen

Question

Ich versuche, .join() auf einem Array in einer Tabelle zu erstellen. Das erwartete Ergebnis ist, dass sich jedes Fahrzeug (im Beispiel unten) in einer Reihe befindet.

Ich habe versucht, .join("rn") 和 .join("<br />") zu verwenden, aber es funktioniert nicht. Was habe ich verpasst?

new Vue({
  el: "#table",
  data() {
    return {
      items: [
        { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },
        { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },
        { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },
        { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }
      ],
      fields: [
        { key: "firstname", label: "First name" },
        { key: "lastname", label: "Last name" },
        { key: "cars", label: "Cars" }
      ]
    };
  },
  methods: {
    join() {
      for (let item of this.items) {
        item.cars = item.cars.join("<br />")
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="table">
  <b-button @click="join">Join Array</b-button>
  <b-table :fields="fields" :items="items" />
</div>

Gleiches Code-Snippet wie oben, aber auf CodePen.

Answer 1

假设您希望它始终位于单独的行上（并且不仅仅是在单击示例中的按钮之后），那么您可以使用 <b-table> 提供的插槽来自定义该列的内容，并使用一个简单的 v-for 来渲染它自己的 <div> 中的每个元素。

new Vue({
  el: "#table",
  data() {
    return {
      items: [
        { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },
        { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },
        { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },
        { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }
      ],
      fields: [
        { key: "firstname", label: "First name" },
        { key: "lastname", label: "Last name" },
        { key: "cars", label: "Cars" }
      ]
    };
  }
});

Answer 2

您看到的问题是内容未被解释，因此它显示为文本。要对此进行调整，请使用 cell(key) 插槽。然后在槽中，使用 v-html 来解释字符串作为 html。

new Vue({
  el: "#table",
  data() {
    return {
      items: [
        { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },
        { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },
        { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },
        { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }
      ],
      fields: [
        { key: "firstname", label: "First name" },
        { key: "lastname", label: "Last name" },
        { key: "cars", label: "Cars" }
      ]
    };
  },
  methods: {
    join() {
      for (let item of this.items) {
        item.cars = item.cars.join("
")
      }
    }
  }
});

  Join Array