element table 保留原有排序功能，自定义排序图标

效果

使用 sortable 属性

核心代码  html；

<el-table-column label="消耗值" width='139' sortable>
	<template slot="header" slot-scope="scope">
		<div style='display: flex;align-items: center;'>
			{{ scope.column.label }}
			<div v-if="scope.column.sortable"
				style="display: flex;align-items: center;justify-content: center;flex-direction: column;height: 24px;margin-left: 3px;font-weight: bold;">
				<!-- ascending 升序 -->
				<i :style="{color: scope.column.order === 'ascending' ? '#56BDB8' : '#999999'}"
					:class="['el-icon-arrow-up' ,  { 'is-active': scope.column.order }]" />
				<!-- ascending 降序 -->
				<i :style="{color: scope.column.order === 'descending' ? '#56BDB8' : '#999999'}" style="margin-top:-4px"
					:class="['el-icon-arrow-down' ,  { 'is-active': scope.column.order }]" />
			</div>
		</div>
	</template>
	<template slot-scope="scope">
		
	</template>
</el-table-column>

如果原本的排序图标没有消失，可以利用css 控制 （注意使用深绑定）

style 代码

	::v-deep .caret-wrapper {
		display: none !important;
	}