先上效果图:
数据格式:字符串
代码如下:
<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>