vxe-grid自定义排序图标修改（手机端）

项目中要求将vxe-grid下图的排序按钮改成

 

 

 vxe官网有vxe-table 的自定义排序图标写法，如果是改xue-table的移步到复杂表格自定义排序图标，由于vxe-grid不可以写vxe-columns,找了一大圈才找到现在的解决方法（自己摸索的，有更好方法的望指点）：

首先 方法我用的是在vxe-grid写自定义插槽

1.首先vxe-grid关于排序的sort-config配置（这里贴的代码用的是官网代码）

  <vxe-grid
      ref="xGrid"
      class="my-grid66"
      v-bind="gridOptions"
      @checkbox-change="checkboxChangeEvent"
      :sort-config="{showIcon:false,remote:true,trigger:'cell'}"
      @checkbox-all="checkboxChangeEvent">

2.写自定义的插槽(这里是排序的文字和按钮）

 <template #name_header="{column}">
      <div v-if="打开排序">
          <span>{{column.title}}</span>
          <img src="./升序" v-if="column.order==='desc'">
          <img src="./降序" v-else-if="column.order==='asc'">
          <img src="./默认" v-else">
        </div>
        <div v-else>
          <span>{{column.title}}</span>
        </div>
 </template>

3.引入插槽

 slots: {
        // 使用插槽模板渲染
        header: 'name_header',
      }

4.移动端需要我们通过点击来实现表格的升序降序，默认排序

so最后一步是写升序降序的方法

headerCellClick({column}){
  if(column.sortEvent && !column.order){
    column.order='asc'
  }else if(column.order ==='asc'){
    column.order=='desc'
  }else  {
    column.order=''
  }
}

 大功告成！