vue-elementui制作表格（二）
用vue制作表格效果图如下：
代码块：
在这里插入代码片<template>
<div class="contents">
<div>
<el-dialog title="档案转出通知单" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="60%">
<div id="printTest2">
<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;">1td>
<td style="text-align:center;border:1px solid black;">1td>
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>