表头筛选、排序样式修改

src/components/TableHeaderCell/index.vue

@@ -25,25 +25,26 @@
       v-if="(filterable && filterStyle === 'arrow') || sortable"
       class="button-wrapper"
     >
-      <template v-if="filterable && filterStyle === 'arrow'">
-        <el-icon
-          ref="buttonRef"
-          v-click-outside="clickOutsideHandler"
-          :class="[
-            'filter-arrow',
-            { 'arrow-active': active, 'arrow-expand': expand },
-          ]"
-        >
+      <div
+        v-if="filterable && filterStyle === 'arrow'"
+        ref="buttonRef"
+        v-click-outside="clickOutsideHandler"
+        :class="[
+          'filter-arrow',
+          { 'arrow-active': active, 'arrow-expand': expand },
+        ]"
+      >
+        <el-icon>
           <CaretBottom />
         </el-icon>
-      </template>
-      <template v-if="sortable">
-        <el-icon class="sort-button" @click="sortChange">
+      </div>
+      <div v-if="sortable" class="sort-button" @click="sortChange">
+        <el-icon>
           <SortUp v-show="sortRule === 'ascending'" />
           <SortDown v-show="sortRule === 'descending'" />
           <Sort v-show="!sortRule" />
         </el-icon>
-      </template>
+      </div>
     </div>
   </div>
   <el-popover
@@ -69,7 +70,7 @@
       :teleported="false"
       @change="
         newVal => {
-          $emit('update:filter-values', newVal)
+          emit('update:filterValues', newVal)
         }
       "
     >
@@ -113,7 +114,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:sortRule'])
+const emit = defineEmits(['update:filterValues','update:sortRule'])
 
 const selections = ref<string[]>([])
 const expand = ref(false)
@@ -186,10 +187,15 @@ const sortChange = () => {
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
+    > div {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
     .filter-arrow {
-      display: block;
       transition: 0.3s transform;
-      cursor: pointer;
       &.arrow-expand {
         transform: rotate(-180deg);
       }
@@ -199,10 +205,6 @@ const sortChange = () => {
       }
     }
   }
-  .sort-button {
-    display: block;
-    cursor: pointer;
-  }
 }
 
 .el-select-dropdown__item.hover {