Memecah baris dalam jadual Bootstrap: Panduan untuk melaksanakan pemecahan baris dalam jadual Bootstrap

Question

Saya cuba mencipta .join() pada tatasusunan di dalam jadual. Hasil yang dijangkakan ialah setiap kenderaan (dalam contoh di bawah) berada dalam satu baris.

Saya dah cuba guna .join("rn") 和 .join("<br />") tapi tak berkesan. Apa yang saya terlepas?

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>

Coretan kod yang sama seperti di atas, tetapi pada CodePen.

Answer 1

Andaikan anda mahu ia sentiasa berada pada baris yang berasingan (dan bukan hanya selepas mengklik butang dalam contoh), maka anda boleh menggunakan <b-table> 提供的插槽来自定义该列的内容，并使用一个简单的 v-for 来渲染它自己的 <div> untuk setiap elemen.

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

Masalah yang anda lihat ialah kandungan tidak ditafsirkan jadi ia dipaparkan sebagai teks. Untuk melaraskan perkara ini, gunakan cell(key) 插槽。然后在槽中，使用 v-html untuk mentafsir rentetan sebagai 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