首頁 > 軟體

Element Plus元件Form表單Table表格二次封裝的完整過程

2022-09-05 14:00:29

前言

直至今天，看了一下別人寫的程式碼，才發現以前自己寫的程式碼太垃圾，所以在這次做的一個後臺專案中，採用他的程式碼風格，怎麼說呢，複用性特別好，封裝的很好，學到很多，所以記錄一下思路，我認為這個封裝思路是真的很棒，寫第一個頁面的時候可能會麻煩一些，但是後面只要是相似的頁面，事半功倍，直接CV改設定項就好了，是真的頂，記錄一下，學習一下，我這裡用的是vue3+ts

Form表單的封裝

簡述

這裡是Form表單部分，下面是完整的思路，最後有附上完整的程式碼，大佬可以直接看完整的程式碼就能看懂了，小白們跟著我的思路估計能看懂....

正常的使用

如果我們正常使用元件庫裡面的元件會是這樣的

程式碼如下

role.vue頁面元件

<template>
  <div class="role">
    <el-form>
      <el-form-item label="使用者id">
        <el-input placeholder="請輸入使用者id"></el-input>
      </el-form-item>
      <el-form-item label="使用者名稱">
        <el-input placeholder="請輸入使用者名稱"></el-input>
      </el-form-item>
      <el-form-item label="真實姓名">
        <el-input placeholder="請輸入真實姓名"></el-input>
      </el-form-item>
      <el-form-item label="使用者名稱">
        <el-input placeholder="請輸入使用者名稱"></el-input>
      </el-form-item>
      <el-form-item label="電話號碼">
        <el-input placeholder="請輸入電話號碼"></el-input>
      </el-form-item>
      <el-form-item label="使用者狀態">
        <el-select placeholder="請選擇使用者狀態">
          <el-option label="禁用" value="0"></el-option>
          <el-option label="啟用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="建立時間">
        <el-date-picker
          startPlaceholder="開始時間"
          endPlaceholder="結束時間"
          type="daterange"
        ></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
​
<script setup lang="ts"></script>
​
<style scoped lang="less"></style>

這時我們可以加點樣式讓他變得好看，並且佈局也變一變就可以變成這樣,當然樣式佈局可以自定義

程式碼如下

role.vue頁面元件

<template>
  <div class="role">
    <el-form labelWidth="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="使用者id"
            :style="{
              padding: '10px 20px'
            }"
          >
            <el-input placeholder="請輸入使用者id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="使用者名稱"
            :style="{
              padding: '10px 20px'
            }"
          >
            <el-input placeholder="請輸入使用者名稱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="真實姓名"
            :style="{
              padding: '10px 20px'
            }"
          >
            <el-input placeholder="請輸入真實姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="電話號碼"
            :style="{
              padding: '10px 20px'
            }"
          >
            <el-input placeholder="請輸入電話號碼"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="使用者狀態"
            :style="{
              padding: '10px 20px'
            }"
          >
            <el-select placeholder="請選擇使用者狀態">
              <el-option label="禁用" value="0"></el-option>
              <el-option label="啟用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="建立時間"
            :style="{
              padding: '10px 20px'
            }"
          >
            <el-date-picker
              startPlaceholder="開始時間"
              endPlaceholder="結束時間"
              type="daterange"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
​
<script setup lang="ts"></script>
​
<style scoped lang="less">
.el-form-item {
  margin-top: 18px;
}
.el-select {
  width: 100%;
}
</style>

開始封裝①

這時我們就可以開始封裝了，如果我們可以通過傳設定項的方法來控制樣式和form表單項的型別和個數的話，是不是變得很方便，下次直接傳設定項用就好了？話不多說直接上圖上程式碼

可以看到效果一樣，程式碼卻簡潔了，模板裡面不會出現大量重複的程式碼了

role.vue頁面元件

<template>
  <div class="role">
    <el-form :labelWidth="searchFormConfig.labelWidth">
      <el-row>
        <template v-for="item in searchFormConfig.formItems" :key="item.label">
          <el-col :span="8">
            <el-form-item
              :label="item.label"
              :style="searchFormConfig.itemStyle"
            >
              <template
                v-if="item.type === 'input' || item.type === 'password'"
              >
                <el-input 
                    :placeholder="item.placeholder" 
                    :show-password="item.type === 'password'"
                ></el-input>
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select :placeholder="item.placeholder">
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </template>
              <template v-else>
                <el-date-picker v-bind="item.otherOptions"></el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>
​
<script setup lang="ts">
// 定義表單設定項
const searchFormConfig = {
  formItems: [
    {
      type: 'input',
      label: '使用者id',
      placeholder: '請輸入使用者id'
    },
    {
      type: 'input',
      label: '使用者名稱',
      placeholder: '請輸入使用者名稱'
    },
    {
      type: 'input',
      label: '真實姓名',
      placeholder: '請輸入真實姓名'
    },
    {
      type: 'input',
      label: '電話號碼',
      placeholder: '請輸入電話號碼'
    },
    {
      type: 'select',
      label: '使用者狀態',
      placeholder: '請選擇使用者狀態',
      options: [
        {
          label: '禁用',
          value: 0
        },
        {
          label: '啟用',
          value: 1
        }
      ]
    },
    {
      type: 'datepicker',
      label: '建立時間',
      otherOptions: {
        startPlaceholder: '開始時間',
        endPlaceholder: '結束時間',
        type: 'daterange',
        'unlink-panels': true
      }
    }
  ],
  labelWidth: '120px',
  itemStyle: {
    padding: '10px 20px'
  },
  itemColLayout: {
    span: 8
  }
}
</script>
​
<style scoped lang="less">
.el-form-item {
  margin-top: 18px;
}
.el-select {
  width: 100%;
}
</style>

開始封裝②

這時它複用的錐形已經有了，我們可以將設定項抽出去，並給它一些型別限制，把這部分使用表單的程式碼抽出去，封裝成form元件，這樣之後我們在用的時候，直接用這個元件然後給它傳設定項就可以了

1.設定項型別限制檔案（不用ts的話就沒有，不想限制全部給any型別隨意，我這裡是為了讓程式碼嚴謹一丟丟哈哈）

type IFormType = 'input' | 'password' | 'select' | 'datepicker'
​
interface IFormOption {
  label: string
  value: string | number
}
​
export interface IFormItem {
  type: IFormType //輸入框型別
  label: string //輸入框標題
  placeholder?: any //輸入框預設顯示內容
  // 針對select
  options?: IFormOption[] //選擇器的可選子選項
  // 針對特殊屬性
  otherOptions?: any
​
}
​
export interface IForm {
  formItems: IFormItem[]
  labelWidth?: string
  itemStyle?: any
  itemColLayout?: any
}

2.設定項檔案

