快捷導(dǎo)航

element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))

更新時(shí)間：2021年01月19日 14:38:10 作者：ZERO丶D

這篇文章主要介紹了element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在公司實(shí)習(xí)使用vue+element-ui框架進(jìn)行前端開(kāi)發(fā)，使用表格el-table較為多，有些業(yè)務(wù)邏輯比較相似，有些地方使用的重復(fù)性高，如果多個(gè)頁(yè)面使用相同的功能，就要多次重復(fù)寫(xiě)邏輯上差不多的代碼，所以打算對(duì)表格這個(gè)組件進(jìn)行封裝，將相同的代碼和邏輯封裝在一起，把不同的業(yè)務(wù)邏輯抽離出來(lái)。話(huà)不多說(shuō)，下面就來(lái)實(shí)現(xiàn)一下吧。

一、原生el-tbale代碼——簡(jiǎn)單の封裝

這里直接引用官方的基礎(chǔ)使用模板，直接抄過(guò)來(lái)(✪ω✪)，下面代碼中主要是抽離html部分，可以看出每個(gè)el-table-column中都含有prop、label、width屬性，只不過(guò)這些屬性值不太一樣罷了，其余的部分都差不多一樣，所以表頭（表格每列el-table-column的定義）這里可以封裝一下，把不同的地方封裝成一個(gè)數(shù)組對(duì)象結(jié)構(gòu)，然后通過(guò)for循環(huán)來(lái)完成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: '上海市普陀區(qū)金沙江路 1518 弄'
     }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1517 弄'
     }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1519 弄'
     }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 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: "姓名", width: "180" },
    { prop: "address", label: "地址" }
   ],
   tableData: [
    {
     date: "2016-05-02",
     name: "王小虎",
     address: "上海市普陀區(qū)金沙江路 1518 弄"
    },
    {
     date: "2016-05-04",
     name: "王小虎",
     address: "上海市普陀區(qū)金沙江路 1517 弄"
    },
    {
     date: "2016-05-01",
     name: "王小虎",
     address: "上海市普陀區(qū)金沙江路 1519 弄"
    },
    {
     date: "2016-05-03",
     name: "王小虎",
     address: "上海市普陀區(qū)金沙江路 1516 弄"
    }
   ]
  };
 }
};
</script>

現(xiàn)在數(shù)據(jù)還比較少，可能看不出封裝組件封裝的優(yōu)勢(shì)，但是相對(duì)于之前代碼，這里邏輯上看起來(lái)更加清晰，而且修改列的時(shí)候直接改動(dòng)data中的header數(shù)據(jù)即可，不用再去html代碼中去“開(kāi)刀”(￣▽?zhuān)?／。上面是最最最簡(jiǎn)單的封裝了，嚴(yán)格來(lái)說(shuō)只是簡(jiǎn)單的抽離了一下代碼中的數(shù)據(jù)結(jié)構(gòu)，在正常的業(yè)務(wù)中肯定不止這么簡(jiǎn)單的封裝，接下來(lái)才是重點(diǎn)─━ _ ─━✧

二、el-tbale代碼——復(fù)雜の封裝

在真正的開(kāi)發(fā)過(guò)程中，表格不僅僅要展示數(shù)據(jù)，還要完成一些額外的任務(wù)，比如CRUD（增刪改查操作）和數(shù)據(jù)格式轉(zhuǎn)化，表格內(nèi)每一條數(shù)據(jù)都有可能被單獨(dú)修改或者執(zhí)行一些功能性的交互，這時(shí)候就要在單元格內(nèi)內(nèi)嵌一些按鈕、輸入框、標(biāo)簽等等的代碼，element官方給出的方法是使用插槽slot，獲取對(duì)應(yīng)行的數(shù)據(jù)使用slot-scope，在對(duì)應(yīng)的列中設(shè)置相應(yīng)的代碼，但是這里給我們二次封裝就會(huì)帶來(lái)不小的問(wèn)題，如果只是單純的修改數(shù)據(jù)的格式使用官方提供的formatter屬性還可以實(shí)現(xiàn)，但是要內(nèi)嵌代碼就會(huì)比較麻煩，內(nèi)嵌代碼必然就會(huì)帶來(lái)封裝上的困難，這也是我在封裝代碼的時(shí)候遇到的最大的阻礙，如果要想封裝好這個(gè)表格，就必須將這部分代碼抽離出組件外，在查詢(xún)閱讀了大量博客之后（其實(shí)是我菜了，學(xué)藝不精(Ｔ▽?zhuān)?），我終于找到了將內(nèi)嵌代碼剝離出組件的方法ヾ(๑╹◡╹)ﾉ"，那就是render函數(shù)，關(guān)于render可以參考一下這篇博客，使用render函數(shù)就可以輕而易舉的將這部分邏輯代碼抽離出來(lái)了。

