使用 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>
)
}
},
可以根据自己的需求, 自行更改
标签：return,排序功能,column,label,table,element,图标 From： https://www.cnblogs.com/wqddmg/p/17171224.html