cari

Rumah  >  Soal Jawab  >  teks badan

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

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.

P粉957661544P粉957661544313 hari yang lalu422

membalas semua(2)saya akan balas

  • P粉587780103

    P粉5877801032024-03-28 14:22:17

    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
    
    

    balas
    0
  • P粉111627787

    P粉1116277872024-03-28 12:39:47

    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

    balas
    0
  • Batalbalas