從零實現Vue的元件庫（十二）- Table 實現

Yzz發表於2019-01-25
Vue元件

基於Table標籤的展示資料元件。

Table 元件主要特點在於：
  • 元件 data 的解耦，減少重複程式碼；
  • 良好的擴充套件性，可以通過自定義列模板來適應不同的業務場景。

1. 例項

最終效果

程式碼

<fat-table :data="tableData">
    <template slot-scope="{ item }">
        <fat-table-column label="姓名">{{ item.name }}</fat-table-column>
        <fat-table-column label="日期">{{ item.date }}</fat-table-column>
        <fat-table-column label="地址">{{ item.address }}</fat-table-column>
    </template>
</fat-table>
<!-- 自定義列模板 -->
<fat-table :data="tableData">
    <template slot-scope="{ item }">
        <fat-table-column label="頭像">
            <fat-hover-tip type="right-center">
                <template slot="hover-part">{{ item.name }}</template>
                <template slot="tip-part">
                    <img src="/static/img/gakki.jpg" alt="示意圖">
                </template>
            </fat-hover-tip>
        </fat-table-column>

        <fat-table-column label="地址">{{ item.address }}</fat-table-column>
        
        <fat-table-column label="操作">
            <fat-button class="btn" type="primary" size="mini" @click="$message({ content: '編輯' })">編輯</fat-button>
            <fat-button class="btn" type="primary" size="mini" @click="$message({ content: '刪除' })">刪除</fat-button>
        </fat-table-column>
    </template>
</fat-table>
複製程式碼

例項地址：Table 例項

程式碼地址：Github UI-Library

2. 原理

Table 元件的基本結構如下

最終效果

主要可分為兩個部分：

  • 表格頭（Table-head）：包裹在 <thead> 標籤內，用於定義了一組定義表格的列頭；
  • 表格內容（Table-body）：包裹在 <tbody> 標籤內，用於定義表格的內容。

首先實現Table-body，再依據其對應 label 來生成Table-head。

Table-body 表格內容：

<template>
  <table :class="['table-wrapper', { 'is-stripe': stripe }]">
    <thead>
      ...
    </thead>
    <!-- Table-body -->
    <tbody class="table-body-wrapper">
      <tr v-for="(item, index) in data" :key="index" :data-index="index" class="tr-wrapper">
        <slot v-bind:item="item"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: { type: Array, default: () => [] },
    align: { type: String, default: "left" },
    stripe: { type: Boolean, default: false }
  },
  provide() {
    return {
      fatTable: this
    };
  },
  ...
};
</script>
複製程式碼

元件的 prop 中包含所需資料 data ，利用 v-for="(item, index) in data" 指令生成每一行 tr，再通過 slot-scope 來生成每一項的內容，此時的資料流變為

最終效果

具體使用時，只需要利用 slot-scope 來傳遞這個資料即可

<fat-table :data="tableData">
    <template slot-scope="{ item }">
        <fat-table-column label="姓名">{{ item.name }}</fat-table-column>
    </template>
</fat-table>
複製程式碼

這樣使得每一個 table-column 都可以被自定義，然後可以擴充成為模板。

Table-head 表格頭：

由於每個 fat-table-column 都有 label 屬性，利用這個 prop 來生成 Table-head，在Table元件中 provide 當前元件用於子元件的訪問

provide() {
    return {
        fatTable: this
    };
}
複製程式碼

同時 fat-table-column 元件的實現

<template>
  <td class="td-wrapper c-size-m">
    <slot>無</slot>
  </td>
</template>
<script>
export default {
  props: {
    label: { type: String, required: true }
  },
  inject: ["fatTable"],
  created() {
    this.$nextTick(() => {
      let dom = this.$el.parentNode;
      let index = null;

      while (dom.tagName !== "TR") {
        dom = dom.parentNode;
      }

      index = dom.getAttribute("data-index");
      if (index === "0") {
        this.fatTable.addLabel(this.label);

        this.$destroy = () => {
          this.fatTable.delLabel(this.label);
        };
      }
    });
  }
};
</script>
複製程式碼

當元件 create 時，判斷是否為第一行，如果是，則呼叫 this.fatTable.addLabel(this.label) ，通知父元件需要新增當前 label 到Table元件的 head 中，同時定義當元件 destroy 時， 刪除對應 label。

this.$destroy = () => {
    this.fatTable.delLabel(this.label);
};
複製程式碼

在Table元件中，定義 addLable 以及 delLabel 的處理方法

addLabel(label) {
    const { labels } = this;
    const existItem = labels.find(item => item.label === label);
    // 利用 colspan 來處理合並表頭的情況
    if (existItem) {
        existItem.colspan += 1;
    } else {
        labels.push({
          label,
          colspan: 1
        });
    }
},
delLabel(label) {
    this.labels = this.labels.filter(item => item.label !== label);
}
複製程式碼

3. 結論

利用 Vue 提供的一些插槽屬性以及 provide 、 inject 來實現 Table 元件，雖然功能不夠強大，但是具備良好地可擴充套件性，可進一步封裝所需元件。

往期文章：

原創宣告： 該文章為原創文章，轉載請註明出處。

相關文章