09 - Vue3 UI Framework - Table 元件

Jeremy.Wu發表於2021-12-17
VueUIFramework元件

接下來做個自定義的表格元件，即 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 元件，看一下效果：

table

專案地址 ?

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

官網地址 ?

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕

相關文章