列表过滤器提取为组件ListFilter，

bugList初步完成

src/components/ListFilter.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="list-filter-container">
+    <el-select
+      class="select"
+      size="small"
+      v-model="assignment"
+      @change="handleFilterChange">
+      <el-option
+        v-for="item in assignmentOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+    <el-select
+      class="select"
+      size="small"
+      v-model="status"
+      @change="handleFilterChange"
+      style="margin-left: 10px">
+      <el-option
+        v-for="item in statusOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+    <el-select
+      class="select"
+      size="small"
+      v-model="sort"
+      style="margin-left: auto"
+      @change="handleFilterChange">
+      <el-option
+        v-for="item in sortOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'ListFilter',
+  props: {
+    assignmentOptions: {
+      type: Array,
+      default() {
+        return [{
+          value: 0,
+          label: '全部',
+        }, {
+          value: 1,
+          label: '分配到我',
+        }];
+      },
+    },
+    statusOptions: {
+      type: Array,
+      default() {
+        return [{
+          value: 0,
+          label: '全部状态',
+        }, {
+          value: 1,
+          label: '已完成',
+        }, {
+          value: 2,
+          label: '进行中',
+        }];
+      },
+    },
+    sortOptions: {
+      type: Array,
+      default() {
+        return [{
+          value: 0,
+          label: '默认排序',
+        }, {
+          value: 1,
+          label: '创建时间',
+        }, {
+          value: 2,
+          label: '优先级',
+        }];
+      },
+    },
+  },
+  data() {
+    return {
+      assignment: 0,
+      status: 0,
+      sort: 0,
+    };
+  },
+  methods: {
+    handleFilterChange() {
+      this.$emit('filter-change', {
+        assignment: this.assignment,
+        status: this.status,
+        sort: this.sort,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.list-filter-container{
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+.select{
+  width: 130px;
+}
+</style>

src/views/Project/BugList.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="content">
     <button @click="showRightForm">from test</button>
-    <div></div>
+    <ListFilter></ListFilter>
     <List
+      style="margin-top: 10px"
       :listData="bugData"
       :total="300"
       :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange"></List>
@@ -14,9 +15,10 @@
 <script>
 import RightForm from '../../components/RightForm.vue';
 import List from '../../components/List.vue';
+import ListFilter from '../../components/ListFilter.vue';
 
 export default {
-  components: { RightForm, List },
+  components: { ListFilter, RightForm, List },
   data() {
     return {
       bugData: [

src/views/ProjectContainer.vue

@@ -29,9 +29,10 @@ export default {
   margin-left: 42px;
   min-height: 60vh;
 }
+/* 用于功能页组件最外层 */
 .content{
   width: 100%;
-  padding: 15px;
+  padding: 25px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;