element-ui表格封装

table.vue


home.vue

<template>
    <UK-Table :showIndex="true" :data="tableData" :rowHeader="rowHeader"></UK-Table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @pageIndex-change="handleCurrentChange"
        :pageIndex-page="pagination.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
</template>

<script>
import UKTable from '@/components/Table'
export default {
  components: {
    UKTable,
  },
  data(){
      pagination: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
	  tableData: [],
      rowHeader: [
        // 未做任何格式化处理的数据
        { prop: 'CompanyCode', label: '客户', align: 'center',  },
        {
          prop: 'WeightBox',
          label: '偏远地区',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.WeightBox && params.row.WeightBox + '(KG)')
          }
        },
        {
          prop: '',
          label: ' *** 作',
          fixed: 'right',
          render: (h, params) => {
            return [
              h(
                'el-link',
                {
                  props: {
                    type: 'primary'
                  },
                  style:{
                    marginRight:'10px'
                  },
                  on: {
                    click: () => {
                      this.handleAdd(params.row)
                    }
                  }
                },
                '编辑'
              )]
			},
			 align: 'center'
	        }
	      ],
	      formInline: {
	        companyCode: '',
	        sku: ''
	      }
      },
      methods:{
		// 获取列表
	    getList() {
	      const { companyCode, sku } = this.formInline
	      const params = {
	        pageIndex: this.pagination.pageIndex,
	        pageSize: this.pagination.pageSize,
	        orderByField: '',
	        orderByType: '',
	        companyCode,
	        sku
	      }
	      getWaresInfoPageInfo(params).then(res => {
	        if (res.ErrorCode === 0) {
	          this.tableData = res.Body.Items || []
	          this.pagination.total = res.Body.TotalCount
	          this.pagination.pageIndex = res.Body.PageIndex
	        } else {
	          this.$message.warning(res.Msg)
	        }
	      })
	    },
	}
			
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  margin: 20px;
  .search-form {
    margin-bottom: 10px;
  }
  .pagination-container {
    display: flex;
    justify-content: flex-end;
  }
  .tab-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}
</style>