共计 1521 个字符,预计需要花费 4 分钟才能阅读完成。
须要渲染进去的 html 的内容为:
"<table style=\"width: auto;\"><tbody><tr><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">123</th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\"></th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\"></th></tr><tr><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">44</td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\"></td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\"></td></tr></tbody></table><p><br></p><table style=\"width: auto;\"><tbody><tr><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">a</th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">b</th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">c</th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">d</th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">e</th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">f</th><th colSpan=\"1\"rowSpan=\"1\"width=\"auto\">g</th></tr><tr><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">1</td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">2</td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">3</td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">4</td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">5</td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">6</td><td colSpan=\"1\"rowSpan=\"1\"width=\"auto\">7</td></tr></tbody></table>"
最开始应用 v -html 解析富文本中的 table,代码如下:
<div v-html="remarkHtml"></div>
页面渲染展现为下图,table 中的实线框没有渲染进去
实线框没有渲染进去的起因是因为 v -html 是富文本中有啥渲染啥,所以,如果在 table 中没有设置款式的话,就须要手动增加款式!
解决方案 :为渲染进去的 table 设置款式
<div class="html" v-html="remarkHtml"></div>
// css
.html {
table {border-collapse: collapse;}
td, th {
border: 1px solid #ccc;
min-width: 50px;
height: 20px;
}
th {background-color: #f1f1f1;}
}
这样就能够胜利渲染进去 table 表格
正文完
发表至: javascript
2022-07-21