frame/parts/print/teacherPrint.vue

<template>
  <div id="teacherPrint">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="toPrint()">打印</el-button>
        </el-col>
        <el-col :span="24" class="list" ref="print">
          <el-col :span="24" class="teacherList" v-for="(item, index) in teacherList" :key="index">
            <el-col :span="24" class="top">
              <el-col :span="18" class="left">
                <el-col :span="6" class="border">
                  姓名
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.name }}
                </el-col>
                <el-col :span="6" class="border">
                  性别
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.gender }}
                </el-col>
                <el-col :span="6" class="border">
                  民族
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.nation }}
                </el-col>
                <el-col :span="6" class="border">
                  政治面貌
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.politics }}
                </el-col>
                <el-col :span="6" class="border">
                  工作单位
                </el-col>
                <el-col :span="18" class="border">
                  {{ item.jobaddress }}
                </el-col>
                <el-col :span="6" class="border">
                  所在部门
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.department }}
                </el-col>
                <el-col :span="6" class="border">
                  职称
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.protitle }}
                </el-col>
                <el-col :span="6" class="border">
                  职务
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.job }}
                </el-col>
                <el-col :span="6" class="border">
                  最后学历
                </el-col>
                <el-col :span="6" class="border">
                  {{ item.education }}
                </el-col>
              </el-col>
              <el-col :span="6" class="right"> </el-col>
            </el-col>
            <el-col :span="24" class="center">
              <el-col :span="6" class="border" style="width: 157.5px;">
                最后学位
              </el-col>
              <el-col :span="6" class="border" style="width: 157.5px;">
                {{ item.degree }}
              </el-col>
              <el-col :span="6" class="border" style="width: 157.5px;">
                QQ号
              </el-col>
              <el-col :span="6" class="border" style="width: 367.5px;">
                {{ item.qq }}
              </el-col>
              <el-col :span="6" class="border" style="width: 157.5px;">
                固定电话
              </el-col>
              <el-col :span="6" class="border" style="width: 157.5px;">
                {{ item.mobile }}
              </el-col>
              <el-col :span="6" class="border" style="width: 157.5px;">
                手机
              </el-col>
              <el-col :span="6" class="border" style="width: 367.5px;">
                {{ item.phone }}
              </el-col>
              <el-col :span="6" class="border" style="width: 157.5px;">
                身份证号
              </el-col>
              <el-col :span="18" class="border" style="width: 682.5px;">
                {{ item.idnumber }}
              </el-col>
            </el-col>
            <el-col :span="24" style="text-align:center;font-weight:bold;border:1px solid #000;height:50px;line-height:50px;">
              教师能够承担的培训课程模块及需要使用教具，设备情况
            </el-col>
            <el-col :span="24" class="down">
              <el-col :span="6" class="left">
                课程模块
              </el-col>
              <el-col :span="18" class="right">
                {{ item.course }}
              </el-col>
              <el-col :span="6" class="left">
                与人合作
              </el-col>
              <el-col :span="18" class="right">
                {{ item.withpersonal }}
              </el-col>
              <el-col :span="6" class="left">
                职业探索
              </el-col>
              <el-col :span="18" class="right">
                {{ item.career }}
              </el-col>
              <el-col :span="6" class="left">
                面试训练
              </el-col>
              <el-col :span="18" class="right">
                {{ item.training }}
              </el-col>
              <el-col :span="6" class="left" style="height:217px;line-height:217px;"> </el-col>
              <el-col :span="18" class="right" style="height:217px;"> </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo: { title: 'teacherPrint' },
  name: 'teacherPrint',
  props: { teacherList: { type: Array } },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {
    toPrint() {
      this.$print(this.$refs.print);
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.btn {
  margin: 10px 0;
}
.list {
  .teacherList {
    width: 842px;
    height: 1228px;
    border: 1px solid #000;
    .top {
      .left {
        .border {
          border: 1px solid #000;
          height: 50px;
          line-height: 50px;
          padding: 0 0 0 10px;
        }
      }
      .right {
        height: 250px;
        border: 1px solid #000;
      }
    }
    .center {
      .border {
        border: 1px solid #000;
        height: 50px;
        line-height: 50px;
        padding: 0 0 0 10px;
      }
    }
    .down {
      .left {
        border: 1px solid #000;
        width: 157px;
        height: 140px;
        line-height: 140px;
        text-align: center;
      }
      .right {
        border: 1px solid #000;
        width: 683px;
        height: 140px;
        padding: 10px 0 0 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 6;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>