front/src/views/career/zhiyuan/components/zhiyuan-list.vue

<template>
    <dynamic-table v-loading="loading" ref="table"  height="800px"  :rows="tableList" :columns="columns" @expand-change="expand" >
      <template #t0="{row}">
        <!--    录取概率 -->
        <div>
<!--          <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>-->
<!--          <p class="mb10 f-9b f12">{{ row.enrollRatioText }}</p>-->
          <p>
            <el-tag type="danger" v-if="row.pickType == 0">冲</el-tag>
            <el-tag type="warning" v-if="row.pickType == 1">稳</el-tag>
            <el-tag type="success" v-if="row.pickType == 2">保</el-tag>
          </p>
        </div>
      </template>
      <template #t1="{row}">
        <!-- 院校 -->
        <div>
          <p class="mb10"><span class="pointer">{{ `${row.university.name}` || '' }}</span></p>
          <p class="mb5 f-9b f12">{{ row.university.features.split(',').join(' ') }}</p>
          <p class="mb5 f-9b f12">{{ row.university.location }} {{ row.university.cityName }}
            排名{{ row.university.ranking }}</p>
          <p class="f-9b f12">代码 {{ row.recruitPlan.collegeCode }}</p>
        </div>
      </template>
      <template #t2="{row}">
        <!-- 招生计划 -->
        <div>
          <p><span class="f18">{{ row.recruitPlan.planCount }}</span>人</p>
          <p class="f-9b f12">{{ row.recruitPlan.course }}</p>
        </div>
      </template>
      <template #t3="{row}">
        <!--   历年 -->
        <div class="f14">
          <p>{{ row.history? row.history.year || '-' : '-' }}</p>
        </div>
      </template>
      <template #t4="{row}">
        <div class="f14">
            <p>{{ row.history? row.history.numReal || '-' : '-'}}</p>
        </div>
      </template>
      <template #t5="{row}">
        <div class="f14">
            <p>{{ row.history? row.history.score || '-' : '-' }}</p>
        </div>
      </template>
      <template #t6="{row}">
        <div class="f14">
            <p>{{  row.history? row.history.seat || '-' : '-'}}</p>
        </div>
      </template>
      <template #t7="{row}">
        <p type="primary"> {{ `专业(${row.recruitPlan.majorCount}个)` }}</p>
        <p class="f12 f-primary" v-show="row.majors.filter(major => {return major.selected}).length">  已填  <span>{{ row.majors.filter(major => {return major.selected}).length }}</span> </p>
      </template>
      <template #expand="{row,$index}">
        <div>
          <dynamic-table :columns="majorCol" :show-header="false" :rows="row.majors">
            <template #t0="{row}">
              <!--    录取概率 -->
              <div>
              </div>
            </template>
            <template #t1="{row}">
              <div>
                <p class="mb10"><span class="pointer">{{ row.marjorName }}</span></p>
                <p class="f-9b f12">代码 {{ row.marjorBelongs }}</p>
              </div>
            </template>
            <template #t2="{row}">
              <div>
                <p><span class="f18">{{ row.planCount || '-' }}</span>人</p>
                <p class="f-9b f12">{{ `${row.xuezhi} ￥${row.xuefei}` }}</p>
              </div>
            </template>
            <template #t3="{row}">
              <div class="f14">
                <p>{{ row.history? row.history.year || '-' : '-' }}</p>
              </div>
            </template>
            <template #t4="{row}">
              <div class="f14">
                  <p>{{ row.history? row.history.numReal || '-' : '-' }}</p>
              </div>
            </template>
            <template #t5="{row}">
              <div class="f14">
                  <p>{{ row.history ? row.history.score || '-' : '-' }}</p>
              </div>
            </template>
            <template #t6="{row}">
              <div class="f14">
                  <p>{{ row.history? row.history.seat || '-' : '-' }}</p>
              </div>
            </template>
            <template #t7="{row}">
              <el-button :type="row.selected ? 'danger' : 'primary'" @click="apply(row,$index)"> {{row.selected ?'取消' :  '填报' }}</el-button>
            </template>
          </dynamic-table>
        </div>
      </template>
    </dynamic-table>
</template>
<script>
import DynamicTable from '@/components/dynamic-table'

export default {
  components: {
    DynamicTable,
  },
  props: {
    tableList: {
      type: Array,
      default: []
    },
    cols: {
      type: Array,
      default: []
    },
    loading:{
      type: Boolean,
      default: []
    }
  },
  data() {
    return {
      show:false,
      input:'',
      selectedList:[]
    }
  },
  computed: {
    columns() {
      if(!this.cols.length) return []
      const columns = [
      //   {
      //   type: 'expand',
      //   slotBody: 'expand'
      // }
      ]
      this.cols.map((item, index) => {
        columns.push({
          label: item,
          slotBody: 't' + index,
          width: index >= 2 || index == 0 ? 100+'px' : ''
        })
      })
      columns.push({
        type: 'expand',
        slotBody: 'expand',
        label:'查看'
      })
      return columns
    },
    majorCol() {
      return this.cols.map((item, index) => {
        return {
          label: item,
          slotBody: 't' + index,
          width: index >= 2 || index == 0 ? 100+'px' : ''
        }
      })
    },
  },
  methods: {
    expand(item) {
      this.$emit('expand', item)
    },
    scrollTop() {
      this.$refs.table.toScrollTop()
    },
    apply(item,index) {
      this.$emit('apply',item,index)
    },
  }
}
</script>
<style scoped lang="scss">
.f-9b {
  color: #9b9b9b;
}
::v-deep .el-table__expanded-cell {
  padding-top: 0;
  //padding-right: 50;
  padding-bottom: 0;
  padding-left: 0;
}
::v-deep .el-table__expand-icon{
  font-size: 18px;
  color: #666;
  .el-icon-arrow-right{
    font-weight: bold;
  }
}
</style>