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

<template>
  <div id="univerTable">
    <el-table :data="tableData" script>
      <el-table-column prop="code" label="院校代码" align="center">
        <template slot-scope="scope">
          <el-link :underline="false" @click="goDetails(scope.row.id)">【{{ scope.row.code }}】</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="院校名称" align="center">
        <template slot-scope="scope">
          <el-link :underline="false" @click="goDetails(scope.row.id)">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="location" label="所在地" width="70" align="center" />
      <el-table-column prop="managerType" label="主管部门" align="center" />
      <el-table-column prop="type" label="院校类型" align="center" />
      <el-table-column prop="level" label="学历层次" align="center" />
      <!--sortable  排序-->
      <el-table-column label="一流大学建设高校" align="center" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.ylxx===2" :src="require('@/assets/images/career/icon_duigou.png')" />
        </template>
      </el-table-column>
      <el-table-column label="一流学科建设高校" align="center" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.ylxk===2" :src="require('@/assets/images/career/icon_duigou.png')" />
        </template>
      </el-table-column>
      <el-table-column label="研究生院" align="center">
        <template slot-scope="scope">
          <el-image v-if="scope.row.yjsy===2" :src="require('@/assets/images/career/icon_duigou.png')" />
        </template>
      </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.limit"
      layout="prev,pager,next,jumper,total,sizes"
      :total="tableParams.examRecordTotal"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
  </div>
</template>

<script>
import { selectUniversityList } from '@/api/webApi/career-course'
export default {
  name: 'UniversitiesTable',
  props: {
    filterForm: { type: Object, default() { return {} } }
  },
  data() {
    return {
      tableParams: {
        examRecordTotal: 0,
        pageSize: 1,
        limit: 20
      },
      tableData: []
    }
  },
  watch: {
    filterForm: {
      immediate: true,
      deep: true,
      handler(val) {
        this.getUniversityList()
      }
    }
  },
  methods: {
    goDetails(id) {
      this.$router.push({ path: '/career/components/UniversityDetail', query: { id: id }})
    },
    sizeChange(e) {
      // 每页条数
      this.tableParams.limit = e
      this.getUniversityList()
    },
    currentChange(e) {
      // 页数
      this.tableParams.pageSize = e
      this.getUniversityList()
    },
    getUniversityList() {
      // console.log(params)
      selectUniversityList({ ...this.filterForm,
        pageNum: this.tableParams.pageSize,
        pageSize: this.tableParams.limit
      }).then(res => {
        this.tableData = res.rows
        this.tableParams.examRecordTotal = res.total
      })
    },
    getUniverCharact(type) { // 判断学院特性
      let result = '' // 1-->否  2-->是
      const flag = this.universityParams.checkList.some(item => {
        return item === type
      })
      if (flag) {
        result = 2
      } else {
        result = ''
      }
      return result
    }
  }
}
</script>

<style lang="scss">
  #univerTable{
    .el-table .descending .sort-caret.descending{
      border-top-color:#ffffff;
    }
    .el-table .ascending .sort-caret.ascending{
      border-bottom-color:#ffffff;
    }
  }
</style>