09 – Vue3 UI Framework – Table 組件

• 2021 年 12 月 17 日
• 筆記
• [00] UI Framework, [18] Vue, vue-project, vue.js

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

返回閱讀列表點擊 這裡

需求分析

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

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

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

骨架

容易得到如下骨架

實際上我們這裡是根據 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: //github.com/JeremyWu917/jeremy-ui

官網地址 🌍

JeremyUI: //ui.jeremywu.top

感謝閱讀 ☕