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>
      <el-table-column prop="managerType" 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>
      <!--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')"></el-image>
        </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')"></el-image>
        </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')"></el-image>
        </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"
    >
    </el-pagination>
  </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>