front/src/views/career/components/UniversitiesLineTable.vue

<template>
  <div id="lineTable">
    <mx-search-group class="mb10" justify="end" :span="6" v-model="tableParams.univerName" placeholder="搜索" @search="clickSuffix"
    ></mx-search-group>
    <el-table :data="tableData" v-loading="tableLoading" border>
      <el-table-column prop="code" label="院校" align="center">
        <template slot-scope="scope">
          <el-link :underline="false" @click="goDetails(scope.row.universityId)">【{{ scope.row.universityName }}】
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="location" label="所在地" align="center"></el-table-column>
      <el-table-column prop="year" label="年份" align="center"></el-table-column>
      <el-table-column prop="type" label="科类" align="center"></el-table-column>
      <el-table-column prop="level" label="层次" align="center"></el-table-column>
      <el-table-column prop="score" label="投档线" align="center"></el-table-column>
      <el-table-column
        prop="batchName"
        label="投档分位次"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:10px;"
      :page-sizes="[10,20,30,40,50,60,70,80,90,100]"
      :page-size=tableParams.pageSize
      layout="prev,pager,next,jumper,total,sizes"
      :total="examRecordTotal"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { selectUniversityList } from '@/api/webApi/shiftLine'
import MxSearchGroup from '@/components/MxSearch/mx-search-group'

export default {
  name: 'UniversitiesLineTable',
  components: {
    MxSearchGroup
  },
  props: {
    universityParams: {
      type: Object, default() {
        return {}
      }
    }
  },
  data() {
    return {
      tableLoading: '',
      examRecordTotal: 0,
      tableParams: {
        pageSize: 20,
        pageNum: 1,
        level: '',
        location: '',
        type: '',
        univerName: '',
        year: ''
      },
      tableData: []
    }
  },
  watch: {
    universityParams: {
      immediate: true,
      deep: true,
      handler(val) {
        if ( val.locationsRes == ''  || val.yearRes == '' ) {
          return
        }
        this.tableParams.level = val.levelsRes
        this.tableParams.location = val.locationsRes
        this.tableParams.type = val.typeRes
        this.tableParams.year = val.yearRes
        this.getUniversityList()
      }
    }
  },
  methods: {
    clickSuffix() {
      this.getUniversityList()
    },
    getUniversityList() {
      this.tableLoading = true
      console.log(this.tableParams)
      selectUniversityList(this.tableParams).then(res => {
        console.log(res)
        this.tableData = res.rows
        this.examRecordTotal = res.total
      }).finally(_ => {
        this.tableLoading = false
      })
    },
    sizeChange(e) {
      this.tableParams.pageSize = e
      this.getUniversityList()
    },
    currentChange(e) {
      //页数
      this.tableParams.pageNum = e
      this.getUniversityList()
    },
    goDetails(id) {
      this.$router.push({ name: 'UniversityDetail', params: { id: id } })
    }
  }
}
</script>

<style lang="scss">
#lineTable {
  .search {
    .el-input {
      .el-input__inner {
        border-radius: 50px;
      }
    }
  }
}

</style>