1.封装表格条件筛选组件

2.修复上传文件组件的列表无法删除文件

src/components/TableFilter/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-popover trigger="click" placement="top" :width="300" :hide-after="0">
+    <el-checkbox-group v-model="filters" style="overflow: auto;height: 300px">
+      <el-input size="small" v-model="search" placeholder="搜索" style="margin-bottom:5px" />
+      <el-checkbox v-for="item in options" style="display:block;" :label="item.filter + '  （' + item.count + '）'" :value="item.filter" size="small" />
+    </el-checkbox-group>
+    <div style="text-align: center; margin: 0">
+      <el-button size="small" text @click="reset">重置</el-button>
+      <el-button size="small" type="primary" @click="confirm">筛选</el-button>
+    </div>
+    <template #reference>
+      <div style="display: inline-block">
+        <el-button link>
+          <el-icon :color="filters.length > 0 ? '#ff6154' : ''">
+            <ArrowDown />
+          </el-icon>
+        </el-button>
+      </div>
+    </template>
+  </el-popover>
+</template>
+
+<script>
+export default {
+    props: {
+        // 已勾选的筛选条件
+        filtersProp: {
+            default: []
+        },
+        // 所有筛选项
+        filterOptionsProp: {
+            default: []
+        }
+    },
+    data() {
+        return {
+            filters: [],
+            filterOptions: [],
+            search: null
+        };
+    },
+    created() {
+       this.filters = this.filtersProp;
+       this.filterOptions = this.filterOptionsProp;
+    },
+    // 监听父级的值变化
+    watch: {
+        filtersProp(newVal) {
+            this.filters = newVal;
+        },
+        filterOptionsProp(newVal) {
+            this.filterOptions = newVal;
+        }
+    },
+    computed: {
+        // 筛选 筛选条件
+        options() {
+            if (this.search) {
+                return this.filterOptions.filter((option) => option.filter.includes(this.search));
+            } else {
+                return this.filterOptions;
+            }
+        }
+    },
+    methods: {
+        // 重置筛选
+        reset() {
+            this.filterOptions = []; 
+            this.filters = []; 
+            this.search = null;
+            this.$emit('reset', this.filters);
+        },
+        // 确认筛选
+        confirm() {
+            this.$emit('confirm', this.filters);
+        }
+    }
+};
+</script>
+
+<style scoped>
+:deep(*) {
+    color-scheme: light;
+    --el-color-primary: #ff6154;
+    --el-color-primary-light-3: #ff7154;
+    --el-color-primary-light-5: #ff8154;
+    --el-color-primary-light-7: #ff9154;
+    --el-color-primary-light-8: #ffa999;
+    --el-color-primary-light-9: #ffa854;
+    --el-color-primary-dark-2: #ff8154;
+}
+</style>