import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
  formItems: [
    {
      type: 'input',
      label: '使用者id',
      placeholder: '請輸入使用者id'
    },
    {
      type: 'input',
      label: '使用者名稱',
      placeholder: '請輸入使用者名稱'
    },
    {
      type: 'input',
      label: '真實姓名',
      placeholder: '請輸入真實姓名'
    },
    {
      type: 'input',
      label: '電話號碼',
      placeholder: '請輸入電話號碼'
    },
    {
      type: 'select',
      label: '使用者狀態',
      placeholder: '請選擇使用者狀態',
      options: [
        { label: '啟用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    },
    {
      type: 'datepicker',
      label: '建立時間',
      otherOptions: {
        startPlaceholder: '開始時間',
        endPlaceholder: '結束時間',
        type: 'daterange'
      }
    }
  ],
  labelWidth: '120px',
  itemColLayout: {
    span: 8
  },
  itemStyle: {
    padding: '10px 20px'
  }
}

3.form表單檔案

注意:在這裡，我將labelWidth，itemColLayout，itemStyle設定了預設值，所以我上面的那些樣式設定項可以不傳，預設就是我設定的那些值，如果需要別的樣式可以傳入修改，不要樣式可以傳個空進去，這裡我還加了兩個插槽，增加可延伸性

<template>
  <div class="header">
    <slot name="header"> </slot>
  </div>
  <el-form ref="ruleFormRef" :labelWidth="labelWidth">
    <el-row>
      <template v-for="item in formItems" :key="item.label">
        <el-col v-bind="itemColLayout">
          <el-form-item
            v-if="!item.isHidden"
            :label="item.label"
            :style="itemStyle"
            :prop="item.field"
          >
            <template v-if="item.type === 'input' || item.type === 'password'">
              <el-input
                :placeholder="item.placeholder"
                :show-password="item.type === 'password'"
              ></el-input>
            </template>
            <template v-else-if="item.type === 'select'">
              <el-select :placeholder="item.placeholder">
                <el-option
                  v-for="option in item.options"
                  :key="option.label"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </template>
            <template v-if="item.type === 'datepicker'">
              <el-date-picker v-bind="item.otherOptions"></el-date-picker>
            </template>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
  <div class="footer">
    <slot name="footer"></slot>
  </div>
</template>
​
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'
import { IFormItem } from './type'
interface Prop {
  formItems: IFormItem[] // 表單設定項
  labelWidth?: string // 每個表單標題寬度
  itemStyle?: object // 每個表單樣式
  itemColLayout?: object // 表單佈局
  isHidden?: boolean // 該輸入框是否隱藏
}
const props = withDefaults(defineProps<Prop>(), {
  labelWidth: '120px',
  itemColLayout: () => ({
    xl: 6, // >=1920px
    lg: 8, // >=1200px
    md: 12, // >=992px
    sm: 24, // >=768px
    xs: 24 // <768px
  }),
  itemStyle: () => ({
    padding: '10px 20px'
  })
})
</script>
​
<style scoped>
.el-form-item {
  margin-top: 18px;
}
.el-select {
  width: 100%;
}
</style>

4.role.vue頁面元件

<template>
  <div class="role">
    <form-test v-bind="searchFormConfig"></form-test>
  </div>
</template>
​
<script setup lang="ts">
import formTest from '@/base-ui/form/form-test.vue'
import { searchFormConfig } from './config/search-config-test'
</script>
​
<style scoped lang="less"></style>

這時已經初步封裝好了，我們可以使用一下看效果,我們可以看到樣式跟之前完全一樣，但是頁面的程式碼量就那麼點，要用的話直接用我們封裝好的form元件然後傳入設定項就出來了

它的可延伸性也是很強的，比如：

這裡我們把樣式設定項全部傳空值，然後設定項也傳一個，它又變成原來最醜的樣子了，證明我們是可以隨意更改它的樣式和佈局，只需要通過傳入設定項更改就可以了，方便

設定項檔案

import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
  formItems: [
    {
      field: 'id',
      type: 'input',
      label: '使用者id',
      placeholder: '請輸入使用者id'
    }
  ],
  labelWidth: '',
  itemColLayout: {},
  itemStyle: {}
}

其實到這裡還沒結束，因為這時的表單還輸入不了東西，因為我們根本就沒給它的輸入框繫結值，所以我們要在設定項傳入多一個field欄位，它可以作為輸入框繫結的值

開始封裝③

這裡僅僅是給設定項中增加field欄位（注意如果用了ts的還要去type檔案裡面給我們定義的IFormItem介面新增一個field欄位）

設定項檔案

import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
  formItems: [
    {
      field: 'id',
      type: 'input',
      label: '使用者id',
      placeholder: '請輸入使用者id'
    },
    {
      field: 'name',
      type: 'input',
      label: '使用者名稱',
      placeholder: '請輸入使用者名稱'
    },
    {
      field: 'realname',
      type: 'input',
      label: '真實姓名',
      placeholder: '請輸入真實姓名'
    },
    {
      field: 'cellphone',
      type: 'input',
      label: '電話號碼',
      placeholder: '請輸入電話號碼'
    },
    {
      field: 'enable',
      type: 'select',
      label: '使用者狀態',
      placeholder: '請選擇使用者狀態',
      options: [
        { label: '啟用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    },
    {
      field: 'createAt',
      type: 'datepicker',
      label: '建立時間',
      otherOptions: {
        startPlaceholder: '開始時間',
        endPlaceholder: '結束時間',
        type: 'daterange'
      }
    }
  ],
  labelWidth: '120px',
  itemColLayout: {
    span: 8
  },
  itemStyle: {
    padding: '10px 20px'
  }
}

因為傳入了fied欄位，所以我們要收集所有的field欄位，組成formData資料，傳入表單元件，formData裡面的每個子項分別作為每個輸入框繫結的值

注意：這裡有兩個難點

難點一：

我們傳進去的資料在裡面是要做修改傳出來的，而vue的原則是單項資料流傳輸，我們不能直接將資料傳進去（其實事實可以這樣做，但是違背了單向資料流傳輸原則，我們儘量不違背哈），所以我們採用v-model的方式將formData傳入form元件，這樣做的話就是雙向判定了，不算違背嘿嘿

難點二：因為我們傳進去的formData的資料，並不是在form元件裡面用的，而是要繫結到form元件裡面的element puls的輸入框裡面的，所以我們在form元件裡面接收到formData資料，然後在把formData它的各個子項v-model繫結到輸入框裡面，但是這樣會報錯，不能直接用v-model,這裡就需要知道v-model是怎麼實現的了，我們在這裡是直接把接收到的formData資料繫結到輸入框裡面的，在form元件並沒有定義formData這個變數，所以不能直接用v-model的方法，這了可能有點懵，舉個例子

（比如你將一個值test用v-model傳入一個input的框，你輸入框輸入資料，你的test是會同步改變，也就是說，v-model會把你修改後的值傳出來賦值給你的test，而在這裡，我們將formData用v-model繫結到輸入框，輸入框值改變，正常來說它會將修改後的值賦值給我們傳進去的formData，但是我們不能讓它直接賦值給我們的formData，因為我們的formData也是從別的元件傳進來的，所以我們要把修改後的值再次傳出去到傳進來formData資料的那個元件中，而不是直接就賦值，這時我們就要用到v-model的原始寫法了，其實v-model是個語法糖來的）

form.vue元件

<template>
  <div class="header">
    <slot name="header"> </slot>
  </div>
  <el-form ref="ruleFormRef" :labelWidth="labelWidth">
    <el-row>
      <template v-for="item in formItems" :key="item.label">
        <el-col v-bind="itemColLayout">
          <el-form-item
            v-if="!item.isHidden"
            :label="item.label"
            :style="itemStyle"
          >
            <template v-if="item.type === 'input' || item.type === 'password'">
              <el-input
                :placeholder="item.placeholder"
                :show-password="item.type === 'password'"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
              ></el-input>
            </template>
            <template v-else-if="item.type === 'select'">
              <el-select
                :placeholder="item.placeholder"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.label"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </template>
            <template v-if="item.type === 'datepicker'">
              <el-date-picker
                v-bind="item.otherOptions"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
              ></el-date-picker>
            </template>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
  <div class="footer">
    <slot name="footer"></slot>
  </div>
</template>
​
<script setup lang="ts">
import { defineProps, withDefaults, defineEmits } from 'vue'
import { IFormItem } from './type'
interface Prop {
  formItems: IFormItem[] // 表單設定項
  labelWidth?: string // 每個表單標題寬度
  itemStyle?: object // 每個表單樣式
  itemColLayout?: object // 表單佈局
  isHidden?: boolean // 該輸入框是否隱藏
  modelValue: object //繫結表單的每個資料
}
const props = withDefaults(defineProps<Prop>(), {
  labelWidth: '120px',
  itemColLayout: () => ({
    xl: 6, // >=1920px
    lg: 8, // >=1200px
    md: 12, // >=992px
    sm: 24, // >=768px
    xs: 24 // <768px
  }),
  itemStyle: () => ({
    padding: '10px 20px'
  })
})
const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
}>()
​
// 輸入框值改變該函數都會觸發，將改變後的值傳出去
const valueChange = (value: any, field: string) => {
  emit('update:modelValue', { ...props.modelValue, [field]: value })
}
</script>
​
<style scoped>
.el-form-item {
  margin-top: 18px;
}
.el-select {
  width: 100%;
}
</style>

role.vue頁面元件

<template>
  <div class="role">
    <form-test v-bind="searchFormConfig" v-model="formData"></form-test>
  </div>
</template>
​
<script setup lang="ts">
import formTest from '@/base-ui/form/form-test.vue'
import { searchFormConfig } from './config/search-config-test'
import { ref } from 'vue'
// 在這裡取出所有的field欄位組成formData資料
const formItems = searchFormConfig.formItems ?? []
​
let formDataInit = {}
formItems.map((item) => {
  formDataInit[item.field] = ''
})
let formData = ref(formDataInit)
</script>
​
<style scoped lang="less"></style>

這時我們發現它可以拿到資料了，很nice，其實這差不多已經算封裝好了，可以通過設定項修改裡面的東西了，同時也可以拿到資料，但是我這個專案不止於此，我這其實要做表單的查詢的，所以我要改裝一下變成這樣

其實就是加了兩個插槽和兩個方法，我這裡要實現功能就是點選重置按鈕，它會重置表單資料，點選搜尋按鈕就可以拿到表單資料，這樣我們就可以用我們拿到的表單資料去進行我們的操作拉，所以上程式碼

role.vue元件

該部分我們傳入了兩個template，一個是標題：高階檢索，一個是兩個按鈕

這裡要重置按鈕重置表單資料，取到表單的ref呼叫resetFields方法就好了，然後點選搜尋按鈕可以列印出formData資料，然後我們就可以利用該資料去做我們想要做的操作了，例如查詢列表資料等

<template>
  <div class="role">
    <form-test v-bind="searchFormConfig" v-model="formData" ref="formTestRef">
      <template #header>
        <div class="header">
          <h1>高階檢索</h1>
        </div>
      </template>
      <template #footer>
        <div class="footer">
          <el-button type="primary" :icon="Refresh" @click="resetBtnClick"
            >重置</el-button
          >
          <el-button type="primary" :icon="Search" @click="searchBtnClick"
            >搜尋</el-button
          >
        </div>
      </template>
    </form-test>
  </div>
</template>
​
<script setup lang="ts">
import formTest from '@/base-ui/form/form-test.vue'
import { searchFormConfig } from './config/search-config-test'
import { ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
// 在這裡取出所有的field欄位組成formData資料
const formItems = searchFormConfig.formItems ?? []
​
let formDataInit = {}
formItems.map((item) => {
  formDataInit[item.field] = ''
})
let formData = ref(formDataInit)
​
const formTestRef = ref<InstanceType<typeof formTest>>()
​
// 重置點選
const resetBtnClick = () => {
  formTestRef.value?.resetForm()
}
// 搜尋點選
const searchBtnClick = () => {
  // 這裡需要遍歷搜尋設定項，設定項裡可以傳dataType，要求資料返回什麼型別的資料
  let queryInfo = { ...formData.value }
  searchFormConfig.formItems.map((item: any) => {
    if (item.dataType === 'number' && queryInfo[item.field] !== '') {
      queryInfo[item.field] = Number(queryInfo[item.field])
    }
  })
  // 清空queryInfo中沒有值的屬性
  for (const i in queryInfo) {
    if (queryInfo[i] === '') {
      delete queryInfo[i]
    }
  }
  console.log(queryInfo)
}
</script>
​
<style scoped lang="less">
.header {
  padding-top: 20px;
}
.footer {
  text-align: right;
  padding: 0 50px 20px 0;
}
</style>

form.vue

<template>
  <div class="header">
    <slot name="header"> </slot>
  </div>
  <el-form ref="ruleFormRef" :labelWidth="labelWidth" :model="modelValue">
    <el-row>
      <template v-for="item in formItems" :key="item.label">
        <el-col v-bind="itemColLayout">
          <el-form-item
            v-if="!item.isHidden"
            :label="item.label"
            :style="itemStyle"
            :prop="item.field"
          >
            <template v-if="item.type === 'input' || item.type === 'password'">
              <el-input
                :placeholder="item.placeholder"
                :show-password="item.type === 'password'"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
              ></el-input>
            </template>
            <template v-else-if="item.type === 'select'">
              <el-select
                :placeholder="item.placeholder"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.label"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </template>
            <template v-if="item.type === 'datepicker'">
              <el-date-picker
                v-bind="item.otherOptions"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
              ></el-date-picker>
            </template>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
  <div class="footer">
    <slot name="footer"></slot>
  </div>
</template>
​
<script setup lang="ts">
import { defineProps, withDefaults, defineEmits, ref, defineExpose } from 'vue'
import { IFormItem } from './type'
import type { FormInstance } from 'element-plus'
​
interface Prop {
  formItems: IFormItem[] // 表單設定項
  labelWidth?: string // 每個表單標題寬度
  itemStyle?: object // 每個表單樣式
  itemColLayout?: object // 表單佈局
  isHidden?: boolean // 該輸入框是否隱藏
  modelValue: object //繫結表單的每個資料
}
const props = withDefaults(defineProps<Prop>(), {
  labelWidth: '120px',
  itemColLayout: () => ({
    xl: 6, // >=1920px
    lg: 8, // >=1200px
    md: 12, // >=992px
    sm: 24, // >=768px
    xs: 24 // <768px
  }),
  itemStyle: () => ({
    padding: '10px 20px'
  })
})
const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
}>()
const ruleFormRef = ref<FormInstance>()
​
// 輸入框值改變該函數都會觸發，將改變後的值傳出去
const valueChange = (value: any, field: string) => {
  emit('update:modelValue', { ...props.modelValue, [field]: value })
}
​
// 表單重置方法
const resetForm = () => {
  ruleFormRef.value?.resetFields()
}
defineExpose({
  resetForm
})
</script>
​
<style scoped>
.el-form-item {
  margin-top: 18px;
}
.el-select {
  width: 100%;
}
</style>

1.該元件要新增表單重置的方法

2.把formData的值繫結到form表單上：model=‘formData’

3.給el-form-item加上prop屬性

2，3如果不加上的話，表單內建的重置表單方法會失效

這時我們已經封裝完成了，但是我們可以發現，我們的role元件東西有點多了，如果我們其他元件比如，user元件等，都要用這樣類似的佈局，我們這時就又要把這一堆程式碼給cv一遍，所以我們有可以把role裡面這堆東西再封裝一次

開始封裝④

page-search.vue元件

<template>
  <Bu-form v-bind="searchFormConfig" v-model="formData" ref="BuFormRef">
    <template #header>
      <div class="header">
        <h1>高階檢索</h1>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <el-button type="primary" :icon="Refresh" @click="resetBtnClick"
          >重置</el-button
        >
        <el-button type="primary" :icon="Search" @click="searchBtnClick"
          >搜尋</el-button
        >
      </div>
    </template>
  </Bu-form>
</template>
​
<script setup lang="ts">
import { Search, Refresh } from '@element-plus/icons-vue'
import BuForm from '@/base-ui/form/form-test.vue'
import { defineProps, ref, defineEmits } from 'vue'
import { useStore } from '@/store'
interface Prop {
  searchFormConfig: any
}
const props = defineProps<Prop>()
const emit = defineEmits<{
  (e: 'resetBtnClick'): void
  (e: 'searchBtnClick', formData: object): void
}>()
const store = useStore()
const BuFormRef = ref<InstanceType<typeof BuForm>>()
​
const formItems = props.searchFormConfig?.formItems ?? []
​
let formDataInit = {}
formItems.map((item: any) => {
  formDataInit[item.field] = ''
})
let formData = ref(formDataInit)
​
// 重置點選
const resetBtnClick = () => {
  BuFormRef.value?.resetForm()
  emit('resetBtnClick')
}
// 搜尋點選
const searchBtnClick = () => {
  // 這裡需要遍歷搜尋設定項，設定項裡可以傳dataType，要求資料返回什麼型別的資料
  let queryInfo = { ...formData.value }
  props.searchFormConfig.formItems.map((item: any) => {
    if (item.dataType === 'number' && queryInfo[item.field] !== '') {
      queryInfo[item.field] = Number(queryInfo[item.field])
    }
  })
  // 清空queryInfo中沒有值的屬性
  for (const i in queryInfo) {
    if (queryInfo[i] === '') {
      delete queryInfo[i]
    }
  }
  emit('searchBtnClick', queryInfo)
}
</script>
​
<style scoped>
.header {
  padding-top: 20px;
}
.footer {
  text-align: right;
  padding: 0 50px 20px 0;
}
</style>

role.vue元件

<template>
  <div class="role">
    <page-search-test
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handlerReset"
      @searchBtnClick="handlerSearch"
    ></page-search-test>
  </div>
</template>
​
<script setup lang="ts">
import { searchFormConfig } from './config/search-config-test'
import pageSearchTest from '@/components/page-search/page-search-test.vue'
const handlerReset = () => {
  console.log('點選了重置按鈕')
}
const handlerSearch = (queryInfo: any) => {
  console.log('點選了搜尋按鈕，值為:', queryInfo)
}
</script>
​
<style scoped lang="less"></style>

效果圖

這裡我們就可以體會到了，一樣的效果，role裡面的程式碼是這麼的少，只需要傳入設定項就可以搞出這個表單，而且還能拿到表單資料，而且重點是，下個頁面再用這個佈局，直接用page-search元件就可以了，只需要傳入不同的設定項，如果不同佈局，再封裝另一個page-search就是了，但是這是後臺耶？搞那麼華麗呼哨？不就是搜尋表單，展示表單麼

下面附上完整全部封裝程式碼

完整封裝程式碼⑤

設定項型別檔案

// type.ts
​
type IFormType = 'input' | 'password' | 'select' | 'datepicker'
​
interface IFormOption {
  label: string
  value: string | number
}
​
export interface IFormItem {
  field: string //欄位名
  type: IFormType //輸入框型別
  dataType?: string //輸入框返回資料型別
  label: string //輸入框標題
  rules?: any[] //輸入框驗證規則
  placeholder?: any //輸入框預設顯示內容
  // 針對select
  options?: IFormOption[] //選擇器的可選子選項
  // 針對特殊屬性
  otherOptions?: any
  // 該行是否隱藏
  isHidden?: boolean
}
​
export interface IForm {
  formItems: IFormItem[]
  labelWidth?: string
  itemStyle?: any
  itemColLayout?: any
}

設定項檔案

import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
  formItems: [
    {
      field: 'id',
      type: 'input',
      label: '使用者id',
      placeholder: '請輸入使用者id'
    },
    {
      field: 'name',
      type: 'input',
      label: '使用者名稱',
      placeholder: '請輸入使用者名稱'
    },
    {
      field: 'realname',
      type: 'input',
      label: '真實姓名',
      placeholder: '請輸入真實姓名'
    },
    {
      field: 'cellphone',
      type: 'input',
      label: '電話號碼',
      placeholder: '請輸入電話號碼'
    },
    {
      field: 'enable',
      type: 'select',
      label: '使用者狀態',
      placeholder: '請選擇使用者狀態',
      options: [
        { label: '啟用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    },
    {
      field: 'createAt',
      type: 'datepicker',
      label: '建立時間',
      otherOptions: {
        startPlaceholder: '開始時間',
        endPlaceholder: '結束時間',
        type: 'daterange'
      }
    }
  ]
}

form表單元件檔案

<template>
  <div class="header">
    <slot name="header"> </slot>
  </div>
  <el-form
    :label-width="labelWidth"
    ref="ruleFormRef"
    status-icon
    :model="modelValue"
  >
    <el-row>
      <template v-for="item in formItems" :key="item.label">
        <el-col v-bind="itemColLayout">
          <el-form-item
            v-if="!item.isHidden"
            :label="item.label"
            :rules="item.rules"
            :style="itemStyle"
            :prop="item.field"
          >
            <template v-if="item.type === 'input' || item.type === 'password'">
              <el-input
                :placeholder="item.placeholder"
                :show-password="item.type === 'password'"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
                clearable
              />
            </template>
            <template v-else-if="item.type === 'select'">
              <el-select
                :placeholder="item.placeholder"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.value"
                  :value="option.value"
                  :label="option.label"
                >
                </el-option>
              </el-select>
            </template>
            <template v-else-if="item.type === 'datepicker'">
              <el-date-picker
                unlink-panels
                v-bind="item.otherOptions"
                :model-value="modelValue[`${item.field}`]"
                @update:modelValue="valueChange($event, item.field)"
              ></el-date-picker>
            </template>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
  <div class="footer">
    <slot name="footer"></slot>
  </div>
</template>
​
<script setup lang="ts">
import { IFormItem } from './type'
import { defineProps, withDefaults, ref, defineEmits, defineExpose } from 'vue'
import type { FormInstance } from 'element-plus'
​
// 定義屬性
interface Props {
  formItems: IFormItem[] // 表單設定項
  labelWidth?: string // 每個表單標題寬度
  itemStyle?: object // 每個表單樣式
  itemColLayout?: object // 表單佈局
  modelValue: object //繫結表單的每個資料
  isHidden?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  formItems: () => [],
  labelWidth: '120px',
  itemStyle: () => ({ padding: '10px 20px' }),
  itemColLayout: () => ({
    xl: 6, // >=1920px
    lg: 8, // >=1200px
    md: 12, // >=992px
    sm: 24, // >=768px
    xs: 24 // <768px
  })
})
const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
}>()
​
const ruleFormRef = ref<FormInstance>()
​
// 定義方法
const valueChange = (value: any, field: string) => {
  emit('update:modelValue', { ...props.modelValue, [field]: value })
}
​
// 表單重置方法
const resetForm = () => {
  ruleFormRef.value?.resetFields()
}
defineExpose({
  resetForm
})
</script>
​
<style scoped lang="less">
.el-form-item {
  margin-top: 18px;
}
</style>

page-search元件檔案

<template>
  <div class="page-search">
    <Bu-form v-bind="searchFormConfig" v-model="formData" ref="BuFormRef">
      <template #header>
        <div class="header">
          <h1>高階檢索</h1>
        </div>
      </template>
      <template #footer>
        <div class="footer">
          <el-button type="primary" :icon="Refresh" @click="resetClick"
            >重置</el-button
          >
          <el-button type="primary" :icon="Search" @click="searchClick"
            >搜尋</el-button
          >
        </div>
      </template>
    </Bu-form>
  </div>
</template>
​
<script setup lang="ts">
import { useStore } from '@/store'
import BuForm from '@/base-ui/form/form.vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ref, defineProps, defineEmits } from 'vue'
import { IForm } from '@/base-ui/form/type'
​
// 定義屬性
interface Props {
  searchFormConfig: IForm
}
const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'resetBtnClick'): void
  (e: 'searchBtnClick', formData: object): void
}>()
const store = useStore()
const BuFormRef = ref<InstanceType<typeof BuForm>>()
​
// 1.從接收到的搜尋設定中取出各個field,組成表單的資料formData
const formItems = props.searchFormConfig?.formItems ?? []
let formDataInit = {}
formItems.map((item) => {
  formDataInit[item.field] = ''
})
let formData = ref(formDataInit)
​
// 2.重置與搜尋功能
// 重置按鈕觸發
const resetClick = () => {
  BuFormRef.value?.resetForm()
  emit('resetBtnClick')
}
// 搜尋按鈕觸發
const searchClick = () => {
  // 這裡需要遍歷搜尋設定項，設定項裡可以傳dataType，要求資料返回什麼型別的資料
  let queryInfo = { ...formData.value }
  props.searchFormConfig.formItems.map((item) => {
    if (item.dataType === 'number' && queryInfo[item.field] !== '') {
      queryInfo[item.field] = Number(queryInfo[item.field])
    }
  })
  // 清空queryInfo中沒有值的屬性
  for (const i in queryInfo) {
    if (queryInfo[i] === '') {
      delete queryInfo[i]
    }
  }
  emit('searchBtnClick', queryInfo)
}
</script>
​
<style scoped>
.header {
  padding-top: 20px;
}
.footer {
  text-align: right;
  padding: 0 50px 20px 0;
}
</style>

