el-table封装

        向后台管理一类的系统，基本都是表格，使用el-table时，不是在复制就是再复制的路上。所以咱们把el-table封装起来，这样页面看起来就更加整洁了。

        在封装el-table之前先写一个分页器的组件Pagination.vue吧

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
 
<script>
 
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default () {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get () {
        return this.page
      },
      set (val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get () {
        return this.limit
      },
      set (val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
    },
    handleCurrentChange (val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
    }
  }
}
</script>
 
<style lang="scss" scoped>
.pagination-container {
  background: #fff;
  .el-pagination {
      text-align: right;
      .btn-prev, .btn-next {
          color: #FF5F17;
      }
      span:not([class*=suffix]), button {
          color: #000000;
          font-size: 12px;
          padding: 0;
      }
      button:hover {
          color: #FF5F17;
          background: rgba(255, 95, 23, 0.15);
          border-radius: 8px;
          min-width: 26px;
          height: 26px;
          margin: 0px 5px;
      }
      .btn-prev, .btn-next {
          padding: 0;
      }
      .el-input--medium .el-input__inner {
          width: 32px;
          height: 22px;
          border-radius: 6px;
          border: 1px solid #FF5F17 !important;
          padding: 0 !important;
      }
  }
  .el-pager li {
      color: #C4CED7;
  }
  .el-pager li.active {
      color: #FFFFFF;
      background-color: #000000;
      height: 26px;
      min-width: 26px;
      min-height: 26px;
      line-height: 26px;
      cursor: default;
      border-radius: 8px;
  }
  .el-pager li:hover {
      color: #FF5F17 ;
  }
}
.pagination-container.hidden {
  display: none;
}
 
</style>

        然后再创建一个ZtTable.vue。代码如下

<template>
    <div class="zt__table">
        <el-table :data="tableData" @cell-click="cellClick" :border="border">
            <el-table-column
                v-if="index"
                type="index"
                label="序号"
                align="center"
                width="50">
                <template slot-scope="scope">
                    <span>{{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
                </template>
            </el-table-column>
            <template v-for="(item, index) in tableOption">
                <el-table-column
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :align="item.align || 'center'"
                    :show-overflow-tooltip="item.overHidden || true">
                    <template slot-scope="scope">
                        <slot
                        v-if="item.slot"
                        :name="scope.column.property"
                        :row="scope.row"
                        :$index="scope.$index"
                        />
                        <span v-else>{{ scope.row[scope.column.property] }}</span>
                    </template>
                </el-table-column>
            </template>
            <el-table-column
              v-if="operation"
              label="操作"
              align="center">
              <template slot-scope="scope">
                  <slot
                      name="menu"
                      :row="scope.row"
                      :$index="scope.$index"
                      />
              </template>
            </el-table-column>
        </el-table>
        <Pagination
            v-show="page.total>0"
            :total="page.total"
            :page.sync="page.current"
            :limit.sync="page.size"
            @pagination="pageChange"
            />
    </div>
</template>
 
<script>
import Pagination from '../Pagination'
export default {
  name: 'ZtTable',
  components: {
    Pagination
  },
  props: {
    index: {
      type: Boolean,
      default: function () {
        return true
      }
    }, // 是否设置序号，默认设置
    border: {
      type: Boolean,
      default: function () {
        return false
      }
    }, // 是否设置边框，默认不要
    operation: {
      type: Boolean,
      default: function () {
        return false
      }
    }, // 是否有操作列，默认无
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    }, // 列表数据
    tableOption: {
      type: Array,
      default: function () {
        return []
      }
    }, // 表头
    page: {
      type: Object,
      default: function () {
        return {
          total: 0,
          current: 1,
          page: 10
        }
      }
    } // 分页
  },
  methods: {
    pageChange () {
      this.$emit('page-change')
    },
    cellClick (row, column, cell, event) {
      this.$emit('cell-click', { row, column, cell, event })
    }
  }
}
</script>

然后直接在页面中调用即可。

<template>
  <div class="container">
    <zt-table
      :tableData="tableData"
      :page="page"
      :tableOption.sync="tableOption"
      @page-change="getList"
      @cell-click="cellClick">
        <template slot="ranks" slot-scope="scope">
		    <el-tag>{{ scope.row.name}}</el-tag>
        </template>
        <template slot="menu" slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-delete"                  
                @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
    </zt-table>
  </div>
</template>
 
<script>
import ZtTable from '@/components/Zttable'
export default {
  components: {
    ZtTable
  },
  data () {
    return {
      tableOption: [
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'sex' },
        { label: '身份证号', prop: 'idNumber' },
        { label: '职务', prop: 'duty' },
        { label: '职级', prop: 'ranks', solt: true }/ / 这里表示自定义列
      ],
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      tableData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {}, // 数据获取
    cellClick (e) {}，
    deleteHandle（）
  }
}
</script>
 
<style lang="scss" scoped></style>