关于element表格和tabs切换的表格统⼀封装
最近开发⼀个政府项⽬，表格特别的多，整个项⽬，刚刚数了⼀下 ⼀共是92个表格，⽽且时间特别的紧
看下代码吧
先是单个表格：
<template>
<div>
<div class="search-Box">
<el-input  placeholder="请输⼊关键字" icon="search"  class="search"  v-model="search"></el-input>
</div>
<div class="table_bg">
<!--  (t || []) 解決加载顺序（⽣命周期）的问题导致先执⾏的时候为空的情況  -->
<el-table  :data="(tables_all || []).slice((currentPage-1)*pagesize,currentPage*pagesize)"
stripe
height="750"
:header-cell-
:cell-style="{
'background-color': '#012890',
'color': '#fff',
'border-bottom': '1px #073FA4 solid'
}"
@row-click="handle"
>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<!--head_title是全部的数据的字段名和名称，因为后台有的还传了图⽚，根据⾃⼰情况⽽定-->
<el-form-item :label="item.label+':'" v-for="(item,key) in head_title" :key="key">
<span v-if="item.label=='照⽚'"> <el-image
:
src="w[item.property]"></el-image></span>
<span v-else>{{w[item.property]}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<!--        head_title_total是你打开要显⽰内容，这⾥没有做到⾃适应，element fit 众所众知就没好使⽤过，如果是脚⼿架，看我之前发布的表格⾃适应解决⽅法-->
<el-table-column  v-for="(item,key) in head_title_total"  :key="key" :prop="item.property" :label="item.label" ></el-table-column>      </el-table>
</div>
<!--    分页器注意total⾥⾯是tables_all.length，搜索的时候下⾯的总计就会跟着变化-->
<div >
<el-pagination v-if="tableData_dzz" class="fy"
layout="total,prev, pager, next"
@current-change="current_change"
:total="tables_all.length"
background
>
</el-pagination>
</div>
</div>
</template>
<script>
props:["head_title","content","head_title_total"],
data() {
pagesize:10,//每页的数据条数
currentPage:1,//默认开始页⾯
search:'',
tablesData:[],
tableData_dzz:[]
}
},
/
/监听关键词
computed:{
tables_all:function(){
var search=this.search;
if(search){
return  this.tableData_dzz.filter(function(dataNews){
return Object.keys(dataNews).some(function(key){
return String(dataNews[key]).toLowerCase().indexOf(search) > -1          })
})
}
return this.tableData_dzz
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
handle(row) {
console.log("表格⾏数据",row);
this.id=row.id
//后台⽹格编码字段不⼀致处理
if(row.wgh){
this.wgh=row.wgh
}
else if(row.sswg){
this.wgh=row.sswg
}
else if(row.wanggehao){
this.wgh=row.wanggehao
}
else if(row.wgbm){
this.wgh=row.wgbm
}
else if(row.szwg){
this.wgh=row.szwg
}else{
this.wgh=''
}
console.log(this.id,this.wgh)
this.$emit('handle',this.id,this.wgh)
},
current_change:function(currentPage){
this.currentPage = currentPage;
},
},
mounted(){
this.search=''
},
updated() {
this.tableData_t.content
}
}
</script>
background-color: #073FA4;
margin: 10px 20px;
}
/*tap 背景*/
.el-tabs__item {
padding: 0 20px;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #3dbfd1;
position: relative;
}
/*tap选中颜⾊*/
.is-active{
color:#fff!important;
}
/*修改⾏背景*/
.el-table tr {
background-color: #0b50B4;
}
/*修改⾏内线的颜⾊*/
.el-table th.is-leaf {
border-bottom: 1px solid #0e5ABD;
}
/*修改表头字体颜⾊*/
.el-table thead {
color: #fff;
font-weight: 500;
}
/*修改斑马线背景*/
#building-top .el-table--striped .el-table__body tr.el-table__row--striped td {  background: #0b50B4;
}
/*修改表格⿏标悬浮hover背景⾊*/
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #0249A2 !important;
}
#building-top .el-table th{
background: #0b50B4;
}
tr:hover>td {
background-color:#90c0f1;
cursor: pointer;
}
.el-table th.gutter {
width: 15px;
border-right-width: 0;
border-bottom-width: 0;
padding: 0;
background: #0e5ABD;
}
.el-table::before {
content: '';
position: absolute;
background-color: #0e5ABD;
z-index: 1;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: unset;
element表格横向滚动条border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/
*去掉底边框*/
.el-tabs--card>.el-tabs__header {
border-bottom: unset;
}
/*去掉左边框*/
.el-tabs--card>.el-tabs__header .el-tabs__item {
border-bottom: 1px solid transparent;
border-left:unset;
-webkit-transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);  transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
}
/*表格滚动条*/
.el-table__body-wrapper{
background-color: #012890;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
border-radius:10px ;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #0e5ABD;
border-radius: 3px;
}
/*没有数据提⽰信息*/
.el-table__empty-block {
background-image: url("./images/wsj.png");
background-repeat: no-repeat;
background-position: center;
background-size: 75px;
margin-bottom: 20px;
}
.el-table__empty-block span {
position: relative;
top: 50px;
color: #fff;
}
/*分页器*/
.fy{
padding-top: 20px;
text-align: center;
}
</style>
说下实现的功能：
1.表格展开⾏
2.分页
3.搜索
效果：还有⼀种的就是
道理⼀样 多加了个tabs切换
<template>
<div>
<div class="search-Box">
<el-input  placeholder="请输⼊关键字" icon="search"  class="search"  v-model="search"></el-input>
</div>
<div class="table_bg">
<el-tabs v-model="currentDate" type="card" @tab-click="handleClick" @click="model_Click">
<el-tab-pane v-for="(item,index) in content" :name="item.stress_name" :key="index">
<span slot="label">{{ item.stress_name }}<el-badge v-if="content" :value="t.length" type="primary"></el-badge></span>          <el-table :data="tables_all" height="770"
:header-cell-style="{
'background-color': '#0b50B4',
'color': '#fff',
'border-bottom': '1px #073FA4 solid'
}"

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