train-student/src/layout/class/classList.vue

<template>
  <div id="classList">
    <el-row>
      <el-col :span="24">
        <van-tabs v-model="active">
          <van-tab title="班级名单">
            <stuNameList :stuNameList="stuNameList"></stuNameList>
          </van-tab>
          <van-tab title="班级分组">
            <classGroup
              v-on="$listeners"
              :groupList="groupList"
              :createGroupDialog="createGroupDialog"
              :groupForm="groupForm"
              :stuIdAndGroupId="stuIdAndGroupId"
              :noGroupStudentNames="noGroupStudentNames"
              :show="show"
              :form="form"
              :columns="columns"
            ></classGroup>
          </van-tab>
        </van-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import stuNameList from '@/layout/class/nameList/stuNameList.vue';
import classGroup from '@/layout/class/classGroup.vue';
export default {
  name: 'classList',
  props: {
    stuNameList: null, //学生看班级学生名单
    // 班級分組列表
    groupList: null,
    createGroupDialog: null, //创建分组显示dialog
    groupForm: null, //分組form
    stuIdAndGroupId: null, //登陆者id和小组id
    noGroupStudentNames: null, //没有小组的学生
    form: null,
    show: null,
    columns: null,
  },
  components: {
    stuNameList, //学生班级学生名单
    classGroup, //班级分组
  },
  data: () => ({
    active: 0,
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
/deep/.van-tabs__line {
  width: 50% !important;
  background-color: #405ffe;
}
/deep/.van-tab--active {
  color: #405ffe;
}
</style>