排序表格的列

功能展示：

1、展示表头及右侧排序箭头且箭头默认灰色
2、首次点击默认升序排列且箭头变为蓝色
3、再点击变为降序排列（如此循环）
4、点击其他列，上一排列箭头变回灰色

---

代码：

HTML

<el-table
  :data="tableDataFiltered"
  :max-height="maxheight"
  border
  stripe
  class="table"
  ref="multipleSelection"
  :header-cell-style="{background:'#d5d8df',color:'black'}"
  @header-click="changeSortIconCol"
>
      <!-- 点击改变箭头样式的函数changeSortIconCol -->
   <el-table-column prop="lon" label="经度" align="center" sortable :sort-orders="['ascending', 'descending']">
            <!-- slot插槽锁定箭头位置 -->
     <template slot="header">
         <span style="margin-right:5px;" >经度</span>
         <!-- 箭头icon，默认样式设置为sorting-default -->
         <i style="font-size:18px;" class="el-icon-caret-top sorting-default"  ref="lonRef"></i>
     </template>
   </el-table-column>
</el-table>    

JS

changeSortIconCol (column, event ) {//表头排序切换图标
      if(column.property == 'lon') {
        this.changeSortIcon ('lonRef')
      }else if(column.property == 'lat') {
        this.changeSortIcon ('latRef')
    },
    // 点击切换排序按钮
    changeSortIcon (property ) {
    //如果‘默认灰’变蓝；否则{如果‘上箭头’变下箭头,否则上箭头}
      this.$refs[property].className.indexOf('sorting-default') != -1 ? this.$refs[property].className='el-icon-caret-top sorting-blue':this.$refs[property].className.indexOf('el-icon-caret-top') != -1 ? this.$refs[property].className='el-icon-caret-bottom sorting-blue':this.$refs[property].className='el-icon-caret-top sorting-blue'
   //如果未选中则变为默认灰
      property =='latRef'? {}: this.$refs.latRef.className='el-icon-caret-top sorting-default'
      property =='lonRef'? {}: this.$refs.lonRef.className='el-icon-caret-top sorting-default'
      },
    },

css

.sorting-blue{
  color: #3370ff;
}
.sorting-default{
  color: grey;
}

---

知识点：

1、 Html中type 2、 html中各属性解释 3、 JS语法

1、type是HTML中一个标签属性
——规定input元素的类型、script标签中规定脚本MIME类型
MIME 类型（媒体类型）
浏览器通常使用MIME类型（而不是文件扩展名）来处理URL。
通用 结构:type/subtype
独立类型表明了对文件的分类:text image audio video application

2、各属性解释
1、border：表格边框（不加默认false）
2、stripe：表格斑马纹
3、header-cell-style="{background:’#d5d8df’,color:‘black’}"：头背景色
4、sortable :sort-orders="[‘ascending’, ‘descending’]"：可排序表头，点击时先升(ascending)再点降(descending)
ps：[‘ascending’, ‘descending’,‘null’]点击-升。再点-降。再点-不排
5、ref 被用来给元素或子组件注册引用信息

---

3、JS语法
1、indexOf
var str = “abcdefghijklmn”;
var i = str.indexOf(‘d’); //结果为3
如果没有匹配成功，返回-1
2、A？B：C？D：E

if(A){B}
else{
  if(C){D}
  else{E}
}