fix: the contents inside `pre` tag will not be wrapped (#263)

This commit is contained in:
Lykin 2024-06-28 16:23:51 +08:00
parent 908d4c7007
commit e2093a89bf
6 changed files with 9 additions and 5 deletions

View File

@ -136,7 +136,7 @@ const valueColumn = computed(() => ({
// }, // },
render: (row) => { render: (row) => {
if (isCode.value) { if (isCode.value) {
return h('pre', {}, row.dv || row.v) return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
} }
if (row.rm === true) { if (row.rm === true) {
return h('s', {}, row.dv || row.v) return h('s', {}, row.dv || row.v)

View File

@ -108,7 +108,7 @@ const valueColumn = computed(() => ({
}, },
render: (row) => { render: (row) => {
if (isCode.value) { if (isCode.value) {
return h('pre', {}, row.dv || row.v) return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
} }
return row.dv || row.v return row.dv || row.v
}, },

View File

@ -107,7 +107,7 @@ const valueColumn = computed(() => ({
}, },
render: (row) => { render: (row) => {
if (isCode.value) { if (isCode.value) {
return h('pre', {}, row.dv || row.v) return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
} }
return row.dv || row.v return row.dv || row.v
}, },

View File

@ -93,7 +93,7 @@ const valueColumn = computed(() => ({
}, },
// sorter: (row1, row2) => row1.value - row2.value, // sorter: (row1, row2) => row1.value - row2.value,
render: (row) => { render: (row) => {
return h('pre', {}, row.dv) return h('pre', { class: 'pre-wrap' }, row.dv)
}, },
})) }))
const actionColumn = { const actionColumn = {

View File

@ -157,7 +157,7 @@ const valueColumn = computed(() => ({
// sorter: (row1, row2) => row1.value - row2.value, // sorter: (row1, row2) => row1.value - row2.value,
render: (row) => { render: (row) => {
if (isCode.value) { if (isCode.value) {
return h('pre', {}, row.dv || row.v) return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
} }
return row.dv || row.v return row.dv || row.v
}, },

View File

@ -177,6 +177,10 @@ body {
animation: rotate 2s linear infinite; animation: rotate 2s linear infinite;
} }
.pre-wrap {
white-space: pre-wrap;
}
@keyframes rotate { @keyframes rotate {
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);