element table 修改排序图标 保留原有排序功能

element table 修改排序图标 保留原有排序功能

---

前言

Element UI 组件做的很好，但是有时候我们在工作中会遇到各种各样的奇葩需求，显然Element UI 不能满足所有的需求，但是确实做的很好。我们使用的el-table还是能满足大部分需求的。保留功能，修改一些样式。

---

一、render-header方法

使用render-header属性，官网说明此属性是：列标题 Label 区域渲染使用的 Function的意思。它会给你定义的方法传三个参数方法名(h, { column, $index })，h函数是重新渲染，column是单元格对象，$index应该是下标(这个我没太了解，有知道的评论告诉我，谢谢哈)。

二、使用步骤

步骤一：在 el-table-column 添加属性 :render-header=“renderHeader”

<el-table-column prop="viewsNumber" sortable :render-header="renderHeader" label="浏览数量">
</el-table-column>

步骤二：

在 methods 里添加方法
这里 if 判断的是 升序 或 降序 或 无序 i 表现

renderHeader (h, { column, $index }) {
     if (column.order === 'ascending') {
       return (
         <div>
           <span>{column.label}</span>//需求修改标题名称
           <i class="el-icon-sort-up"></i>//修改图标
         </div>
       )
     } else if (column.order === 'descending') {
       return (
         <div>
           <span>{column.label}</span>
           <i class="el-icon-sort-down"></i>
         </div>
       )
     } else {
       return (
         <div>
           <span>{column.label}</span>
           <i class="el-icon-sort"></i>
         </div>
       )
     }
   },　

总结

终于满足客户的需求了，呜呜呜呜~
参考