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>

vue-elementui制作表格（二）相关推荐

Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
vue+elementui查询表格数据页面卡死问题
一问题描述 vue+elementui项目,本地idea启动,功能测试没问题,部署到tomcat服务器,查询表格数据,正确返回后,页面卡死. 浏览器console栏有vue warn信息:you m ...
3、Vue+ElementUI制作用户登录页面
前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中 ...
vue+element-ui实现表格编辑
三种实现方式 1.表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前 ...
vue+elementUI 显示表格指定列合计数据
明确需求下图来自elementUI官网根据合计行数据的来源可以分为两种情况: 接口返回的数据只有表格中对应每个ID的数据,最后一行的合计是由前端来计算的表格中的合计行数据是从接口中返回的,不是由 ...
Vue elementui 实现表格selection的默认勾选
需求:弹出一个选择框,表格有勾选框,数据填充后,某些行设置默认勾选. 如下图: 数据填充后默认是不勾选的,如果要勾选某些行,通过toggleRowSelection this.$refs.zttabl ...
Vue Element-ui Table表格排序
一.表格中有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可. <el-table-columnprop="d ...
vue+elementui 打印表格不显示表格边框线
如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线,可以通过在 CSS 中覆盖样式来解决. 可以在项目中新建一个 CSS 文件,如 print.cs ...

vue-elementui制作表格（二）

vue-elementui制作表格（二）相关推荐

最新文章

热门文章