如何打破引導表內的行？

我正在嘗試.join()在表內的陣列上創建一個。預期結果是每輛車（在下面的示例中）都排在一行。

我試過使用.join("\r\n")and .join("<br />")，但它不起作用。我錯過了什么？

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>

上面相同的代碼段，但在CodePen 上。

uj5u.com熱心網友回復：

您看到的問題是內容沒有被解釋，因此它顯示為文本。要對此進行調整，請使用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("<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">
      <template #cell(cars)="data">
        <span v-html="data.value"></span>
      </template>
  </b-table>
</div>

uj5u.com熱心網友回復：

假設您希望它始終位于單獨的行上（不僅在單擊示例中的按鈕之后），那么您可以使用<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" }
      ]
    };
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="table">
  <b-table :fields="fields" :items="items">
    <template #cell(cars)="{ value }">
      <div v-for="car in value" :key="car">
        {{ car }}
      </div>
    </template>
  </b-table>
</div>

標籤：

上一篇：NGINX/SWAG：重寫URL以洗掉.php擴展名

下一篇：Bootstrap中的.d-grid類是什么