前言

在公司實習使用vue+element-ui框架進行前端開發，使用表格el-table較為多，有些業務邏輯比較相似，有些地方使用的重複性高，如果多個頁面使用相同的功能，就要多次重複寫邏輯上差不多的程式碼，所以打算對錶格這個元件進行封裝，將相同的程式碼和邏輯封裝在一起，把不同的業務邏輯抽離出來。話不多說，下面就來實現一下吧。

一、原生el-tbale程式碼——簡單の封裝

這裡直接引用官方的基礎使用模板，直接抄過來(✪ω✪)，下面程式碼中主要是抽離html部分，可以看出每個el-table-column中都含有prop、label、width屬性，只不過這些屬性值不太一樣罷了，其餘的部分都差不多一樣，所以表頭（表格每列el-table-column的定義）這裡可以封裝一下，把不同的地方封裝成一個數組物件結構，然後通過for迴圈來完成html中的部分。

封裝前

 <template>
  <el-table
   :data="tableData"
   style="width: 100%">
   <el-table-column
    prop="date"
    label="日期"
    width="180">
   </el-table-column>
   <el-table-column
    prop="name"
    label="姓名"
    width="180">
   </el-table-column>
   <el-table-column
    prop="address"
    label="地址">
   </el-table-column>
  </el-table>
 </template>

 <script>
  export default {
   data() {
    return {
     tableData: [{
      date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'
     },{
      date: '2016-05-04',address: '上海市普陀區金沙江路 1517 弄'
     },{
      date: '2016-05-01',address: '上海市普陀區金沙江路 1519 弄'
     },{
      date: '2016-05-03',address: '上海市普陀區金沙江路 1516 弄'
     }]
    }
   }
  }
 </script>

表格の樣子

封裝後

<template>
 <el-table :data="tableData" style="width: 100%">
  <template v-for="(item,key) in header">
   <el-table-column
    :key="key"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
   >
   </el-table-column>
  </template>
 </el-table>
</template>

