自定义表格组件

组件使用方式：

<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>