element-ui組件的樣式是固定的，比如我們常用的那些組件，table，button，icon，tab等等。當(dāng)我們需要的樣式和element組件有偏差的時候，我們可以通過針對element組件進行二次封裝，然后通過Vue.component（）方法，定義到全局,來解決我們當(dāng)前的項目需求。

2.element-ui組件出現(xiàn)問題的時候，我們有中間鍵支持，不至于整個項目崩塌。

其實這種現(xiàn)象是常有發(fā)生的，比如組件由最開始的開源的，突然收費了（雖然我相信ele團隊不會的）?；蛘遝lement組件庫的開發(fā)團隊停止了維護。組件的二次封裝都是有意義的。我們可以手寫一個類似的組件，或者引入其它組件，使我們的項目，能夠正常使用。綜上所述，如果我們基于element做的項目，因為element出現(xiàn)了問題，組件的二次封裝，可以有效的防止項目崩塌。

3.二次封裝的弊端：

因為我們對element-ui進行了二次封裝，當(dāng)element-ui組件升級的時候，我們二次封裝的組件不能直接使用element-ui的新方法，所以需要有人不斷的對組件進行維護，有一定的開發(fā)成本。

如何對element對進行二次封裝？

本文全文以vue-cli和element為例，如果對vue-cli如何下載和安裝以及element-ui如何引用不了解的同學(xué)，本文對你的幫助將很小。
首先，先建立一個文件夾，table.vue是我們基于element-ui的el-table進行二次封裝的文件，以及所在目錄如圖：

<template>
  <div class="sir-table">
    <el-table :data="showData" style="width: 100%">
      <slot></slot>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      default () {
        return []
      },
      type: Array
    }
  },
  data () {
    return {
      showData: []
    }
  },
  methods: {
  },
  mounted () {
    this.showData = this.data
    console.log(this.showData)
  }

}
</script>
<style scoped>

</style>

然后，我們通過index把我們二次封裝的組件引入進來，并給它名為為sir-table， ps：叫什么都行！

import SirTable from './table'

export default {
  install: (Vue) => {
    Vue.component('sir-table', SirTable)
  }
}

然后在main.js中引入我們二次封裝組件的index.js，并掛在全局上。

import eleconfig from './components/elecomponent/index.js'
Vue.use(eleconfig)

然后，在任意的一個文件中，掉用我們封裝好的組件

<template>
  <div class="index">
    <sir-table :data="tableData5">   //  在這里調(diào)用我們二次封裝的組件
      <el-table-column label="商品 ID" prop="id">
      </el-table-column>
      <el-table-column label="商品名稱" prop="name">
      </el-table-column>
      <el-table-column label="描述" prop="desc">
      </el-table-column>
    </sir-table>
  </div>
</template>
<script>
export default {
  // name: 'HelloWorld',
  data () {
    return {
      tableData5: [{
        id: '12987122',
        name: '好滋好味雞蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
        address: '上海市普陀區(qū)真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味雞蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
        address: '上海市普陀區(qū)真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }]
    }
  },
  methods: {
  }
}
</script>
<style scoped>
.index {
  width: 800px;
  margin: 0 auto;
  margin-top: 200px;
}
</style>

就這樣，一個簡易的element組件的二次封裝，就完成了！