功能1描述：

基于vue和element-ui实现鼠标移动在el-table某一列时，该列出现排序箭头。其他列没有排序箭头。

代码实现：

html：

<el-table
  :data="tableDataFiltered"
  @sort-change="sort"
  @header-click="changeSortIconCol"
  @mousemove.native="sort1move" @mouseleave.native="sort1leave"
>
<el-table-column prop="lon" label="经度" align="center" sortable :sort-orders="[ascending, descending]">
  <template slot="header">
      <span style="margin-right:5px;" @click="changeSortIcon(lonRef)">经度</span>
      <i v-show="this.sort2!=0" style="font-size:18px;" class="el-icon-caret-top sorting-default"  ref="lonRef"></i>
  </template>
</el-table-column>
   .....

JS data：

data() {
          
   
    return {
          
   sort1:0,
      sort2:0,}}

methods

SORT1(){
          
   this.sort1=1;this.sort2=0;this.sort3=0;this.sort4=0},
SORT2(){
          
   this.sort1=0;this.sort2=1;this.sort3=0;this.sort4=0},
sort1move(event){
          
   
  if(event.explicitOriginalTarget._prevClass&&event.explicitOriginalTarget._prevClass.indexOf("column_1")!=-1){
          
   this.SORT1()}
  if(event.explicitOriginalTarget._prevClass&&event.explicitOriginalTarget._prevClass.indexOf("column_2")!=-1){
          
   this.SORT2()}
},
sort1leave(){
          
   
  this.sort1=0;this.sort2=0
},

功能2描述：

在进入表头时触发，表格内容不触发

代码：

<el-table-column prop="name"  align="center" sortable :sort-orders="[ascending, descending]">    
     <template slot="header">
       <div @mousemove="sort1move" @mouseleave="sort1leave">
       <span style="margin-right:5px;" @click="changeSortIcon(nameRef)">航路点名称</span>
         <i v-show="this.sort1!=0" style="font-size:18px;" class="el-icon-caret-top sorting-default"  ref="nameRef"></i>
       </div>
     </template>
</el-table-column>

div加在template里面