2017年底了，總結(jié)了這一年多來(lái)的前端之路，Vue從入門到放棄，再二進(jìn)宮，從 Vue1.0 持續(xù)跟蹤到 Vue2.5。結(jié)合公司的一些實(shí)際項(xiàng)目，也封裝了一些比較實(shí)用的組件。

由于現(xiàn)在公司管理平臺(tái)主要運(yùn)用Element UI，索性就結(jié)合組件Table 和 Pagination 封裝了一個(gè)支持頁(yè)面切換的Table組件，不啰嗦，直接上代碼。

2、實(shí)現(xiàn)思路

2.1、Element UI 引入(整體引入)

main.js

// Element UIimport Element from 'element-ui'// 默認(rèn)樣式import 'element-ui/lib/theme-chalk/index.css'

2.2、開始封裝 iTable.vue 組件 (骨架)

由于公司項(xiàng)目都是以 i 開頭，所以，為了區(qū)分組件和頁(yè)面，習(xí)慣于組件命名也以 i 開頭。 首先把 Table 、 Pagination 組件加進(jìn)來(lái)

<template> <div class="table">  <!--region 表格-->  <el-table id="iTable"></el-table>  <!--endregion-->  <!--region 分頁(yè)-->  <el-pagination></el-pagination>  <!--endregion--> </div><template>

養(yǎng)成寫注釋的好習(xí)慣，個(gè)人項(xiàng)目的注釋量基本上不會(huì)低于 30%

2.3、在頁(yè)面中引用 iTable 組件，并且給 iTable 組件傳值

<template> <div class="table-page"> <i-table :list="list"     :total="total"     :otherHeight="otherHeight"    @handleSizeChange="handleSizeChange"    @handleIndexChange="handleIndexChange" @handleSelectionChange="handleSelectionChange"    :options="options"    :columns="columns"    :operates="operates"    @handleFilter="handleFilter"    @handelAction="handelAction"> </i-table> </div></template><script> import iTable from '../../components/Table/Index' export default {  components: {iTable},  data () {   return {    total: 0, // table數(shù)據(jù)總條數(shù)    list: [], // table數(shù)據(jù)    otherHeight: 208, // 除了table表格之外的高度，為了做table表格的高度自適應(yīng)    page: 1, // 當(dāng)前頁(yè)碼    limit: 20, // 每頁(yè)數(shù)量    options: {     stripe: true, // 是否為斑馬紋 table     loading: false, // 是否添加表格loading加載動(dòng)畫     highlightCurrentRow: true, // 是否支持當(dāng)前行高亮顯示     mutiSelect: true, // 是否支持列表項(xiàng)選中功能     filter: false, // 是否支持?jǐn)?shù)據(jù)過(guò)濾功能     action: false // 是否支持 表格操作功能    }, // table 的參數(shù)    columns: [     {      prop: 'id',      label: '編號(hào)',      align: 'center',      width: 60     },     {      prop: 'title',      label: '標(biāo)題',      align: 'center',      width: 400,      formatter: (row, column, cellValue) => {       return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}</span>`      }     },     {      prop: 'state',      label: '狀態(tài)',      align: 'center',      width: '160',      render: (h, params) => {       return h('el-tag', {       props: {type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'} // 組件的props       }, params.row.state === 0 ? '上架' : params.row.state === 1 ? '下架' : '審核中')      }     },     ……    ], // 需要展示的列    operates: {     width: 200,     fixed: 'right',     list: [      {       label: '編輯',       type: 'warning',       show: true,       icon: 'el-icon-edit',       plain: true,       disabled: true,       method: (index, row) => {        this.handleEdit(index, row)       }      },      {       label: '刪除',       type: 'danger',       icon: 'el-icon-delete',       show: true,       plain: false,       disabled: false,       method: (index, row) => {        this.handleDel(index, row)       }      }     ]    } // 列操作按鈕   }  },  methods: {    // 切換每頁(yè)顯示的數(shù)量   handleSizeChange (size) {    this.limit = size    console.log(' this.limit:', this.limit)   },   // 切換頁(yè)碼   handleIndexChange (index) {    this.page = index    console.log(' this.page:', this.page)   },   // 選中行   handleSelectionChange (val) {    console.log('val:', val)   },   // 編輯   handleEdit (index, row) {    console.log(' index:', index)    console.log(' row:', row)   },   // 刪除   handleDel (index, row) {    console.log(' index:', index)    console.log(' row:', row)   }  } }</script>