role頁面元件檔案

<template>
  <div class="role">
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handlerReset"
      @searchBtnClick="handlerSearch"
    ></page-search>
  </div>
</template>
​
<script setup lang="ts">
import { searchFormConfig } from './config/search-config-test'
import pageSearch from '@/components/page-search/page-search.vue'
const handlerReset = () => {
  console.log('點選了重置按鈕')
}
const handlerSearch = (queryInfo: any) => {
  console.log('點選了搜尋按鈕，值為:', queryInfo)
}
</script>
​
<style scoped lang="less"></style>

結語

寫了這麼多，終於寫完了，這裡是屬於Form表單部分的封裝全部過程，能寫到這其實我挺有成就感的哈哈哈哈，因為我剛學會的時候思路有了，但是敲出來有點困難，不過這個過程是我又捋了一遍，然後自己敲出來的，感覺其實也不難，已經掌握了這種封裝思路與方法了哈哈，其他元件其實也可以利用這種思路，封裝出來，在頁面上的使用直接傳設定項呼叫就完事，開發每個相似的頁面效率簡直是牛逼

Table表格的封裝

簡述

再來折磨一遍，這裡是table表單的封裝，其實跟上面的差不多，有點小區別，會用到新增動態插槽，這裡就不墨跡了，直接上用設定項封裝前的正常使用

