如何让 HTML识别 string 里的 '\n' 并成功换行显
在css样式里面加上 white-space: pre-line; 就能识别后台string数据中的\n，将其换行
后台请求：
private object GetGridList(Pagination pagination, string keyword)
{
var list = xiangmuapp.GetList(pagination, keyword);
var listdetail = xiangmudetailapp.GetList(pagination, keyword);
foreach (var item in list)
{
var dataItemList = listdetail.FindAll(t => t.zhuid.Equals(item.zhuid));
List<temp> templist = new List<temp>();
foreach (var itemList in dataItemList)
{
bool flag = true;
foreach (var t in templist)
{
if (t.f_item_id == itemList.f_item_id)
{
t.ListToString += "套餐：" + itemList.F_Package_Name + " 金额：" + itemList.F_Package_Money +
"\n";
flag = false;
break;
}
}
if (flag)
{
temp temp = new temp();
temp.money = itemList.gongdemoney;
temp.name = itemList.gongde;
temp.f_item_id = itemList.f_item_id;
temp.ListToString = "套餐：" + itemList.F_Package_Name + " 金额：" + itemList.F_Package_Money +
"\n";
templist.Add(temp);
}
}
item.xiangmudetail = templist;
}
return list;
}
前台片段：
vm = new Vue({
el: '#app',
data: {
BusInessList: [],
historyColumns: [
{
type: 'expand',
width: 50,
render: (h, params) => {
return h('Row', { class: ['expand-row'] }, [
h('Row', { class: ['ivu-col-span-20'] },
[params.row.xiangmudetail.map(v => { // 遍历后台params.row.product
return h('Col', { class: ['ivu-col-span-5 expand-list'] }, [
[h('span', { class: ['expand-key'] }, '项目：' + v.name)],
[h('span', {
class: ['expand-value'],
style: {
'white-space': 'pre-line'
},
}, v.ListToString)]
])
vm.$forceUpdate();
})]
),
])
}
},
{
title: '佛事名称',
key: 'taocanname',
sortable: true,
},
{
title: '添加日期',
key: 'F_CreatorTime', render: function (h, params) {
return h('div',
new Date(this.row.F_CreatorTime).Format('yyyy-MM-dd')); /*这里的this.row能够获取当前行的数据*/
},
sortable: true
},
{
title: '总金额',
key: 'taocanmoney',
sortable: true,
render: (h, params) => {
return h('div', [
h('Tooltip', {
props: { placement: 'top' }
}, [
h('span', {
style: {
display: 'inline-block',
width: params.column._width * 0.9 + 'px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}, params.row.taocanmoney),
h('span', {
slot: 'content',
style: { whiteSpace: 'normal', wordBreak: 'break-all' }
}, params.row.taocanmoney)
])
])
}
},
{
title: '全选优惠金额',
key: 'tempmoney',
sortable: true,
render: (h, params) => {
return h('div', [
h('Tooltip', {
props: { placement: 'top' }
}, [
h('span', {
style: {
display: 'inline-block',
width: params.column._width * 0.9 + 'px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}, params.row.tempmoney),
h('span', {
slot: 'content',
style: { whiteSpace: 'normal', wordBreak: 'break-all' }
}, params.row.tempmoney)
])
])
}
},
{
title: '操作',
key: 'F_id',
width: 230,
fixed: 'right',
align: 'center',
render: (h, params) => {
return h('div',
[
h('Button',
{
props: {
type: 'info',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
vm.btn_Form(h, params)
}
}
},
'修改'),
h('Button',
{
props: {
type: 'success',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
vm.remove(h, params)
}
}
},
'查看'),
h('Button',
{
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
vm.remove(h, params)
}
}
},
'移除'),
]);
}
}
],
tableData: [],
loading: true,
page: {
page: 1, //当前页
rows: 10, //每页条数, 默认10条
records: 0, //总条数
total: 0, //总页数
sord: "DESC",//排序
sidx: "F_CreatorTime"//排序字段
}, //已完成项目翻页
}
