先上效果图：
数据格式：字符串
代码如下：
<template> <div style="margin-top:20px"> <el-table :data="tableData" style="width: 100%" border > <el-table-column prop="parameter" label="参数" ></el-table-column> <el-table-column prop="type" label="类型" ></el-table-column> <el-table-column prop="describe" label="描述" ></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { parameter: "parameter1", type: "String", describe: "类名", }, { parameter: "parameter2", type: "Number", describe: "1：中国地图彩色版 \n2：中国地图暖色版\n3：中国地中国地图蓝黑版\n4：中国地图灰色版", }, ], }; }, }, }; </script> <style > .cell{ white-space: pre-wrap !important; } </style>
在网上查了很多种方法，但都没有效果。
图中加入\n是起换行的作用，但是光写这个是不够的。
还需要在样式里加上style="white-space: pre-wrap;"
一般写到这里，已经可以实现效果了。
因为我用的Element UI框架，所以是打开F12查看表格内文字的父级元素，给这个父级元素加上
white-space: pre-wrap
提示：
如果你的CSS里有<style scoped>，那么还是不生效的，需要删掉标签中的scoped。
还有一种比较简单的方法v-html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span v-html='msg'></span> </div> </body> <script src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg:'这是一个消息<br>这是另外一个消息', } }) </script> </html>
