vuetify.js - Vuetify v-data-table，如何从 v-textarea 输入渲染换行符(回车键)

Question

我使用回车键从 v-textarea 输入数据，结果如下

Hello\nWorld

在默认或 rawHtml 不工作的情况下在 v-data-table 中呈现此内容

<v-data-table 
:headers="headers"
:items="dataTable"
hide-default-footer>
<template v-slot:item="props">
<tr>
<td><span v-html="props.item.s"></span></td> <!-- rawHtml -->
<td>{{ props.item.s }}</td> <!-- default-->
</tr>
</template>
</v-data-table>

Answer 1

Vuetify 使用浏览器约定来呈现表格，在 <td> 中呈现换行符, 建议要么使用 pre标签或 CSS 样式 td { white-space:pre }

查看此 post 的答案.

我使用 v-data-table 中的模板内联 CSS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
                {
                    text: 'ID',
                    align: 'start',
                    sortable: false, 
                    value: 'name'
                }, 
                {
                    text: 'Description',
                    align: 'start',
                    sortable: false, 
                    value: 'description'
                }
            ],
            items: [
                {
                    name: "001",
                    description: `First line of content.  
Second line of content.  
      Third line of content (with left tab).`
                },
                {
                    name: "002",
                    description: `First line of content.  
Second line of content.  
Third line of content (with left tab).`
                },
            ]
    }
  },
})


<!-- begin snippet: js hide: false console: true babel: false -->

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app id="other">
    <v-data-table :headers="headers" :items="items" item-key="name" class="elevation-1">
      <template v-slot:item.description="{ item }">
               <div style="white-space: pre-wrap;">{{ item.description }}</div>
            </template>
    </v-data-table>
  </v-app>
</div>