el-table中通過renderHeader方法為表頭添加hover等效果

在我們的日常工作中有時候需要為element表格的表頭進行自定義操作。在element官網中也有提到renderHeader方法。但是並未給出具體實現方法。現在具體說一下。

在element官網（https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes）中給出了這種方法，需要的可以點進去看一下如下圖所示：

 

 

下面說一下具體的代碼操作

<el-table
          size="small" border
          v-loading="loading"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="city_name"
            label="城市" >
          </el-table-column>
          <el-table-column prop="maxprice" :render-header="renderHeader" > 
            <template slot-scope="scope">
              <span><span class="skucost-pruice">￥</span><span class="skucost-pruice">{{scope.row.maxprice}}</span></span> 
            </template>
          </el-table-column>
          <el-table-column
            prop="company_name"
            label="機構名稱" >
          </el-table-column>
           <el-table-column
            prop="area_name"
            label="區域" >
          </el-table-column>
          <el-table-column prop="price" label="價格">
            <template slot-scope="scope">
              <span><span class="skucost-pruice">￥</span><span class="skucost-pruice">{{scope.row.price}}</span></span> 
            </template>
          </el-table-column>
        </el-table>

 如上面代碼所示

el-table-column prop="maxprice" :render-header="renderHeader"
再這一行的表頭中加入了renderHeader方法。再在methods方法之中寫上renderHeader方法，如下代碼所示：

//自定義表頭
    renderHeader(h){
       return h('span', {}, [
        h('span', {}, '價格'),
        h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '城市價格為該城市所有加盟商價格的最高價' }}, [
           h('i', { slot: 'reference', class:'el-icon-question'}, '')
          ])
       ])
    },

 

上面代碼中

 '價格' 是表頭信息，

trigger: 'hover', 是自定義方法

content: '城市價格為該城市所有加盟商價格的最高價'  是提示信息

class:'el-icon-question'  是自定義圖標名稱

效果圖如下所示：

 

 

 這樣就可以實現要求了，希望對你有幫助，也歡迎大神指正