front/src/views/elective/dispatch/student/components/class-table.vue

<template>
  <div>
    <el-table
      :data="list"
      row-key="studentId"
      ref="table"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column
        label="选择"
        type="selection"
        :reserve-selection="true"
        width="100"
        v-if="type  != '2'"
      >
      </el-table-column>
      <el-table-column
        label="组合"
        prop="groupName"
        v-if="type != '1'"
      >
      </el-table-column>
      <el-table-column
        label="原班级"
        prop="originalClassName"
        v-if="type != '1'"
      >
      </el-table-column>
      <el-table-column
        :label="type == 1 ? '班级' : '新班级'"
        prop="className"
      >
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        label="性别"
        prop="sex"
      >
      </el-table-column>
      <el-table-column
        label="班级排名"
        prop="rankInClass"
        v-if="type != '1'"
      >
      </el-table-column>
      <el-table-column
        label="年级排名"
        prop="rankInGrade"
      >
      </el-table-column>
    </el-table>
<!--    <mx-table row-key="studentId"  :reserveSelection="true" :propDefines="propDefines" :rows="list" @selection-change="handleSelectionChange">-->
<!--    </mx-table>-->
    <!-- 操作 确认和分页-->
    <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
                :page.sync="pageForm.pageNum"
                :limit.sync="pageForm.pageSize"
    ></pagination>
  </div>

</template>
<script>
export default {
  props: {
    type: {
      String: '',  // 1 用于class-adjust 2 用于完成分班展示
      default: '1'
    },
    list: {
      required: true,
      type: Array,
      default: () => []
    },
    pageForm: {
      type: Object,
      default: () => {
        return {
          pageSize: 10,
          pageNum: 1,
          total: 0
        }
      }
    }
  },
  data() {
    return {
      propDefines: {
        selection: {
          label: '选择',
          type: 'selection',
          hidden: this.type == '2'
        },
        groupName: {
          label: '组合',
          hidden: this.type == '1'
        },
        className: {
          label: '班级'
        },
        name: {
          label: '姓名'
        },
        sex: {
          label: '性别'
        },
        rankInGroup: {
          label: '班级排名'
        },
        rankInGrade: {
          label: '年级排名',
          hidden: this.type == '1'
        }
      },
      selected: []
    }
  },
  computed: {},
  methods: {
    clearSelection() {
      this.$refs.table.clearSelection()
    },
    onChangePage(page) {
      this.pageForm.pageSize = page.limit
      this.pageForm.pageNum = page.page
      this.$emit(`update:${this.pageForm.paramsName}`, this.pageForm)
      // this.getBatchList();
    },
    handleSelectionChange(row) {
      this.selected = row
      this.$emit('confirm', this.selected)
    }
  }
}

</script>
<style scoped>
.tmp {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0;
}
</style>