组件使用方式:
<tableDataGrid :HeaderList="columns" :dataList="dataList" :showPage="true" @changeData="changeData" :pagePar="pagePar"> </tableDataGrid>
dataList 数据数组 columns表头
组件源代码:
<!-- 表格组件 -->
<template>
<div class="table-wrap">
<Table border :columns="Headers" :data="bodyData" :key="key" @on-cell-click="onCellClick">
<template v-for="item in Headers" :slot="item.slot?item.slot:''" slot-scope="{ row, index, column , }">
<slot :name="item.slot?item.slot:''" v-bind="{ row, index,column , }"></slot>
</template>
</Table>
<Page class="PageSize" :page-size-opts="sizeOpts" v-if="showPage" :total="total" show-total show-sizer show-elevator @on-change="onChange" @on-page-size-change="sizeChange" @on-prev="onPrev" @on-next="onNext"/>
</div>
</template>
<script>
export default {
props: {
HeaderList: {
type: Array,
default: []
},
dataList: {
type: Array,
default: []
},
showPage:{
type:Boolean,
default:false
},
pagePar:{
type:Object,
default:()=>{}
}
},
watch:{
'dataList':{
handler(n,o){
this.bodyData=n
this.total=this.bodyData.length?this.bodyData.length:0,
this.key++
},
deep:true,
immediate:true
},
},
data() {
return {
key:0,
sizeOpts:[10, 20, 30, 40],
total:this.dataList.length?this.dataList.length:0,
Headers: this.HeaderList,
bodyData: this.dataList
}
},
methods:{
onChange(page){
this.$emit('changeData',page,this.pagePar.pageSize)
},
sizeChange(pageSize){
this.$emit('changeData',this.pagePar.page,pageSize)
},
onPrev(page){
this.$emit('changeData',page,this.pagePar.pageSize)
},
onNext(page){
this.$emit('changeData',page,this.pagePar.pageSize)
},
onCellClick(row, column, data, event){
console.log(row, column, data, event,'row, column, data, event')
this.$emit('onCellClick',row, column, data, )
}
}
}
</script>
<style lang="less" scoped>
.table-wrap{
margin: 20px;
}
/deep/ .ivu-table th{
background: #EBF1FA !important;
}
/deep/ .ivu-table th .ivu-table-cell{
color: #2B3646 !important;
}
/deep/ .ivu-table-tbody .ivu-table-row td:first-of-type .ivu-table-cell{
color: #2B3646 !important;
}
/deep/ .ivu-table th,/deep/ .ivu-table td{
border-bottom:1px solid #DCE4EB !important;
}
/deep/ .ivu-table-border th,/deep/ .ivu-table-border td {
border-right:1px solid #DCE4EB !important;
}
/deep/ .ivu-table th,/deep/ .ivu-table td{
height: 40px !important;
}
/deep/.ivu-table-tip table td{
height: 375px !important;
}
.PageSize{
text-align: right;
padding:10px 10px 10px 0 ;
border:1px solid #DCE4EB !important;
border-top:none !important;
position: relative;
}
/deep/ .ivu-select-dropdown{
z-index: 9999999 !important;
}
/deep/ .ivu-table-tbody .ivu-table-row:nth-of-type(2n+2) td{
background: #F7F9FC ;
}
/deep/ .ivu-table-body{
height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
/deep/ .ivu-page-item-active {
border-color:#2b5fd9 !important;
background-color:#2b5fd9 !important;
}
</style>