正常使用

user.vue

<template>
  <div class="user">
    <el-table style="width: 100%" :data="dataList" border>
      <!-- 1.傳入showSelectColumn時展示的全選列 -->
      <template v-if="contentTableConfig.showSelectColumn">
        <el-table-column type="selection" />
      </template>
      <!-- 2.傳入showIndexColumn時展示的序號列 -->
      <template v-if="contentTableConfig.showIndexColumn">
        <el-table-column type="index" label="序號" />
      </template>
      <!-- 3.propList裡面的所有列 -->
      <template v-for="item in contentTableConfig.propList" :key="item.prop">
        <el-table-column v-bind="item" show-overflow-tooltip>
          <!-- 傳有slotName時展示的插槽列 -->
          <template #default="scope" v-if="item.slotName">
            <template v-if="item.slotName === 'handler'">
              <el-button size="small" :icon="Edit" type="text">編輯</el-button>
              <el-button size="small" :icon="Delete" type="text"
                >刪除</el-button
              >
            </template>
            <template v-if="item.slotName === 'status'">
              <el-button>{{
                scope.row.status === 0 ? '禁用' : '啟用'
              }}</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
​
<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import { useStore } from '@/store'
import { computed } from 'vue'
const store = useStore()
// 這裡是網路請求資料
const getPageData = () => {
  store.dispatch(`main/getPageListAction`, {
    queryInfo: {
      offset: 0,
      size: 10
    },
    pageName: 'users'
  })
}
// 頁面載入時第一次呼叫獲取表單資料
getPageData()
const dataList = computed(() => store.getters[`main/pageListData`]('users'))
​
// 表格設定項
const contentTableConfig = {
  // 表格設定
  propList: [
    { prop: 'id', label: '使用者id', minWidth: '100', align: 'center' },
    { prop: 'name', label: '使用者名稱', minWidth: '100', align: 'center' },
    { prop: 'realname', label: '真實姓名', minWidth: '100', align: 'center' },
    { prop: 'cellphone', label: '手機號碼', minWidth: '100', align: 'center' },
    {
      prop: 'enable',
      label: '狀態',
      minWidth: '100',
      slotName: 'status',
      align: 'center'
    },
    {
      label: '操作',
      minWidth: '120',
      slotName: 'handler',
      align: 'center'
    }
  ],
  // 表格具有序號列
  showIndexColumn: true,
  // 表格具有可選列
  showSelectColumn: true
}
</script>
​
<style scoped lang="less"></style>

