效果图如下

template部分的代码

<template>
  <div>
    <el-radio-group v-model="activeName" size="mini">
      <el-radio-button
        v-for="(item, index) in activeNames"
        :key="item.value"
        :label="item.name"
        @click.native="order(index, item.name)"
      >
        {{item.name}}
        <i class="el-icon-arrow-down" v-if="item.order"></i>
        <i class="el-icon-arrow-up" v-else></i>
      </el-radio-button>
    </el-radio-group>
    
  </div>
</template>

script部分的代码

export default {
  data() {
    return {
      activeName: "默认",
      //    checkList: ['A'],
      activeNames: [
        { name: "默认", order: true, value: 0, count: 0 },
        { name: "开始时间", order: true, value: 1, count: 0 },
        { name: "结束时间", order: true, value: 2, count: 0 },
        { name: "标签", order: true, value: 3, count: 0 }
      ]
    };
  },
  methods: {
    cli() {
      console.log(111);
    },
    order(index, name) {
      this.activeNames.forEach(item => {
        if (item.name.includes(name)) {
          //因为使用click.native点击事件的话每次都会点击两次，所以在这里我+0.5，单击就是1，双击就是2，
          item.count = item.count + 0.5;
          if (item.count === 1) {
            // 表示升序的逻辑
            item.order = true;
          } else if (item.count === 2) {
          //然后点击两次之后再把count的值设置为0
            item.count = 0;
            item.order = false;
            // 表示降序的逻辑
          }
          //   return;
        } else {
        //这里设置count的值为0的原因是因为如果之前是点击的默认，我点击其他的Radio，使他们可以重新进行累加，这里
        //主要是看自己代码的逻辑，也可以不重置
          item.count = 0;
        }
      });
    }
  }
};