frame/parts/print/print-sign copy.vue

<template>
  <div id="print-sign">
    <el-row>
      <span v-if="display == 'list'">
        <el-col :span="24">
          <el-col :span="24" style="margin:15px 0;">
            <el-button type="primary" size="mini" @click="display = 'listView'">打印预览</el-button>
          </el-col>
          <el-col :span="24">
            <el-table border :data="list" size="small" style="border: solid #cecece;">
              <el-table-column align="center" label="姓名" prop="name"></el-table-column>
              <el-table-column align="center" label="性别" prop="gender"></el-table-column>
              <el-table-column align="center" label="民族" prop="nation"></el-table-column>
              <el-table-column align="center" label="身份证号" prop="id_number"></el-table-column>
              <el-table-column align="center" label="学校" prop="school_name"></el-table-column>
              <el-table-column align="center" label="专业" prop="major"></el-table-column>
              <el-table-column align="center" label="入学年份" prop="entry_year"></el-table-column>
              <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
              <el-table-column align="center" label="班级" prop="classname"></el-table-column>
              <el-table-column align="center" label="寝室" prop="bedroom"></el-table-column>
              <el-table-column align="center" label="签名"></el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </span>
      <span v-else>
        <el-col :span="24">
          <el-col :span="24" style="margin:15px 0;">
            <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
            <el-button type="primary" size="mini" @click="toPrint()">打印</el-button>
          </el-col>
        </el-col>
        <el-col :span="24" class="printList" ref="print">
          <table border="1">
            <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>民族</th>
              <th>身份证号</th>
              <th>学校</th>
              <th>专业</th>
              <th>入学年份</th>
              <th>手机号</th>
              <th>班级</th>
              <th>寝室</th>
              <th>签名</th>
            </tr>
            <tr v-for="(item, index) in list" :key="index">
              <td>{{ item.name }}</td>
              <td>{{ item.gender }}</td>
              <td>{{ item.nation }}</td>
              <td>{{ item.id_number }}</td>
              <td>{{ item.school_name }}</td>
              <td>{{ item.major }}</td>
              <td>{{ item.entry_year }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.classname }}</td>
              <td>{{ item.bedroom }}</td>
              <td width="70px"></td>
            </tr>
          </table>

          <!-- <el-table :data="list" border style="width: 100%">
            <el-table-column width="260px" align="center" label="姓名" prop="name"></el-table-column>
            <el-table-column width="75px" align="center" label="性别" prop="gender"></el-table-column>
            <el-table-column width="140px" align="center" label="民族" prop="nation"></el-table-column>
            <el-table-column width="280px" align="center" label="身份证号" prop="id_number"></el-table-column>
            <el-table-column width="310px" align="center" label="学校" prop="school_name"></el-table-column>
            <el-table-column align="center" label="专业" prop="major"></el-table-column>
            <el-table-column width="120px" align="center" label="入学年份" prop="entry_year"></el-table-column>
            <el-table-column width="180px" align="center" label="手机号" prop="phone"></el-table-column>
            <el-table-column width="100px" align="center" label="班级" prop="classname"></el-table-column>
            <el-table-column width="100px" align="center" label="寝室" prop="bedroom"></el-table-column>
            <el-table-column width="150px" align="center" label="签名"></el-table-column>
          </el-table> -->
        </el-col>
      </span>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'print-sign',
  props: {
    list: { type: Array, default: () => [] },
  },
  components: {},
  data: function() {
    return {
      display: 'list',
    };
  },
  created() {},
  methods: {
    toPrint() {
      this.$print(this.$refs.print);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.printList {
  width: 1050px;
  // height: 717px;

  table {
    border-collapse: collapse;
    zoom: 0.9;
    tr {
      th {
        text-align: center;
        // padding: 8px 0;
        height: 51.6px;
      }
      td {
        text-align: center;
        height: 23px;
        margin: 0 5px;
      }
    }
  }
  // height: 719px;
  // border: 1px solid #ccc;
  // /deep/.el-table {
  //   font-size: 10px;
  //   zoom: 0.5;
  // }
  // /deep/.el-table td {
  //   height: 57px;
  // }
  // /deep/.el-table th {
  //   height: 40px;
  // }
}
</style>