解决element ui无法使用多个排序,点击一个其他排序消失问题。

3.0作者好像要加这个，现在是没有的。至于网上通过类名那些方法完全完全没必要，简单封装一下即可。

效果

组件代码

<template>
  <span class="sort" @click="toggleSort" :class="`active-${state?'asc':'desc'}`">
    <slot/>
    <span class="caret-wrapper">
    <i class="sort-caret ascending"></i>
    <i class="sort-caret descending"></i>
  </span>
  </span>
</template>

<script>
export default {
     
  name: "SortSlot",
  data(){
     
    return{
     
      // 排序状态
      state:true,
    }
  },
  methods:{
     
    /**
     * @deprecated 切换排序
     * @method toggleSort
     */
    toggleSort(){
     
      // TODD 未添加防抖
      this.state = !this.state;
      this.$emit('change',this.state)
    }
  }
}
</script>

<style lang="scss" scoped>
  .sort{
     
    &:hover{
     
      cursor: pointer;
    }
  }
  .active-asc{
     
    .caret-wrapper{
     
      .sort-caret{
     
        &:first-child{
     
          border-bottom-color: #409eff;
        }
      }
    }
  }
  .active-desc{
     
    .caret-wrapper{
     
      .sort-caret{
     
        &:last-child{
     
          border-top-color: #409eff;
        }
      }
    }
  }
</style>

使用

  <SortSlot>清运时间</SortSlot>

接收用change，根据bool值构建你想要的参数。本示例仅简单演示思路。
。