1

src/views/class/index.vue

@@ -9,7 +9,7 @@
           <el-tabs v-model="activeName" @tab-click="tabchange">
             <el-tab-pane label="班级名单" name="first">
               <el-col :span="24">
-                <name-list :data="studentList" @updateStu="toUpdateStu"></name-list>
+                <name-list :data="studentList" @updateStu="toUpdateStu" :gender="gender" @onConfirm="onConfirm"></name-list>
               </el-col>
             </el-tab-pane>
             <el-tab-pane label="班级分组" name="second">
@@ -109,6 +109,9 @@ export default {
       classInfo: {},
       // 课程信息
       lesson: [],
+
+      // 班级名单，性别筛选
+      gender: '全部',
     };
   },
   async created() {
@@ -143,9 +146,21 @@ export default {
       }
     },
     // first 查学生
-    async toGetStudentList() {
+    async toGetStudentList(gender) {
       const res = await this.getStudentList({ classid: this.user.classid });
-      if (res) this.$set(this, `studentList`, res.data);
+      if (res) {
+        if (gender == '全部' || gender == undefined) {
+          this.$set(this, `studentList`, res.data);
+        } else if (gender == '男' || gender == '女') {
+          let data = res.data.filter(i => i.gender == gender);
+          this.$set(this, `studentList`, data);
+        }
+      }
+    },
+    // 筛选
+    onConfirm(data) {
+      this.$set(this, `gender`, data);
+      this.toGetStudentList(data);
     },
     // first 修改学生职位
     async toUpdateStu(data) {

src/views/class/newClass/nameList.vue

@@ -1,6 +1,12 @@
 <template>
   <div id="nameList">
     <el-row>
+      <el-col :span="24">
+        <van-field readonly clickable name="picker" :value="gender" label="性别" placeholder="点击选择性别" @click="showPicker = true" />
+        <van-popup v-model="showPicker" position="bottom">
+          <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
+        </van-popup>
+      </el-col>
       <el-col :span="12" v-for="(stu, index) in data" :key="index" class="list">
         <div @click="changeJob(stu)">
           <p class="name">{{ stu.name }}</p>
@@ -26,6 +32,7 @@ export default {
   name: 'nameList',
   props: {
     data: { type: Array, default: () => [] },
+    gender: { type: String },
   },
   components: {},
   data: function() {
@@ -33,6 +40,8 @@ export default {
       show: false,
       form: {},
       selectList: [{ name: '文艺委员' }, { name: '安全委员' }, { name: '宣传委员,' }, { name: '普通学员' }],
+      columns: ['男', '女', '全部'],
+      showPicker: false,
     };
   },
   created() {},
@@ -47,6 +56,10 @@ export default {
       console.log('in function:');
       this.$emit('updateStu', info);
     },
+    onConfirm(value) {
+      this.$emit('onConfirm', value);
+      this.showPicker = false;
+    },
   },
   computed: {
     ...mapState(['user']),