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%"  >
<thead>
<tr>
<th colspan="10">档案转出通知单</th>
</tr>
</thead>
<tbody>
<tr >
<td colspan="10" >
<div class="company1"><span class="company">{{porateName}}：</span></div>
<div class="content">将<span class="n_title">{{ployeeName}}</span>等<span class="n_title" >壹</span>同志的档案材料转去，请按档案内所列⽬录清点查收，并将回执退回。</div>
<div class="jizhi">发布机关<span class="n_keji">{{porateName}}</span><span class="zd">转递单位(盖章)</span></div>
<div class="number">{{ansoutNumber}}</div>
</td>
</tr>
<tr >
<td rowspan="2" >姓名</td>
<td rowspan="2" >单位及职务</td>
<td rowspan="2" >转递原因</td>
<td colspan="2" >档案正副本卷数</td>
</tr>
</tr>
<tr>
<td colspan="1" >正本</td>
<td  colspan="1" >副本</td>
</tr>
<tr >
<td >{{ployeeName}}</td>
<td >{{item.unitAndRankName}}</td> <td >{{ansferReason}}</td>
<td >1</td>
<td >1</td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td ></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<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');
}
}
text align center},
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(de==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 pany1{
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;
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 pany,
#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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。