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三條渲染規則

1. 給HTML的DOM節點加一個不重復data屬性(形如：data-v-2311c06a)來表示他的唯一性
2. 在每句css選擇器的末尾（編譯后的生成的css語句）加一個當前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式
3. 如果組件內部包含有其他組件，只會給其他組件的最外層標簽加上當前組件的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>    
// 將要修改的樣式寫到全局中 

<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>   

　　game over~