<script>
export default {
 data() {
  return {
   header: [
    { prop: "date",label: "日期",width: "180" },{ prop: "name",label: "姓名",{ prop: "address",label: "地址" }
   ],tableData: [
    {
     date: "2016-05-02",name: "王小虎",address: "上海市普陀區金沙江路 1518 弄"
    },{
     date: "2016-05-04",address: "上海市普陀區金沙江路 1517 弄"
    },{
     date: "2016-05-01",address: "上海市普陀區金沙江路 1519 弄"
    },{
     date: "2016-05-03",address: "上海市普陀區金沙江路 1516 弄"
    }
   ]
  };
 }
};
</script>

現在資料還比較少，可能看不出封裝元件封裝的優勢，但是相對於之前程式碼，這裡邏輯上看起來更加清晰，而且修改列的時候直接改動data中的header資料即可，不用再去html程式碼中去“開刀”(￣▽￣)／。上面是最最最簡單的封裝了，嚴格來說只是簡單的抽離了一下程式碼中的資料結構，在正常的業務中肯定不止這麼簡單的封裝，接下來才是重點─━ _ ─━✧

二、el-tbale程式碼——複雜の封裝

在真正的開發過程中，表格不僅僅要展示資料，還要完成一些額外的任務，比如CRUD（增刪改查操作）和資料格式轉化，表格內每一條資料都有可能被單獨修改或者執行一些功能性的互動，這時候就要在單元格內內嵌一些按鈕、輸入框、標籤等等的程式碼，element官方給出的方法是使用插槽slot，獲取對應行的資料使用slot-scope，在對應的列中設定相應的程式碼，但是這裡給我們二次封裝就會帶來不小的問題，如果只是單純的修改資料的格式使用官方提供的formatter屬性還可以實現，但是要內嵌程式碼就會比較麻煩，內嵌程式碼必然就會帶來封裝上的困難，這也是我在封裝程式碼的時候遇到的最大的阻礙，如果要想封裝好這個表格，就必須將這部分程式碼抽離出元件外，在查詢閱讀了大量部落格之後（其實是我菜了，學藝不精(Ｔ▽Ｔ)），我終於找到了將內嵌程式碼剝離出元件的方法ヾ(๑╹◡╹)ﾉ"，那就是render函式，關於render可以參考一下這篇部落格，使用render函式就可以輕而易舉的將這部分邏輯程式碼抽離出來了。

el-table真正の二次封裝

二次封裝原始碼

<template>
 <el-table
  empty-text="暫無資料"
  ref="table"
  :data="tableList"
  border
  stripe
  fit
  highlight-current-row
  :height="inTableHeight"
  @selection-change="selectionChange"
  @row-click="rowClick"
 >
  <!-- 選擇框 -->
  <el-table-column
   v-if="select"
   type="selection"
   fixed="left"
   width="55"
   align="center"
  />
  <template v-for="(itm,idx) in header">
   <!-- 特殊處理列 -->
   <el-table-column
    v-if="itm.render"
    :key="idx"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
    :sortable="itm.sortable ? itm.sortable : false"
    :align="itm.align ? itm.align : 'center'"
    :fixed="itm.fixed ? itm.fixed : null"
    :show-overflow-tooltip="itm.tooltip"
    min-width="50"
   >
    <template slot-scope="scope">
     <ex-slot
      :render="itm.render"
      :row="scope.row"
      :index="scope.$index"
      :column="itm"
     />
    </template>
   </el-table-column>
   <!-- 正常列 -->
   <el-table-column
    v-else
    :key="idx"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
    :sortable="itm.sortable ? itm.sortable : false"
    :align="itm.align ? itm.align : 'center'"
    :fixed="itm.fixed ? itm.fixed : null"
    :formatter="itm.formatter"
    :show-overflow-tooltip="itm.tooltip"
    min-width="50"
   />
  </template>
 </el-table>
</template>

<script>
// 自定義內容的元件
var exSlot = {
 functional: true,props: {
  row: Object,render: Function,index: Number,column: {
   type: Object,default: null
  }
 },render: (h,context) => {
  const params = {
   row: context.props.row,index: context.props.index
  };
  if (context.props.column) params.column = context.props.column;
  return context.props.render(h,params);
 }
};

export default {
 components: { exSlot },props: {
  tableList: {
   type: Array,default: () => []
  },header: {
   type: Array,select: {
   type: Boolean,default: () => false
  },height: {
   type: [Number,String,Function],default: () => null
  }
 },data() {
  return {
   inTableHeight: null
  };
 },created() {
  //該階段可以接收父元件的傳遞引數
  this.inTableHeight = this.height;
 },mounted() {
  this.$nextTick(() => {
   //表格高度自適應瀏覽器大小
   this.changeTableHight();
   if (!this.height) {
    window.onresize = () => {
     this.changeTableHight();
    };
   }
  });
 },destroyed() {
  //高度自適應事件登出
  window.onresize = null;
 },watch: {
  /**
   * 資料變化後 高度自適應
   */
  tableList() {
   this.$nextTick(() => {
    this.changeTableHight();
   });
  }
 },methods: {
  /**
   * 選擇框選擇後更改,事件分發
   */
  selectionChange(selection) {
   this.$emit("selection-change",selection);
  },/**
   * 點選事件
   */
  rowClick(row,column,event) {
   this.$emit("row-click",row,event);
  },/**
   * 高度自適應
   * 當表格展示空間小於460按460px展示，大於的時候高度填充
   */
  changeTableHight() {
   if (this.height) {
    //如果有傳進來高度就取消自適應
    this.inTableHeight = this.height;
    this.$refs.table.doLayout();
    return;
   }
   let tableHeight = window.innerHeight || document.body.clientHeight;
   //高度設定
   let disTop = this.$refs.table.$el;
   //如果表格上方有元素則減去這些高度適應視窗，66是底下留白部分
   tableHeight -= disTop.offsetTop + 66;
   if (disTop.offsetParent) tableHeight -= disTop.offsetParent.offsetTop;
   this.inTableHeight = tableHeight < 460 ? 460 : tableHeight;
   //重繪表格
   this.$refs.table.doLayout();
  }
 }
};
</script>
<style></style>

封裝程式碼的相關解釋

以上就是我封裝的程式碼，部分屬性或者方法由於沒有使用到所以我就沒有將對應的方法和屬性封裝進去，如果你們開發中有用到對應的地方其實可以照貓畫虎的填上去即可，我封裝表格的時候在屬性這裡使用了三目運算子，用於做一些相容，如果不傳對應的屬性就給個預設值，比如align屬性，我設定的是預設居中。還有就是方法，在表格的方法引用方面，其實就是把官方的方法用$emit事件將對應的引數和方法名用同樣的方法分發給父元件，這樣父元件使用完全可以參照element官方文件使用這些方法，在元件內我只是進行了一次轉發而已，我自己寫的時候並沒有用到太多的方法，所以只封裝了一兩個，如果有需要可以自行新增。除了上述兩個封裝，有一個特別的地方就是勾選框，不能放在迴圈內，不然會出現錯誤，可能是索引的問題吧，所以我單獨使用一個引數來控制是否顯示選擇框。另外就是，在公司產品要求表格能夠自適應頁面的高度，這個功能我也是修改了好久，460是最小的高度，關於高度自適應的全部在changeTableHight()方法中，如果不需要這個功能，將函式和所有引用該函式的地方刪除即可。

height：如果不傳入這個屬性，那麼表格高度就如上面所說的是自適應高度，可以通過這個屬性來指定表格的高度。
formatter：這個屬性在列中如果使用插槽就會失效，所以我設定了兩個列，如果有render方法說明單元格要內嵌程式碼，就是用特殊列，反之就是正常列，所以formatter和render不能同時使用。

render：終於到了最關鍵的地方了(￣▽￣)／，這個可是我封裝表格的最大難點了，render對我個人理解而言就是虛擬結點，在DOM和CSSOM樹合併為render樹的階段，對程式碼進行修改。

以上就是我封裝表格的詳細解釋了，可能有遺漏的部分，畢竟封裝這個表格也讓我學了不少東西，所以之前有些地方可能解釋不清楚或者不到位，還望各位大佬指正。

三、父元件引用封裝的元件

封裝這麼久的元件，當然要使用起來才知道的到底好不好用，關於引用方面，首先要在引用的地方進行元件註冊，如果全域性註冊過了，可以忽略在區域性註冊，關於元件的註冊這裡就不做詳解了(oﾟ▽ﾟ)o 。我使用了全域性註冊，所以這裡是直接引入我自己封裝好的元件。

<template>
 <div class="hello">
  <xd-table :table-list="tableData" :header="header" height="300"></xd-table>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",data() {
  return {
   header: [
    { prop: "w",label: "w" },{ prop: "x",label: "x",formatter: (row) => {
      return row.x.toFixed(3);
     },},{ prop: "d",label: "d",formatter: (row) => {
      return row.d.toFixed(2);
     },{
     label: "操作",data) => {
      return (
       <el-button
        type="primary"
        onClick={() => {
         this.handleClick(data.row);
        }}
       >
        點我獲取行資料
       </el-button>
      );
     },],tableData: [
    { w: 1,x: 99.25123,d: 0.23892 },{ w: 1,x: 255.6666,d: 0.99134 },};
 },methods: {
  handleClick(row) {
   console.log(row);
  },};
</script>

引用元件之前一定要記得先註冊，這裡我只使用了幾個屬性，其他屬性沒有使用，因為是demo，主要還是展示render內嵌程式碼的方法，還有一個就是官方formatter方法的使用。
有一個需要注意點就是render內我使用了JSX模板語法這裡需要在VUE專案中單獨去配置一下JSX語法，如果不想使用JSX，直接寫也可以，因為不使用JSX語法寫出來的內嵌模板程式碼比較難讀所以我就不展示了，個人建議還是使用JSX語法，雖然和原生vue有些地方使用方法不太一樣。

效果截圖

結語

這次封裝vue元件，花了我將近半個月的時間，從剛開始的接觸到發現bug然後去修改，來來回回終於精簡封裝出現在這個二次封裝的元件，可能對於熟悉vue和element的人來說這個封裝其實很簡單，但是對於我來說這個算是我這段實習期封裝的比較好的一個元件了吧，當然除了封裝這個元件還有別的事在做，不可能放著公司的活不幹（哈哈哈哈︿(￣︶￣)︿），總之在封裝元件過程中學習到了不少東西，也算是一個大大的進步，於是來寫一篇部落格來記錄一下

到此這篇關於element el-table表格的二次封裝實現(附表格高度自適應)的文章就介紹到這了,更多相關element el-table二次封裝內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！