最近在研究富文本编辑器，要求直接从Excel表格粘贴复制到编辑器中，并成功渲染出表格样式

在vue中渲染一段纯HTML一般会采用v-html，但是这种方式下所有样式都会失效

<div v-html="this.editorData" class="content-html"></div>

<style scoped lang="less">
  .content-html{
    /* table 样式 */
    table {
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }
    table td, table th {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 3px 5px;
    }
    table th {
      border-bottom: 2px solid #ccc;
      text-align: center;
    }
  }

</style>

解决办法：

（1）设置全局样式，把需要渲染的样式放到全局样式表里global.css

（2）可以使用deep scoped来实现对v-html的样式应用，并且不设置为全局

<style scoped lang="less">
  .content-html{
    /* table 样式 */
    /deep/ table {
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }
    /deep/ table td, table th {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 3px 5px;
    }
    /deep/ table th {
      border-bottom: 2px solid #ccc;
      text-align: center;
    }
  }

</style>

参考

https://zhuanlan.zhihu.com/p/187571392