從上面可以看出，主頁面的程式碼有多冗餘，看到就頭疼+裂開，所以開始一層封裝

開始封裝①

設定項型別檔案

export interface ITbaleOption {
  prop?: string
  label: string
  minWidth?: string
  slotName?: string
}
export interface ITable {
  propList: ITbaleOption[]
  showIndexColumn?: boolean
  showSelectColumn?: boolean
  childrenProps?: object
}

設定項檔案

import { ITable } from '@/base-ui/table/type'
export const contentTableConfig: ITable = {
  // 表格設定
  propList: [
    { prop: 'id', label: '使用者id', minWidth: '100' },
    { prop: 'name', label: '使用者名稱', minWidth: '100' },
    { prop: 'realname', label: '真實姓名', minWidth: '100' },
    { prop: 'cellphone', label: '手機號碼', minWidth: '100' },
    { prop: 'enable', label: '狀態', minWidth: '100', slotName: 'status' },
    {
      label: '操作',
      minWidth: '120',
      slotName: 'handler'
    }
  ],
  // 表格具有序號列
  showIndexColumn: false,
  // 表格具有可選列
  showSelectColumn: true
}

table.vue檔案

<template>
  <el-table style="width: 100%" :data="listData" border>
    <!-- 1.傳入showSelectColumn時展示的全選列 -->
    <template v-if="showSelectColumn">
      <el-table-column type="selection" />
    </template>
    <!-- 2.傳入showIndexColumn時展示的序號列 -->
    <template v-if="showIndexColumn">
      <el-table-column type="index" label="序號" />
    </template>
    <!-- 3.propList裡面的所有列 -->
    <template v-for="item in propList" :key="item.prop">
      <el-table-column v-bind="item" show-overflow-tooltip>
        <!-- 傳有slotName時展示的插槽列 -->
        <template #default="scope" v-if="item.slotName">
          <template v-if="item.slotName === 'handler'">
            <el-button size="small" :icon="Edit" type="text">編輯</el-button>
            <el-button size="small" :icon="Delete" type="text">刪除</el-button>
          </template>
          <template v-if="item.slotName === 'status'">
            <el-button>{{
              scope.row.status === 0 ? '禁用' : '啟用'
            }}</el-button>
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
​
<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import { defineProps, withDefaults, defineEmits } from 'vue'
import { ITbaleOption } from './type'
interface Props {
  listData: any[] //表單資料
  propList: ITbaleOption[] //表單設定項
  showIndexColumn?: boolean //是否顯示索引列
  showSelectColumn?: boolean //是否顯示全選列
  childrenProps?: object // 是否有子資料，樹形資料才用得到
}
const props = withDefaults(defineProps<Props>(), {
  showIndexColumn: false,
  showSelectColumn: false,
  childrenProps: () => ({})
})
</script>
​
<style scoped></style>

