如何在表格中呈現換行符↵ - Vuejs？

Question

我面臨與如何在 VueJS 中渲染換行符↵ 完全相同的問題？ .

我想在 Vue 中有一個 ↵ 時呈現一個換行符，表中有一個值，並且該表的數據來自 API 作為 JSON ZA8CFDE6331BD59EB2AC96F8911C4B666 因此，對於我鏈接的問題，我無法遵循公認的答案（因為我不確定如何在表格中呈現換行符）。

我試過的：

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: ["first_name", "last_name", "age", "hobbies"],
      items: [
        {
          isActive: true,
          age: 40,
          first_name: "Dickerson",
          last_name: "Macdonald",
          hobbies : "Reading↵ Singing"
        },
        { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw", hobbies : "Surfing↵ Stamp Collecting↵ Games" },
      ],
    };
  },
};
</script>

提前致謝：）

Answer 1

您可以在迭代computed屬性中items的元素時使用此解決方案，並添加white-space: pre-line; 對b-table進行樣式設置以保留新行：

 new Vue({ el:"#app", data() { return { fields: ["first_name", "last_name", "age", "hobbies"], items: [ { isActive: true, age: 40, first_name: "Charles", last_name: "Macdonald", hobbies: "Reading↵ Singing" }, { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw", hobbies: "Surfing↵ Stamp Collecting↵ Games" } ] } }, computed: { myItems: function() { // iterate over items return this.items.map(item => { // copy current item const current = Object.assign({}, item); // iterate over item keys Object.keys(current).forEach(key => { // if value of this key is a string, replace if(typeof current[key] === 'string') current[key] = current[key].replace(/↵/g, '\n'); }); return current; }); } } });

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app"> <b-table striped hover:items="myItems":fields="fields" style="white-space: pre-line;"></b-table> </div>

Answer 2

只需使用 CSS

<style>
.table tbody tr td {
  white-space: pre-wrap
}
</style>

此外，您需要使用計算的道具， :items="myItems"

如果您不喜歡居中，則在 header 和內容上再次使用 CSS 和text-align:left 。

<style>
.table thead tr th {
  text-align:left
}
.table tbody tr td {
  white-space: pre-wrap;
  text-align:left
}
</style>