BSchClassManageFront/src/views/teacherManage/Teachertransfer.vue

<template>
  <div class="page-wrap">
    <!-- 顶部搜索区域 -->
    <div class="top-search-bar">
      <div class="placeholder-left"></div>
      <Input
        v-model="searchKey"
        placeholder="账号、姓名、联系电话、变动详情"
        style="width: 360px"
        suffix="ios-search"
        @on-search="handleSearch"
        clearable
      ></Input>
    </div>

    <!-- 核心：表格自适应滚动容器 -->
    <div class="table-scroll-box">
      <Table
        border
        stripe
        :columns="tableColumns"
        :data="tableData"
        class="teacher-table"
        @on-selection-change="selectionChange"
        :height="useTableHeight()-12"
      ></Table>
    </div>

    <!-- 分页栏：固定在底部，不会滚动 -->
    <div class="page-fixed-bottom">
      <span class="total-text">共 {{ total }} 条</span>
      <Page
        :current.sync="pageNum"
        :total="total"
        :page-size="pageSize"
        :page-size-opts="[10,20,50]"
        show-sizer
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
      ></Page>
    </div>
  </div>
</template>

<script>
import { self_viewport } from "@/mixins/self_viewport";
export default {
  name: 'TeacherChangeRecord',
  data() {
    return {
      searchKey: '',
      pageNum: 1,
      pageSize: 10,
      total: 52,
      selectedRows: [],

      tableColumns: [
        {
          title: '序号',
          align: 'center',
          width: 70,
          render: (h, params) => {
            const num = (this.pageNum - 1) * this.pageSize + params.index + 1
            return h('span', num)
          }
        },
        {
          title: '教师账号',
          key: 'account',
          align: 'center'
        },
        {
          title: '教师姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'phone',
          align: 'center'
        },
        {
          title: '变动详情',
          key: 'changeInfo',
          align: 'center'
        },
        {
          title: '变动日期',
          key: 'changeDate',
          align: 'center'
        }
      ],

      tableData: [
        { account: '13761014664', name: '郭秀丽', phone: '13761014664', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-04-01' },
        { account: '13761040842', name: '刘莉', phone: '13761040842', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
        { account: '13482212686', name: '万凤翠', phone: '13482212686', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
        { account: '13681943351', name: '许娟', phone: '13681943351', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
        { account: '18816921752', name: '许曼', phone: '18816921752', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
        { account: '18017500305', name: '龚庆', phone: '18017500305', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
        { account: '13901923389', name: '俞胜', phone: '13901923389', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-08-30' },
        { account: '13371935731', name: '刘涵', phone: '13371935731', changeInfo: '从上海市进才中学北校教辅转出', changeDate: '2021-06-01' }
      ]
    }
  },
  mixins: [self_viewport],
  mounted() {
    this.loadData()
  },
  methods: {
    selectionChange(rows) {
      this.selectedRows = rows
    },
    loadData() {
      console.log('分页参数', this.pageNum, this.pageSize, this.searchKey)
      // 接口请求示例
      // this.$axios.get('/api/teacher/changeList', { params: { pageNum, pageSize, keyword: searchKey } }).then(res => {
      //   this.tableData = res.data.records
      //   this.total = res.data.total
      // })
    },
    handleSearch() {
      this.pageNum = 1
      this.loadData()
    },
    pageChange(p) {
      this.pageNum = p
      this.loadData()
    },
    sizeChange(size) {
      this.pageSize = size
      this.pageNum = 1
      this.loadData()
    }
  }
}
</script>

<style scoped>
/* 页面根容器：占满父高度，纵向弹性布局 */
.page-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;
}

/* 顶部搜索栏 固定高度不压缩 */
.top-search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f7f7f7;
  border-radius: 4px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.placeholder-left {
  flex: 1;
}

/* 表格区域：自动填充剩余高度，内容超出滚动 */
.table-scroll-box {
  flex: 1;
  min-height: 0;
}
.table-scroll-box >>> .teacher-table {
  height: 100%;
}

/* 分页容器：固定在底部，禁止被压缩、不会随表格滚动 */
.page-fixed-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 12px;
  gap: 12px;
  flex-shrink: 0;
}
.total-text {
  font-size: 14px;
  color: #333;
}
</style>