user.vue

<template>
  <div class="user">
    <table-test v-bind="contentTableConfig" :listData="dataList"></table-test>
  </div>
</template>
​
<script setup lang="ts">
// 匯入表單設定項
import { contentTableConfig } from './config/table-config'
import tableTest from '@/base-ui/table/table-test.vue'
import { useStore } from '@/store'
import { computed } from 'vue'
const store = useStore()
​
// 這裡是網路請求資料
const getPageData = () => {
  store.dispatch(`main/getPageListAction`, {
    queryInfo: {
      offset: 0,
      size: 10
    },
    pageName: 'users'
  })
}
// 頁面載入時第一次呼叫獲取表單資料
getPageData()
const dataList = computed(() => store.getters[`main/pageListData`]('users'))
</script>
​
<style scoped lang="less"></style>

可以看到，程式碼抽出去了，但是我們可以發現，裡面的插槽其實不能給它寫死，應該是動態決定的，所以我們可以這樣做

在擁有slotName部分的插槽列部分放入一個具名插槽，再將預設插槽列中的scope.row發回給具名插槽

table.vue（為了可延伸性，我依舊在裡面加了兩個插槽，一個頂部一個底部）

<template>
  <div class="header">
    <slot name="header"> </slot>
  </div>
  <el-table style="width: 100%" :data="listData" border>
    <!-- 1.傳入showSelectColumn時展示的全選列 -->
    <template v-if="showSelectColumn">
      <el-table-column type="selection" />
    </template>
    <!-- 2.傳入showIndexColumn時展示的序號列 -->
    <template v-if="showIndexColumn">
      <el-table-column type="index" label="序號" />
    </template>
    <!-- 3.propList裡面的所有列 -->
    <template v-for="item in propList" :key="item.prop">
      <el-table-column v-bind="item" show-overflow-tooltip>
        <!-- 傳有slotName時展示的插槽列 -->
        <template #default="scope" v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <div class="footer">
    <slot name="footer"> </slot>
  </div>
</template>
​
<script setup lang="ts">
import { defineProps, withDefaults, defineEmits } from 'vue'
import { ITbaleOption } from './type'
interface Props {
  listData: any[] //表單資料
  propList: ITbaleOption[] //表單設定項
  showIndexColumn?: boolean //是否顯示索引列
  showSelectColumn?: boolean //是否顯示全選列
  childrenProps?: object // 是否有子資料，樹形資料才用得到
}
const props = withDefaults(defineProps<Props>(), {
  showIndexColumn: false,
  showSelectColumn: false,
  childrenProps: () => ({})
})
</script>
​
<style scoped></style>

然後在user.vue中放入具名插槽，傳進去table元件裡，同時傳入一些內容到可延伸插槽裡面

user.vue

<template>
  <div class="user">
    <div class="content">
      <table-test v-bind="contentTableConfig" :listData="dataList">
        <!-- 1.header中的插槽 -->
        <template #header>
          <div class="header-default">
            <!-- 傳入標題（位於左側） -->
            <div class="title">使用者列表</div>
            <!-- 傳入處理內容（位於右側） -->
            <div class="handler">
              <el-button type="primary" @click="addUserBtnClick"
                >新建使用者</el-button
              >
            </div>
          </div>
        </template>
        <!-- 2.該user頁面獨有部分 -->
        <template #status="scope">
          <el-button>{{ scope.row.status === 0 ? '禁用' : '啟用' }}</el-button>
        </template>
        <!-- 3.每個頁面都會有的部分 -->
        <template #handler="scope">
          <el-button
            size="small"
            :icon="Edit"
            type="text"
            @click="handleEditClick(scope.row)"
            >編輯</el-button
          >
          <el-button
            size="small"
            :icon="Delete"
            type="text"
            @click="deleteBtnClick(scope.row)"
            >刪除</el-button
          >
        </template>
        <!-- 4.footer插槽 -->
        <template #footer>
          <!-- 只有總條數>0才會有分頁器 -->
          <div class="footer-default">
            <el-pagination
              :page-sizes="[100, 200, 300, 400]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            />
          </div>
        </template>
      </table-test>
    </div>
  </div>