el-table真正の二次封裝

二次封裝源代碼

<template>
 <el-table
  empty-text="暫無(wú)數(shù)據(jù)"
  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>
// 自定義內(nèi)容的組件
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,
   default: () => []
  },
  select: {
   type: Boolean,
   default: () => false
  },
  height: {
   type: [Number, String, Function],
   default: () => null
  }
 },
 data() {
  return {
   inTableHeight: null
  };
 },
 created() {
  //該階段可以接收父組件的傳遞參數(shù)
  this.inTableHeight = this.height;
 },
 mounted() {
  this.$nextTick(() => {
   //表格高度自適應(yīng)瀏覽器大小
   this.changeTableHight();
   if (!this.height) {
    window.onresize = () => {
     this.changeTableHight();
    };
   }
  });
 },
 destroyed() {
  //高度自適應(yīng)事件注銷(xiāo)
  window.onresize = null;
 },
 watch: {
  /**
   * 數(shù)據(jù)變化后 高度自適應(yīng)
   */
  tableList() {
   this.$nextTick(() => {
    this.changeTableHight();
   });
  }
 },
 methods: {
  /**
   * 選擇框選擇后更改,事件分發(fā)
   */
  selectionChange(selection) {
   this.$emit("selection-change", selection);
  },
  /**
   * 點(diǎn)擊事件
   */
  rowClick(row, column, event) {
   this.$emit("row-click", row, column, event);
  },
  /**
   * 高度自適應(yīng)
   * 當(dāng)表格展示空間小于460按460px展示，大于的時(shí)候高度填充
   */
  changeTableHight() {
   if (this.height) {
    //如果有傳進(jìn)來(lái)高度就取消自適應(yīng)
    this.inTableHeight = this.height;
    this.$refs.table.doLayout();
    return;
   }
   let tableHeight = window.innerHeight || document.body.clientHeight;
   //高度設(shè)置
   let disTop = this.$refs.table.$el;
   //如果表格上方有元素則減去這些高度適應(yīng)窗口，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>

封裝代碼的相關(guān)解釋

以上就是我封裝的代碼，部分屬性或者方法由于沒(méi)有使用到所以我就沒(méi)有將對(duì)應(yīng)的方法和屬性封裝進(jìn)去，如果你們開(kāi)發(fā)中有用到對(duì)應(yīng)的地方其實(shí)可以照貓畫(huà)虎的填上去即可，我封裝表格的時(shí)候在屬性這里使用了三目運(yùn)算符，用于做一些兼容，如果不傳對(duì)應(yīng)的屬性就給個(gè)默認(rèn)值，比如align屬性，我設(shè)置的是默認(rèn)居中。還有就是方法，在表格的方法引用方面，其實(shí)就是把官方的方法用$emit事件將對(duì)應(yīng)的參數(shù)和方法名用同樣的方法分發(fā)給父組件，這樣父組件使用完全可以參照element官方文檔使用這些方法，在組件內(nèi)我只是進(jìn)行了一次轉(zhuǎn)發(fā)而已，我自己寫(xiě)的時(shí)候并沒(méi)有用到太多的方法，所以只封裝了一兩個(gè)，如果有需要可以自行添加。除了上述兩個(gè)封裝，有一個(gè)特別的地方就是勾選框，不能放在循環(huán)內(nèi)，不然會(huì)出現(xiàn)錯(cuò)誤，可能是索引的問(wèn)題吧，所以我單獨(dú)使用一個(gè)參數(shù)來(lái)控制是否顯示選擇框。另外就是，在公司產(chǎn)品要求表格能夠自適應(yīng)頁(yè)面的高度，這個(gè)功能我也是修改了好久，460是最小的高度，關(guān)于高度自適應(yīng)的全部在changeTableHight()方法中，如果不需要這個(gè)功能，將函數(shù)和所有引用該函數(shù)的地方刪除即可。

height：如果不傳入這個(gè)屬性，那么表格高度就如上面所說(shuō)的是自適應(yīng)高度，可以通過(guò)這個(gè)屬性來(lái)指定表格的高度。
formatter：這個(gè)屬性在列中如果使用插槽就會(huì)失效，所以我設(shè)置了兩個(gè)列，如果有render方法說(shuō)明單元格要內(nèi)嵌代碼，就是用特殊列，反之就是正常列，所以formatter和render不能同時(shí)使用。

render：終于到了最關(guān)鍵的地方了(￣▽?zhuān)?／，這個(gè)可是我封裝表格的最大難點(diǎn)了，render對(duì)我個(gè)人理解而言就是虛擬結(jié)點(diǎn)，在DOM和CSSOM樹(shù)合并為render樹(shù)的階段，對(duì)代碼進(jìn)行修改。

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

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

封裝這么久的組件，當(dāng)然要使用起來(lái)才知道的到底好不好用，關(guān)于引用方面，首先要在引用的地方進(jìn)行組件注冊(cè)，如果全局注冊(cè)過(guò)了，可以忽略在局部注冊(cè)，關(guān)于組件的注冊(cè)這里就不做詳解了(oﾟ▽ﾟ)o 。我使用了全局注冊(cè)，所以這里是直接引入我自己封裝好的組件。

<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: "操作",
     render: (h, data) => {
      return (
       <el-button
        type="primary"
        onClick={() => {
         this.handleClick(data.row);
        }}
       >
        點(diǎn)我獲取行數(shù)據(jù)
       </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>

引用組件之前一定要記得先注冊(cè)，這里我只使用了幾個(gè)屬性，其他屬性沒(méi)有使用，因?yàn)槭莇emo，主要還是展示render內(nèi)嵌代碼的方法，還有一個(gè)就是官方formatter方法的使用。
有一個(gè)需要注意點(diǎn)就是render內(nèi)我使用了JSX模板語(yǔ)法這里需要在VUE項(xiàng)目中單獨(dú)去配置一下JSX語(yǔ)法，如果不想使用JSX，直接寫(xiě)也可以，因?yàn)椴皇褂肑SX語(yǔ)法寫(xiě)出來(lái)的內(nèi)嵌模板代碼比較難讀所以我就不展示了，個(gè)人建議還是使用JSX語(yǔ)法，雖然和原生vue有些地方使用方法不太一樣。

效果截圖

結(jié)語(yǔ)

這次封裝vue組件，花了我將近半個(gè)月的時(shí)間，從剛開(kāi)始的接觸到發(fā)現(xiàn)bug然后去修改，來(lái)來(lái)回回終于精簡(jiǎn)封裝出現(xiàn)在這個(gè)二次封裝的組件，可能對(duì)于熟悉vue和element的人來(lái)說(shuō)這個(gè)封裝其實(shí)很簡(jiǎn)單，但是對(duì)于我來(lái)說(shuō)這個(gè)算是我這段實(shí)習(xí)期封裝的比較好的一個(gè)組件了吧，當(dāng)然除了封裝這個(gè)組件還有別的事在做，不可能放著公司的活不干（哈哈哈哈︿(￣︶￣)︿），總之在封裝組件過(guò)程中學(xué)習(xí)到了不少東西，也算是一個(gè)大大的進(jìn)步，于是來(lái)寫(xiě)一篇博客來(lái)記錄一下

到此這篇關(guān)于element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))的文章就介紹到這了,更多相關(guān)element el-table二次封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: