Rompre les lignes dans les tables Bootstrap : guide pour implémenter la coupure des lignes dans les tables Bootstrap

Question

J'essaie de créer .join() sur un tableau à l'intérieur d'une table. Le résultat attendu est que chaque véhicule (dans l'exemple ci-dessous) est aligné.

J'ai essayé d'utiliser .join("rn") 和 .join("<br />") mais ça ne marche pas. Qu'est-ce que j'ai raté?

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>

Même extrait de code que ci-dessus, mais sur CodePen.

Answer 1

En supposant que vous souhaitiez qu'il soit toujours sur une ligne distincte (et pas seulement après avoir cliqué sur le bouton dans l'exemple), vous pouvez alors utiliser <b-table> 提供的插槽来自定义该列的内容，并使用一个简单的 v-for 来渲染它自己的 <div> pour chaque élément.

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" }
      ]
    };
  }
});

sssccc
sssccc


  
    
  

Answer 2

Le problème que vous rencontrez est que le contenu n'est pas interprété et est donc affiché sous forme de texte. Pour ajuster cela, utilisez cell(key) 插槽。然后在槽中，使用 v-html pour interpréter la chaîne au format 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("
")
      }
    }
  }
});

sssccc
sssccc


  Join Array