element el-table表格的vue組件二次封裝（附表格高度自適應）

時間 2021-01-24

標籤 html 前端 vue element-ui 數組瀏覽器數據結構框架 ide 函數欄目軟件設計简体版

原文原文鏈接

基於vue的el-table表格二次封裝組件方法

前言

在公司實習使用vue+element-ui框架進行前端開發，使用表格el-table較爲多，有些業務邏輯比較類似，有些地方使用的重複性高，若是多個頁面使用相同的功能，就要屢次重複寫邏輯上差很少的代碼，因此打算對錶格這個組件進行封裝，將相同的代碼和邏輯封裝在一塊兒，把不一樣的業務邏輯抽離出來。話很少說，下面就來實現一下吧。html

1、原生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',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

表格の樣子
vue
封裝後element-ui

<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: "上海市普陀區金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1516 弄"
        }
      ]
    };
  }
};
</script>

如今數據還比較少，可能看不出封裝組件封裝的優點，可是相對於以前代碼，這裏邏輯上看起來更加清晰，並且修改列的時候直接改動data中的header數據便可，不用再去html代碼中去「開刀」(￣▽￣)／。上面是最最最簡單的封裝了，嚴格來講只是簡單的抽離了一下代碼中的數據結構，在正常的業務中確定不止這麼簡單的封裝，接下來纔是重點─━ _ ─━✧數組

2、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,
      default: () => []
    },
    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, column, 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樹的階段，對代碼進行修改。

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

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

封裝這麼久的組件，固然要使用起來才知道的到底好很差用，關於引用方面，首先要在引用的地方進行組件註冊，若是全局註冊過了，能夠忽略在局部註冊，關於組件的註冊這裏就不作詳解了(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: "操做",
          render: (h, 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有些地方使用方法不太同樣。ide

效果截圖

結語

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