Eltable二次封装

封装

html 复制代码

<template>
    <div>
    <el-table
      :data="tableData"
      border
      stripe
      :header-row-style="{
        background: '#F1F6FF !important',
        color: '#3E445',
        fontWeight: '500',
      }"
    >
      <template v-for="(item, index) in column" >
        <el-table-column
            v-if="item.slot"
            :align="item.align"
            :label="item.label"
            :min-width="item.minWidth"
            :width="item.width"
            :fixed="item.fixed"
        >
          <template slot-scope="scope">
              <slot :name="item.slot" :row="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column
            v-else
            :align="item.align"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
        ></el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="total"
      background
      layout="total, sizes, prev, pager, next"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total"
      class="fyDiv"
      @size-change="handleSize"
      @current-change="handlePage"
    ></el-pagination>
    </div>
</template>

<script>
export default {
  props: {
    tableData: {
        type: Array,
        default: () => []
    },
    column: {
        type: Array,
        default: () => []
    },
    total: {
        type: Number,
        default: () => 0
    },
    pageSizes: {
        type: Array,
        default: () => [10, 20, 30, 40],
    },
    pageSize: {
        type: Number,
        default: () => 10
    },
    currentPage: {
        type: Number,
        default: () => 1
    },
  },
  data() {
    return {
        
    }
  },
  methods: {
    handleSize(){
      this.$emit('handleSize')
    },
    handlePage(){
      this.$emit('handlePage')
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__cell{
    min-height: 46px;
}
</style>

使用

html 复制代码

  <TablePage
            :column="column"
            :tableData="customerTable"
            >
               
                <template #level="scope">
                    {{ scope.row.level | CustomerLevelType }}
                </template>
                <template #stage="scope">
                    {{ scope.row.stage | CustomerStageType }}
                </template>
                <template #type="scope">
                    {{ scope.row.type | CustomerStageType }}
                </template>
                <template #action="scope">
                    <el-link type="primary" :underline="false" 
                    @click="openCustomer('edit',scope.row)" style="">按钮</el-link>
                    <el-link type="primary" :underline="false"
                    @click="openDetails(scope.row.id)">按钮</el-link>
                </template>
            </TablePage>

数据格式

html 复制代码

 column: [
            {
            label: '客户ID',
            prop: 'number',
            minWidth: 150,
            },{
            label: '客户名称',
            slot: 'name',
            minWidth: 180,
            },{
                label: '客户级别',
            prop: 'levelStr',
            minWidth: 100,
            },{
                label: 'POI名称',
            slot: 'poiName',
            minWidth: 150,
        }
        ]