用vue-elementui 制作表格（一）

vue 制作表格，效果图如下:

表格制作方法如下(代码如下):

在这里插入代码片
```<template><div class="contents"><div><el-dialog title="档案报送单" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="60%"><div id="printTest1" v-if="listinfo.length>0"><table   v-for="(item,index) in listinfo"  :key="index" border= "0" width="70%"  style="margin: auto!important;"><thead><tr><th colspan="8" id="title">新任中管干部档案报送单</th></tr></thead><tbody><tr style="height:40px"><td>姓名</td><td colspan="3" v-if="name!=''">{{item.name}}</td><td colspan="3">档案卷数</td><td colspan="1">1</td></tr><tr style="height:40px"><td>工作单位及职务</td><td colspan="7">{{item.jobTitle}}</td></tr><tr style="height:40px"><td>任职时间</td><td colspan="7">{{item.joinWorkTime | dateFmt('YYYY-MM-DD')}}</td></tr><tr style="height:60px"><td>档案整理人</td><td colspan="3" v-if="name!=''">{{item.name}}</td><td colspan="3">档案审核人</td><td colspan="1" v-if="name!=''">{{item.name}}</td></tr><tr style="height:180px"><td><div style="width: 70px;margin: auto!important;">干部档案遗留问题或需要说明的情况</div></td><td colspan="7">无</td></tr><tr style="height:180px"><td><div style="width: 70px;margin: auto!important;">报送单位预览</div></td><td colspan="7"><div class="right"><div class="top"><span class="leader" v-if="name!=''">领导签字:{{item.name}}</span><span class="official_seal">(公章)</span></div><div class="bottom"><span class="year">{{item.workingTime | dateFmt('YYYY')}}年</span><span class="month">{{item.workingTime | dateFmt('MM')}}2月</span><span class="day">{{item.workingTime | dateFmt('DD')}}日</span></div></div></td></tr></tbody></table></div><div v-else style="text-align: center;color: red; font-size: 32px!important;">暂无档案报送单表格数据~</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>
//这个js是封装的url 请求接口是调用，可以看下方的request
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:{//父组件里传过来的值1. List iteminit(sids){this.sids=sids;},chushi(){//请求接口数据，并且渲染页面数据request({url:'/submit/getPrintList',method:'get',params:{ids:this.sids+''}}).then(res=>{this.listinfo=res.data.data})},closeDialog(){this.listinfo=[];},//打印confirm(){ //这里暂时不展示},//点击取消按钮时关闭弹框cancel(){this.$emit('dialog');},}
}
</script>
<style scoped lang="less" >
//表格样式
#printTest1 .right .top .leader{float:left;margin-left:30px!important;
}
#printTest1 .right .top{margin-top: 100px!important;
}
#printTest1 .right .top .official_seal{margin-right: 30px!important;
}
#printTest1 .bottom{margin-top: 10px!important;
}
#printTest1 .bottom .year,#printTest1 .bottom .month{margin-right: 40px!important;
}
#printTest1 #title{padding-top:50px!important;padding-bottom: 30px!important;
}
#printTest1{width: 70%;margin: auto;border: 2px solid black;padding-bottom: 30px!important;
}
#printTest1 table{border-collapse:collapse;
}
#printTest1 table thead th{font-size: 20px;padding:10px;
}
#printTest1 table tbody tr{height:30px;font-size:14px;
}
#printTest1 table tbody td{width:25%;border: 1px solid black;text-align: center!important;
}
#printTest1 table tbody td span{margin-right:20px;
}
//截至
下面的样式是 弹框组件样式 如:标题等等
.contents /deep/ .el-dialog__title{font-size: 15px!important;
}
.contents  /deep/  .el-form{/*width: 410px!important;*/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如何 制作表格了，其实还是蛮简单的哈，慢慢来就好，大佬们，一块加油吧，顶！！！！

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

Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
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+elementui 打印表格不显示表格边框线
如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线,可以通过在 CSS 中覆盖样式来解决. 可以在项目中新建一个 CSS 文件,如 print.cs ...
vue element-ui table表格自定义纵向合计横向合计
1表格横向数据合计表格代码 <el-table-column prop="" label="合计"><template slot-scope ...

用vue-elementui 制作表格（一）

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

最新文章

热门文章