功能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里面