</template>
​
<script setup lang="ts">
// 匯入表單設定項
import { contentTableConfig } from './config/table-config'
import { Delete, Edit } from '@element-plus/icons-vue'
import tableTest from '@/base-ui/table/table-test.vue'
import { useStore } from '@/store'
import { computed } from 'vue'
const store = useStore()
​
// 這裡是網路請求資料
const getPageData = () => {
  store.dispatch(`main/getPageListAction`, {
    queryInfo: {
      offset: 0,
      size: 10
    },
    pageName: 'users'
  })
}
// 頁面載入時第一次呼叫獲取表單資料
getPageData()
const dataList = computed(() => store.getters[`main/pageListData`]('users'))
​
// 點選編輯按鈕觸發事件
const handleEditClick = (row: any) => {
  console.log('點選了編輯按鈕，資料為：', row)
}
// 點選刪除按鈕觸發事件
const deleteBtnClick = (row: any) => {
  console.log('點選了刪除按鈕，資料為：', row)
}
// 點選新建使用者觸發事件
const addUserBtnClick = () => {
  console.log('點選了新建使用者')
}
</script>
​
<style scoped lang="less">
.content {
  border-top: 20px solid #dedee1;
  padding: 40px;
}
.header-default {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .title {
    font-size: 22px;
    font-weight: 700;
  }
}
.footer-default {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>

顯然此時封裝已經滿足需求了，但是我們發現主頁面的內碼錶還是比較冗餘，如果不用到插槽的話還好，要用到插槽的話，就要在主頁面寫入很多插槽，多個頁面都這樣的話頁裂開，所以我們要像之前一樣把這坨程式碼再封一層

開始封裝②

page-table.vue

<template>
  <table-test v-bind="contentTableConfig" :listData="dataList">
    <!-- 1.header中的插槽 -->
    <template #header>
      <div class="header-default">
        <!-- 傳入標題（位於左側） -->
        <div class="title">{{ pageNameInChinese }}列表</div>
        <!-- 傳入處理內容（位於右側） -->
        <div class="handler">
          <el-button type="primary" @click="addUserBtnClick"
            >新建{{ pageNameInChinese }}</el-button
          >
        </div>
      </div>
    </template>
    <!-- 2.該user頁面獨有部分 -->
    <template #status="scope">
      <el-button>{{ scope.row.status === 0 ? '禁用' : '啟用' }}</el-button>
    </template>
    <!-- 3.每個頁面都會有的部分 -->
    <template #handler="scope">
      <el-button
        size="small"
        :icon="Edit"
        type="text"
        @click="handleEditClick(scope.row)"
        >編輯</el-button
      >
      <el-button
        size="small"
        :icon="Delete"
        type="text"
        @click="deleteBtnClick(scope.row)"
        >刪除</el-button
      >
    </template>
    <!-- 4.footer插槽 -->
    <template #footer>
      <!-- 只有總條數>0才會有分頁器 -->
      <div class="footer-default">
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        />
      </div>
    </template>
  </table-test>
</template>
​
<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import tableTest from '@/base-ui/table/table-test.vue'
import type { ITable } from '@/base-ui/table/type'
​
import { useStore } from '@/store'
import { defineProps, computed } from 'vue'
​
// 定義屬性
interface Props {
  contentTableConfig: ITable //表單設定接收
  pageName: string //表單名字接收
}
const props = defineProps<Props>()
​
const store = useStore()
​
// 這裡是網路請求資料
const getPageData = () => {
  store.dispatch(`main/getPageListAction`, {
    queryInfo: {
      offset: 0,
      size: 10
    },
    pageName: props.pageName
  })
}
// 頁面載入時第一次呼叫獲取表單資料
getPageData()
const dataList = computed(() =>
  store.getters[`main/pageListData`](props.pageName)
)
​
// 1.獲取頁面中文名稱
const pageNameTransform = (pageName: string): string => {
  switch (pageName) {
    case 'users':
      return '使用者'
    default:
      return ''
  }
}
const pageNameInChinese = pageNameTransform(props.pageName)
​
// 點選編輯按鈕觸發事件
const handleEditClick = (row: any) => {
  console.log('點選了編輯按鈕，資料為：', row)
}
// 點選刪除按鈕觸發事件
const deleteBtnClick = (row: any) => {
  console.log('點選了刪除按鈕，資料為：', row)
}
// 點選新建使用者觸發事件
const addUserBtnClick = () => {
  console.log('點選了新建使用者')
}
</script>
​
<style scoped lang="less">
.header-default {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .title {
    font-size: 22px;
    font-weight: 700;
  }
}
.footer-default {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>

user.vue

<template>
  <div class="user">
    <div class="content">
      <page-table
        :contentTableConfig="contentTableConfig"
        pageName="users"
      ></page-table>
    </div>
  </div>
</template>
​
<script setup lang="ts">
// 匯入表單設定項
import { contentTableConfig } from './config/table-config'
import pageTable from '@/components/page-table/page-table-test.vue'
</script>
​
<style scoped lang="less">
.content {
  border-top: 20px solid #dedee1;
  padding: 40px;
}
</style>

圖中可以看出效果其實是一樣的，主頁面的程式碼少了，只需要傳入設定項和pageName（控制網路請求資料）就可以生成一個表格，但是我們可以發現，如果多個頁面複用的話，其實操作列的插槽是公有的，但是狀態列卻是私有的，別的頁面不一定有狀態頁，所以狀態列內容插入的位置應該在主頁面user裡面而不該在封裝的元件裡面，而且編輯新建邏輯也是頁面獨有，應該在主頁面執行

開始封裝③

user.vue

<template>
  <div class="user">
    <div class="content">
      <page-table
        :contentTableConfig="contentTableConfig"
        pageName="users"
        @editBtnClick="handleEditClick"
        @createBtnClick="handleCreateClick"
      >
        <template #status="scope">
          <el-button>{{ scope.row.status === 0 ? '禁用' : '啟用' }}</el-button>
        </template>
      </page-table>
    </div>
  </div>
</template>
​
<script setup lang="ts">
// 匯入表單設定項
import { contentTableConfig } from './config/table-config'
import pageTable from '@/components/page-table/page-table-test.vue'
​
const handleEditClick = (row: any, pageNameInChinese: any) => {
  console.log('點選了編輯按鈕，資料為：', row, pageNameInChinese)
}
​
const handleCreateClick = (pageNameInChinese: any) => {
  console.log('點選了新建使用者，資料為：', pageNameInChinese)
}
</script>
​
<style scoped lang="less">
.content {
  border-top: 20px solid #dedee1;
  padding: 40px;
}
</style>

page-table.vue

<template>
  <table-test v-bind="contentTableConfig" :listData="dataList">
    <!-- 1.header中的插槽 -->
    <template #header>
      <div class="header-default">
        <!-- 傳入標題（位於左側） -->
        <div class="title">{{ pageNameInChinese }}列表</div>
        <!-- 傳入處理內容（位於右側） -->
        <div class="handler">
          <el-button type="primary" @click="addUserBtnClick"
            >新建{{ pageNameInChinese }}</el-button
          >
        </div>
      </div>
    </template>
    <!-- 2.該user頁面獨有部分 -->
    <template
      v-for="item in otherPropSlots"
      :key="item.prop"
      #[item.slotName]="scope"
    >
      <template v-if="item.slotName">
        <slot :name="item.slotName" :row="scope.row"></slot>
      </template>
    </template>
    <!-- 3.每個頁面都會有的部分 -->
    <template #handler="scope">
      <el-button
        size="small"
        :icon="Edit"
        type="text"
        @click="handleEditClick(scope.row)"
        >編輯</el-button
      >
      <el-button
        size="small"
        :icon="Delete"
        type="text"
        @click="deleteBtnClick(scope.row)"
        >刪除</el-button
      >
    </template>
    <!-- 4.footer插槽 -->
    <template #footer>
      <!-- 只有總條數>0才會有分頁器 -->
      <div class="footer-default">
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        />
      </div>
    </template>
  </table-test>
</template>
​
<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import tableTest from '@/base-ui/table/table-test.vue'
import type { ITable } from '@/base-ui/table/type'
​
import { useStore } from '@/store'
import { defineProps, computed, defineEmits } from 'vue'
​
// 定義屬性
interface Props {
  contentTableConfig: ITable //表單設定接收
  pageName: string //表單名字接收
}
const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'createBtnClick', pageNameInChinese: string): void
  (e: 'editBtnClick', rowData: any, pageNameInChinese: string): void
}>()
​
const store = useStore()
​
// 這裡是網路請求資料
const getPageData = () => {
  store.dispatch(`main/getPageListAction`, {
    queryInfo: {
      offset: 0,
      size: 10
    },
    pageName: props.pageName
  })
}
// 頁面載入時第一次呼叫獲取表單資料
getPageData()
const dataList = computed(() =>
  store.getters[`main/pageListData`](props.pageName)
)
​
// 1.獲取頁面中文名稱
const pageNameTransform = (pageName: string): string => {
  switch (pageName) {
    case 'users':
      return '使用者'
    default:
      return ''
  }
}
const pageNameInChinese = pageNameTransform(props.pageName)
​
// 2.屬於動態插槽的設定項篩選
const otherPropSlots: any = props.contentTableConfig?.propList.filter(
  (item: any) => {
    if (item.slotName === 'handler') return false
    return item.slotName
  }
)
​
// 點選編輯按鈕觸發事件
const handleEditClick = (row: any) => {
  emit('editBtnClick', row, pageNameInChinese)
}
// 點選刪除按鈕觸發事件
const deleteBtnClick = (row: any) => {
  console.log('點選了刪除按鈕，資料為：', row)
}
// 點選新建使用者觸發事件
const addUserBtnClick = () => {
  emit('createBtnClick', pageNameInChinese)
}
</script>
​
<style scoped lang="less">
.header-default {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .title {
    font-size: 22px;
    font-weight: 700;
  }
}
.footer-default {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>

可以看到，這時我們已經把獨有私有的插槽區分開了，而且編輯和新建的邏輯也在主頁面中執行，封裝完畢，下面附上完整程式碼

完整封裝程式碼④

設定項型別檔案

export interface ITbaleOption {
  prop?: string
  label: string
  minWidth?: string
  slotName?: string
  align?: string
}
export interface ITable {
  propList: ITbaleOption[]
  showIndexColumn?: boolean
  showSelectColumn?: boolean
  childrenProps?: object
}

設定項檔案

import { ITable } from '@/base-ui/table/type'
export const contentTableConfig: ITable = {
  // 表格設定
  propList: [
    { prop: 'id', label: '使用者id', minWidth: '100', align: 'center' },
    { prop: 'name', label: '使用者名稱', minWidth: '100', align: 'center' },
    { prop: 'realname', label: '真實姓名', minWidth: '100', align: 'center' },
    { prop: 'cellphone', label: '手機號碼', minWidth: '100', align: 'center' },
    {
      prop: 'enable',
      label: '狀態',
      minWidth: '100',
      slotName: 'status',
      align: 'center'
    },
    {
      label: '操作',
      minWidth: '120',
      slotName: 'handler',
      align: 'center'
    }
  ],
  // 表格具有序號列
  showIndexColumn: false,
  // 表格具有可選列
  showSelectColumn: true
}

table表單元件檔案

<template>
  <div class="header">
    <slot name="header"> </slot>
  </div>
  <el-table style="width: 100%" :data="listData" border>
    <!-- 1.傳入showSelectColumn時展示的全選列 -->
    <template v-if="showSelectColumn">
      <el-table-column type="selection" />
    </template>
    <!-- 2.傳入showIndexColumn時展示的序號列 -->
    <template v-if="showIndexColumn">
      <el-table-column type="index" label="序號" />
    </template>
    <!-- 3.propList裡面的所有列 -->
    <template v-for="item in propList" :key="item.prop">
      <el-table-column v-bind="item" show-overflow-tooltip>
        <!-- 傳有slotName時展示的插槽列 -->
        <template #default="scope" v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <div class="footer">
    <slot name="footer"> </slot>
  </div>
</template>
​
<script setup lang="ts">
import { defineProps, withDefaults, defineEmits } from 'vue'
import { ITbaleOption } from './type'
interface Props {
  listData: any[] //表單資料
  propList: ITbaleOption[] //表單設定項
  showIndexColumn?: boolean //是否顯示索引列
  showSelectColumn?: boolean //是否顯示全選列
  childrenProps?: object // 是否有子資料，樹形資料才用得到
}
const props = withDefaults(defineProps<Props>(), {
  showIndexColumn: false,
  showSelectColumn: false,
  childrenProps: () => ({})
})
</script>
​
<style scoped></style>

page-table元件檔案

user頁面元件檔案

<template>
  <div class="user">
    <div class="content">
      <page-table
        :contentTableConfig="contentTableConfig"
        pageName="users"
        @editBtnClick="handleEditClick"
        @createBtnClick="handleCreateClick"
      >
        <template #status="scope">
          <el-button>{{ scope.row.status === 0 ? '禁用' : '啟用' }}</el-button>
        </template>
      </page-table>
    </div>
  </div>
</template>
​
<script setup lang="ts">
// 匯入表單設定項
import { contentTableConfig } from './config/table-config'
import pageTable from '@/components/page-table/page-table-test.vue'
​
const handleEditClick = (row: any, pageNameInChinese: any) => {
  console.log('點選了編輯按鈕，資料為：', row, pageNameInChinese)
}
​
const handleCreateClick = (pageNameInChinese: any) => {
  console.log('點選了新建使用者，資料為：', pageNameInChinese)
}
</script>
​
<style scoped lang="less">
.content {
  border-top: 20px solid #dedee1;
  padding: 40px;
}
</style>

結語

剛學會的程式碼思路與寫法，花了一天整理，主要還是自己記錄一下，頗有收穫，感覺大佬分享使我進步~雖然還是很菜....

到此這篇關於Element Plus元件Form表單Table表格二次封裝的文章就介紹到這了,更多相關Element Plus元件Table表格二次封裝內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com