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

 

 使用 render-header 修改图标, 官方文档有说明

在 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>
        )
      }
    },　　

可以根据自己的需求, 自行更改