vue-elementui制作表格（二）

用vue制作表格效果图如下：

代码块：

在这里插入代码片<template>
  <div class="contents">
    <div>
      <el-dialog title="档案转出通知单" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="60%">
        <div id="printTest2">
          <table border= "0" v-for="(item,index) in listinfo" :key="index"   width="70%"  style="margin: auto!important;">
            <thead>
            <tr>
              <th colspan="10">档案转出通知单</th>
            </tr>
            </thead>
            <tbody>
            <tr style="height:100px">
              <td colspan="10" style="border: 1px solid black;text-align:left;padding: 15px!important;">
                <div class="company1"><span class="company" >{{item.corporateName}}：</span></div>
                <div class="content">将 <span class="n_title">{{item.employeeName}}</span>等<span class="n_title" style="width: 80px!important;">壹</span>同志的档案材料转去，请按档案内所列目录清点查收，并将回执退回。</div>
                <div class="jizhi">发布机关 <span class="n_keji">{{item.corporateName}}</span>   <span class="zd">转递单位(盖章)</span></div>
                <div class="number">{{item.transoutNumber}}</div>
              </td>
            </tr>
            <tr style="height:40px">
              <td rowspan="2" style="text-align:center;border:1px solid black;">姓名</td>
              <td rowspan="2" style="text-align:center;border:1px solid black;">单位及职务</td>
              <td rowspan="2" style="text-align:center;border:1px solid black;">转递原因</td>
              <td colspan="2" style="text-align:center;border:1px solid black;">档案正副本卷数</td>
            </tr>
            <tr>
              <td colspan="1" style="text-align:center;border:1px solid black;">正本</td>
              <td  colspan="1" style="text-align:center;border:1px solid black;">副本</td>
            </tr>
            <tr style="height:30px">
              <td style="text-align:center;border:1px solid black;">{{item.employeeName}}</td>
              <td style="text-align:center;border:1px solid black;">{{item.unitAndRankName}}</td>
              <td style="text-align:center;border:1px solid black;">{{item.transferReason}}</td>
              <td style="text-align:center;border:1px solid black;">1</td>
              <td style="text-align:center;border:1px solid black;">1</td>
            </tr>
            <tr style="height:30px">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style="height:30px">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style="height:30px">
              <td></td>
              <td></td>
              <td ></td>
              <td></td>
              <td></td>
            </tr>
            <tr style="height:30px">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style="height:30px">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            </tbody>
          </table>
        </div>
        <span slot="footer" class="dialog-footer">
              <el-button  type="primary" @click="confirm" size="mini">打印</el-button>
              <el-button  @click="cancel" size="mini">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { request } from "@/utiles/request.js";
export default {
  name:"SubmissionForm",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    dialogFormVisible() {
      this.chushi();
      if (this.dialogFormVisible == false) {
        this.$emit('dialog');
      }
    }
  },
  data(){
    return{
      listinfo:[],
      sids:'', //需要传数组id
    }
  },
  created() {
    this.chushi();
  },

  methods:{
    init(sids){
      this.sids=sids;
    },
    chushi(){
      request({
        url:'/fileTransferOut/print',
        method:'post',
        headers: {'Content-Type': 'application/json'},
        params:{
          ids:this.sids+''
        }
      }).then(res=>{
        if(res.data.code==200 && res.data.data!=null) {
          this.listinfo=res.data.data
          // this.listinfo.push(res.data.data)
        }
      })
    },
    closeDialog(){
      this.listinfo=[];
    },
    //打印
    confirm(){

    },
    cancel(){
      this.$emit('dialog');

    },
  }
}
</script>
<style scoped lang="less" >
#printTest2{
  width: 70%;
  margin: auto;
  border: 2px solid black;
  padding-bottom: 30px!important;
}
#printTest2 .n_title{
  text-align: center;
}

#printTest2 .content{
  text-align: left;
  margin-left: 30px!important;
  line-height: 28px!important;
  padding-bottom: 30px!important;
}
#printTest2 .company1{
  width: 500px!important;
  float: left;
  text-align: left;
  padding-bottom: 15px!important;
}
#printTest2 .zd{
  text-align: right;
  float: right;
  margin-right: 50px!important;
  display: inline-block;
}
#printTest2 .jizhi{
  text-align: left;
  margin-left: 30px!important;
}
#printTest2 .number{
  text-align: right;
  padding-bottom: 15px!important;
  padding-top: 15px!important;
  margin-right: 70px!important;
}
#printTest2 .jizhi .n_keji{
  margin-left: 20px!important;
}
#printTest2 .company,
#printTest2 .n_title
{
  display: block;
  display: inline-block;
  border-bottom: 1px solid black;
  padding-bottom: 5px!important;
  width:200px!important;
}
#printTest2 table thead th{
  font-size: 20px;
  padding:10px;
}
#printTest2 table tbody tr{
  height:30px;
  font-size:14px;
}

#printTest2 table{
  border-collapse:collapse;
}
#printTest2 table tbody td{
  border: 1px solid black;
  text-align: center!important;
}
.contents /deep/ .el-dialog__title{
  font-size: 15px!important;
}
.contents  /deep/  .el-form{
  margin: auto!important;
}
.contents  /deep/  .el-dialog__body{
  padding: 20px 10px!important;
}
.contents .ml{
  margin-bottom: 15px!important;
  border-left: 3px solid #447FC1;
  padding-left: 10px!important;
  font-size: 18px!important;
  font-weight: 500;
  font-size: 15px!important;
  margin-left: 15px!important;
}
.style /deep/ .el-input__inner{
  margin-bottom: 15px!important;
}
</style>