09 - Vue3 UI Framework - Table 組件

接下來做個自定義的表格組件，即 table 組件

返回閱讀列表點擊 這裏

需求分析

開始之前我們先做一個簡單的需求分析

1. 基於原生 table 標籤的強語義
2. 允許用戶自定義表頭、表體
3. 可選是否具有邊框

那麼可以整理出以下參數表格

參數	含義	類型	可選值	默認值
heads	表頭	Array	數組，每一項包含兩個 string 字段：name、identifier	必填
datas	表數據	Array	數組，每一項包含與 heads 相同數量的 string 字段	必填
bordered	是否有邊框	boolean	false / true	false

骨架

容易得到如下骨架

實際上我們這裏是根據 theme 值判斷，然後去渲染原生的 input 或者 textarea 組件，所以可以很容易得到骨架，代碼如下：

<template>
    <table class="jeremy-table" :bordered="bordered">
        <slot></slot>
    </table>
</template>

功能

首先，我們再 Typescript 中聲明一些需求分析中的屬性：

declare const props: {
  bordered: boolean;
};

然後，再在 export default 中寫入聲明的參數：

export default {
  install: function (Vue) {
    Vue.component(this.name, this);
  },
  name: "JeremyTable",
  props: {
    bordered: {
      type: Boolean,
      default: false,
    },
  },
};

樣式表

補全層疊樣式表

<style lang="scss">
.jeremy-table {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  th,
  td {
    padding: 12px;
  }
  tbody {
    > tr {
      transition: background-color 250ms;
      &:nth-child(even) {
        background: rgb(247, 247, 247);
      }
      &:hover {
        background: #d3c8f5;
      }
    }
  }
}
.jeremy-table[bordered="true"] {
  border: 1px solid rgb(235, 235, 235);
  tr,
  th,
  td {
    border: 1px solid rgb(235, 235, 235);
  }
}
</style>

注意，當設置屬性 bordered 的時候，因爲它不是 DOM 元素本有的屬性，所以無論什麼情況都會被添加，只不過值可能是 false ，但是 disabled 屬性就沒有這個問題，它爲 false 值時不會綁定到 DOM 元素上，所以，此處屬性選擇器要寫 [bordered="true"]

測試

創建一個測試頁，導入 JeremyTable 組件，看一下效果：

項目地址 🎁

GitHub: https://github.com/JeremyWu917/jeremy-ui

官網地址 🌍

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