如何让 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"//排序字段
                }, //已完成项目翻页
            }