随笔- 25 文章- 1 评论- 0 阅读- 31152

element-ui之el-tooltip 在其加自定义类名

<el-table-column
  align="center"
  width="300"
  label="出险摘要">
  <template slot-scope="scope">
     <el-tooltip placement="top" popper-class="popper" :content="scope.row.DAMAGECONTEXT">
       <span style="white-space: nowrap;">{{scope.row.DAMAGECONTEXT}}</span>
     </el-tooltip>
  </template>
</el-table-colum>

大家是不是都是这样写的，检查元素后，发现类名添加上了，但是写的样式并没有应用，这是因为样式中有用到scoped

在style标签上添加scoped属性，表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；但另一方面的弊端是如果添加了scoped属性，那么样式将会变得不易修改。这也是引入它出现的新的问题；

总结一下scoped三条渲染规则

给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

当然这个新问题是可以解决的，就是直接在本文件另外写一个不带scoped属性的style标签，也就意味着要加两个style，一个用于私有样式，一个用于共有样式。这肯定是有点shit的，并且这两种解决方案都回避不了一个问题：权重！！！

<style scoped lang="less">
  .exportRecordL_box{
      padding: 24px;
     .popper{
       margin-left: 45px !important;
     }
     .fieldTitlt{
      font-size:16px;
      font-weight: 600;
    }
  }
</style>    <br>// 将要修改的样式写到全局中 <style scoped lang="less">
  .exportRecordL_box{
      padding: 24px;
     .fieldTitlt{
      font-size:16px;
      font-weight: 600;
    }
  }
</style>    <style scoped lang="less">  .popper{
       margin-left: 45px !important;
   }</style>