Element?Plus組件Form表單Table表格二次封裝的完整過(guò)程
更新時(shí)間：2022年09月05日 10:28:24 作者：呆頭鴨
一般在后臺(tái)管理系統(tǒng)的開(kāi)發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下
前言
直至今天，看了一下別人寫(xiě)的代碼，才發(fā)現(xiàn)以前自己寫(xiě)的代碼太垃圾，所以在這次做的一個(gè)后臺(tái)項(xiàng)目中，采用他的代碼風(fēng)格，怎么說(shuō)呢，復(fù)用性特別好，封裝的很好，學(xué)到很多，所以記錄一下思路，我認(rèn)為這個(gè)封裝思路是真的很棒，寫(xiě)第一個(gè)頁(yè)面的時(shí)候可能會(huì)麻煩一些，但是后面只要是相似的頁(yè)面，事半功倍，直接CV改配置項(xiàng)就好了，是真的頂，記錄一下，學(xué)習(xí)一下，我這里用的是vue3+ts
Form表單的封裝
簡(jiǎn)述
這里是Form表單部分，下面是完整的思路，最后有附上完整的代碼，大佬可以直接看完整的代碼就能看懂了，小白們跟著我的思路估計(jì)能看懂....
正常的使用
如果我們正常使用組件庫(kù)里面的組件會(huì)是這樣的
代碼如下
role.vue頁(yè)面組件
<template>
<div class="role">
<el-form>
<el-form-item label="用戶(hù)id">
<el-input placeholder="請(qǐng)輸入用戶(hù)id"></el-input>
</el-form-item>
<el-form-item label="用戶(hù)名">
<el-input placeholder="請(qǐng)輸入用戶(hù)名"></el-input>
</el-form-item>
<el-form-item label="真實(shí)姓名">
<el-input placeholder="請(qǐng)輸入真實(shí)姓名"></el-input>
</el-form-item>
<el-form-item label="用戶(hù)名">
<el-input placeholder="請(qǐng)輸入用戶(hù)名"></el-input>
</el-form-item>
<el-form-item label="電話號(hào)碼">
<el-input placeholder="請(qǐng)輸入電話號(hào)碼"></el-input>
</el-form-item>
<el-form-item label="用戶(hù)狀態(tài)">
<el-select placeholder="請(qǐng)選擇用戶(hù)狀態(tài)">
<el-option label="禁用" value="0"></el-option>
<el-option label="啟用" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="創(chuàng)建時(shí)間">
<el-date-picker
startPlaceholder="開(kāi)始時(shí)間"
endPlaceholder="結(jié)束時(shí)間"
type="daterange"
></el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
?
<script setup lang="ts"></script>
?
<style scoped lang="less"></style>這時(shí)我們可以加點(diǎn)樣式讓他變得好看，并且布局也變一變就可以變成這樣,當(dāng)然樣式布局可以自定義
代碼如下
role.vue頁(yè)面組件
<template>
<div class="role">
<el-form labelWidth="120px">
<el-row>
<el-col :span="8">
<el-form-item
label="用戶(hù)id"
:style="{
padding: '10px 20px'
}"
>
<el-input placeholder="請(qǐng)輸入用戶(hù)id"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="用戶(hù)名"
:style="{
padding: '10px 20px'
}"
>
<el-input placeholder="請(qǐng)輸入用戶(hù)名"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="真實(shí)姓名"
:style="{
padding: '10px 20px'
}"
>
<el-input placeholder="請(qǐng)輸入真實(shí)姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="電話號(hào)碼"
:style="{
padding: '10px 20px'
}"
>
<el-input placeholder="請(qǐng)輸入電話號(hào)碼"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="用戶(hù)狀態(tài)"
:style="{
padding: '10px 20px'
}"
>
<el-select placeholder="請(qǐng)選擇用戶(hù)狀態(tài)">
<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="創(chuàng)建時(shí)間"
:style="{
padding: '10px 20px'
}"
>
<el-date-picker
startPlaceholder="開(kāi)始時(shí)間"
endPlaceholder="結(jié)束時(shí)間"
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>開(kāi)始封裝①
這時(shí)我們就可以開(kāi)始封裝了，如果我們可以通過(guò)傳配置項(xiàng)的方法來(lái)控制樣式和form表單項(xiàng)的類(lèi)型和個(gè)數(shù)的話，是不是變得很方便，下次直接傳配置項(xiàng)用就好了？話不多說(shuō)直接上圖上代碼
可以看到效果一樣，代碼卻簡(jiǎn)潔了，模板里面不會(huì)出現(xiàn)大量重復(fù)的代碼了
role.vue頁(yè)面組件
<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">
// 定義表單配置項(xiàng)
const searchFormConfig = {
formItems: [
{
type: 'input',
label: '用戶(hù)id',
placeholder: '請(qǐng)輸入用戶(hù)id'
},
{
type: 'input',
label: '用戶(hù)名',
placeholder: '請(qǐng)輸入用戶(hù)名'
},
{
type: 'input',
label: '真實(shí)姓名',
placeholder: '請(qǐng)輸入真實(shí)姓名'
},
{
type: 'input',
label: '電話號(hào)碼',
placeholder: '請(qǐng)輸入電話號(hào)碼'
},
{
type: 'select',
label: '用戶(hù)狀態(tài)',
placeholder: '請(qǐng)選擇用戶(hù)狀態(tài)',
options: [
{
label: '禁用',
value: 0
},
{
label: '啟用',
value: 1
}
]
},
{
type: 'datepicker',
label: '創(chuàng)建時(shí)間',
otherOptions: {
startPlaceholder: '開(kāi)始時(shí)間',
endPlaceholder: '結(jié)束時(shí)間',
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>開(kāi)始封裝②
這時(shí)它復(fù)用的錐形已經(jīng)有了，我們可以將配置項(xiàng)抽出去，并給它一些類(lèi)型限制，把這部分使用表單的代碼抽出去，封裝成form組件，這樣之后我們?cè)谟玫臅r(shí)候，直接用這個(gè)組件然后給它傳配置項(xiàng)就可以了
1.配置項(xiàng)類(lèi)型限制文件（不用ts的話就沒(méi)有，不想限制全部給any類(lèi)型隨意，我這里是為了讓代碼嚴(yán)謹(jǐn)一丟丟哈哈）
type IFormType = 'input' | 'password' | 'select' | 'datepicker'
?
interface IFormOption {
label: string
value: string | number
}
?
export interface IFormItem {
type: IFormType //輸入框類(lèi)型
label: string //輸入框標(biāo)題
placeholder?: any //輸入框默認(rèn)顯示內(nèi)容
// 針對(duì)select
options?: IFormOption[] //選擇器的可選子選項(xiàng)
// 針對(duì)特殊屬性
otherOptions?: any
?
}
?
export interface IForm {
formItems: IFormItem[]
labelWidth?: string
itemStyle?: any
itemColLayout?: any
}2.配置項(xiàng)文件
import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
formItems: [
{
type: 'input',
label: '用戶(hù)id',
placeholder: '請(qǐng)輸入用戶(hù)id'
},
{
type: 'input',
label: '用戶(hù)名',
placeholder: '請(qǐng)輸入用戶(hù)名'
},
{
type: 'input',
label: '真實(shí)姓名',
placeholder: '請(qǐng)輸入真實(shí)姓名'
},
{
type: 'input',
label: '電話號(hào)碼',
placeholder: '請(qǐng)輸入電話號(hào)碼'
},
{
type: 'select',
label: '用戶(hù)狀態(tài)',
placeholder: '請(qǐng)選擇用戶(hù)狀態(tài)',
options: [
{ label: '啟用', value: 1 },
{ label: '禁用', value: 0 }
]
},
{
type: 'datepicker',
label: '創(chuàng)建時(shí)間',
otherOptions: {
startPlaceholder: '開(kāi)始時(shí)間',
endPlaceholder: '結(jié)束時(shí)間',
type: 'daterange'
}
}
],
labelWidth: '120px',
itemColLayout: {
span: 8
},
itemStyle: {
padding: '10px 20px'
}
}3.form表單文件
注意:在這里，我將labelWidth，itemColLayout，itemStyle設(shè)置了默認(rèn)值，所以我上面的那些樣式配置項(xiàng)可以不傳，默認(rèn)就是我設(shè)置的那些值，如果需要?jiǎng)e的樣式可以傳入修改，不要樣式可以傳個(gè)空進(jìn)去，這里我還加了兩個(gè)插槽，增加可擴(kuò)展性
<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[] // 表單配置項(xiàng)
labelWidth?: string // 每個(gè)表單標(biāo)題寬度
itemStyle?: object // 每個(gè)表單樣式
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頁(yè)面組件
<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>這時(shí)已經(jīng)初步封裝好了，我們可以使用一下看效果,我們可以看到樣式跟之前完全一樣，但是頁(yè)面的代碼量就那么點(diǎn)，要用的話直接用我們封裝好的form組件然后傳入配置項(xiàng)就出來(lái)了
它的可擴(kuò)展性也是很強(qiáng)的，比如：
這里我們把樣式配置項(xiàng)全部傳空值，然后配置項(xiàng)也傳一個(gè)，它又變成原來(lái)最丑的樣子了，證明我們是可以隨意更改它的樣式和布局，只需要通過(guò)傳入配置項(xiàng)更改就可以了，方便
配置項(xiàng)文件
import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
formItems: [
{
field: 'id',
type: 'input',
label: '用戶(hù)id',
placeholder: '請(qǐng)輸入用戶(hù)id'
}
],
labelWidth: '',
itemColLayout: {},
itemStyle: {}
}
其實(shí)到這里還沒(méi)結(jié)束，因?yàn)檫@時(shí)的表單還輸入不了東西，因?yàn)槲覀兏揪蜎](méi)給它的輸入框綁定值，所以我們要在配置項(xiàng)傳入多一個(gè)field字段，它可以作為輸入框綁定的值
開(kāi)始封裝③
這里僅僅是給配置項(xiàng)中增加field字段（注意如果用了ts的還要去type文件里面給我們定義的IFormItem接口添加一個(gè)field字段）
配置項(xiàng)文件
import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
formItems: [
{
field: 'id',
type: 'input',
label: '用戶(hù)id',
placeholder: '請(qǐng)輸入用戶(hù)id'
},
{
field: 'name',
type: 'input',
label: '用戶(hù)名',
placeholder: '請(qǐng)輸入用戶(hù)名'
},
{
field: 'realname',
type: 'input',
label: '真實(shí)姓名',
placeholder: '請(qǐng)輸入真實(shí)姓名'
},
{
field: 'cellphone',
type: 'input',
label: '電話號(hào)碼',
placeholder: '請(qǐng)輸入電話號(hào)碼'
},
{
field: 'enable',
type: 'select',
label: '用戶(hù)狀態(tài)',
placeholder: '請(qǐng)選擇用戶(hù)狀態(tài)',
options: [
{ label: '啟用', value: 1 },
{ label: '禁用', value: 0 }
]
},
{
field: 'createAt',
type: 'datepicker',
label: '創(chuàng)建時(shí)間',
otherOptions: {
startPlaceholder: '開(kāi)始時(shí)間',
endPlaceholder: '結(jié)束時(shí)間',
type: 'daterange'
}
}
],
labelWidth: '120px',
itemColLayout: {
span: 8
},
itemStyle: {
padding: '10px 20px'
}
}因?yàn)閭魅肓薴ied字段，所以我們要收集所有的field字段，組成formData數(shù)據(jù)，傳入表單組件，formData里面的每個(gè)子項(xiàng)分別作為每個(gè)輸入框綁定的值
注意：這里有兩個(gè)難點(diǎn)
難點(diǎn)一：
我們傳進(jìn)去的數(shù)據(jù)在里面是要做修改傳出來(lái)的，而vue的原則是單項(xiàng)數(shù)據(jù)流傳輸，我們不能直接將數(shù)據(jù)傳進(jìn)去（其實(shí)事實(shí)可以這樣做，但是違背了單向數(shù)據(jù)流傳輸原則，我們盡量不違背哈），所以我們采用v-model的方式將formData傳入form組件，這樣做的話就是雙向判定了，不算違背嘿嘿
難點(diǎn)二：因?yàn)槲覀儌鬟M(jìn)去的formData的數(shù)據(jù)，并不是在form組件里面用的，而是要綁定到form組件里面的element puls的輸入框里面的，所以我們?cè)趂orm組件里面接收到formData數(shù)據(jù)，然后在把formData它的各個(gè)子項(xiàng)v-model綁定到輸入框里面，但是這樣會(huì)報(bào)錯(cuò)，不能直接用v-model,這里就需要知道v-model是怎么實(shí)現(xiàn)的了，我們?cè)谶@里是直接把接收到的formData數(shù)據(jù)綁定到輸入框里面的，在form組件并沒(méi)有定義formData這個(gè)變量，所以不能直接用v-model的方法，這了可能有點(diǎn)懵，舉個(gè)例子
（比如你將一個(gè)值test用v-model傳入一個(gè)input的框，你輸入框輸入數(shù)據(jù)，你的test是會(huì)同步改變，也就是說(shuō)，v-model會(huì)把你修改后的值傳出來(lái)賦值給你的test，而在這里，我們將formData用v-model綁定到輸入框，輸入框值改變，正常來(lái)說(shuō)它會(huì)將修改后的值賦值給我們傳進(jìn)去的formData，但是我們不能讓它直接賦值給我們的formData，因?yàn)槲覀兊膄ormData也是從別的組件傳進(jìn)來(lái)的，所以我們要把修改后的值再次傳出去到傳進(jìn)來(lái)formData數(shù)據(jù)的那個(gè)組件中，而不是直接就賦值，這時(shí)我們就要用到v-model的原始寫(xiě)法了，其實(shí)v-model是個(gè)語(yǔ)法糖來(lái)的）
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[] // 表單配置項(xiàng)
labelWidth?: string // 每個(gè)表單標(biāo)題寬度
itemStyle?: object // 每個(gè)表單樣式
itemColLayout?: object // 表單布局
isHidden?: boolean // 該輸入框是否隱藏
modelValue: object //綁定表單的每個(gè)數(shù)據(jù)
}
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
}>()
?
// 輸入框值改變?cè)摵瘮?shù)都會(huì)觸發(fā)，將改變后的值傳出去
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頁(yè)面組件
<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數(shù)據(jù)
const formItems = searchFormConfig.formItems ?? []
?
let formDataInit = {}
formItems.map((item) => {
formDataInit[item.field] = ''
})
let formData = ref(formDataInit)
</script>
?
<style scoped lang="less"></style>
這時(shí)我們發(fā)現(xiàn)它可以拿到數(shù)據(jù)了，很nice，其實(shí)這差不多已經(jīng)算封裝好了，可以通過(guò)配置項(xiàng)修改里面的東西了，同時(shí)也可以拿到數(shù)據(jù)，但是我這個(gè)項(xiàng)目不止于此，我這其實(shí)要做表單的查詢(xún)的，所以我要改裝一下變成這樣
其實(shí)就是加了兩個(gè)插槽和兩個(gè)方法，我這里要實(shí)現(xiàn)功能就是點(diǎn)擊重置按鈕，它會(huì)重置表單數(shù)據(jù)，點(diǎn)擊搜索按鈕就可以拿到表單數(shù)據(jù)，這樣我們就可以用我們拿到的表單數(shù)據(jù)去進(jìn)行我們的操作拉，所以上代碼
role.vue組件
該部分我們傳入了兩個(gè)template，一個(gè)是標(biāo)題：高級(jí)檢索，一個(gè)是兩個(gè)按鈕
這里要重置按鈕重置表單數(shù)據(jù)，取到表單的ref調(diào)用resetFields方法就好了，然后點(diǎn)擊搜索按鈕可以打印出formData數(shù)據(jù)，然后我們就可以利用該數(shù)據(jù)去做我們想要做的操作了，例如查詢(xún)列表數(shù)據(jù)等
<template>
<div class="role">
<form-test v-bind="searchFormConfig" v-model="formData" ref="formTestRef">
<template #header>
<div class="header">
<h1>高級(jí)檢索</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數(shù)據(jù)
const formItems = searchFormConfig.formItems ?? []
?
let formDataInit = {}
formItems.map((item) => {
formDataInit[item.field] = ''
})
let formData = ref(formDataInit)
?
const formTestRef = ref<InstanceType<typeof formTest>>()
?
// 重置點(diǎn)擊
const resetBtnClick = () => {
formTestRef.value?.resetForm()
}
// 搜索點(diǎn)擊
const searchBtnClick = () => {
// 這里需要遍歷搜索配置項(xiàng)，配置項(xiàng)里可以傳dataType，要求數(shù)據(jù)返回什么類(lèi)型的數(shù)據(jù)
let queryInfo = { ...formData.value }
searchFormConfig.formItems.map((item: any) => {
if (item.dataType === 'number' && queryInfo[item.field] !== '') {
queryInfo[item.field] = Number(queryInfo[item.field])
}
})
// 清空queryInfo中沒(méi)有值的屬性
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[] // 表單配置項(xiàng)
labelWidth?: string // 每個(gè)表單標(biāo)題寬度
itemStyle?: object // 每個(gè)表單樣式
itemColLayout?: object // 表單布局
isHidden?: boolean // 該輸入框是否隱藏
modelValue: object //綁定表單的每個(gè)數(shù)據(jù)
}
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>()
?
// 輸入框值改變?cè)摵瘮?shù)都會(huì)觸發(fā)，將改變后的值傳出去
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如果不加上的話，表單內(nèi)置的重置表單方法會(huì)失效
這時(shí)我們已經(jīng)封裝完成了，但是我們可以發(fā)現(xiàn)，我們的role組件東西有點(diǎn)多了，如果我們其他組件比如，user組件等，都要用這樣類(lèi)似的布局，我們這時(shí)就又要把這一堆代碼給cv一遍，所以我們有可以把role里面這堆東西再封裝一次
開(kāi)始封裝④
page-search.vue組件
<template>
<Bu-form v-bind="searchFormConfig" v-model="formData" ref="BuFormRef">
<template #header>
<div class="header">
<h1>高級(jí)檢索</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)
?
// 重置點(diǎn)擊
const resetBtnClick = () => {
BuFormRef.value?.resetForm()
emit('resetBtnClick')
}
// 搜索點(diǎn)擊
const searchBtnClick = () => {
// 這里需要遍歷搜索配置項(xiàng)，配置項(xiàng)里可以傳dataType，要求數(shù)據(jù)返回什么類(lèi)型的數(shù)據(jù)
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中沒(méi)有值的屬性
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('點(diǎn)擊了重置按鈕')
}
const handlerSearch = (queryInfo: any) => {
console.log('點(diǎn)擊了搜索按鈕，值為:', queryInfo)
}
</script>
?
<style scoped lang="less"></style>效果圖
這里我們就可以體會(huì)到了，一樣的效果，role里面的代碼是這么的少，只需要傳入配置項(xiàng)就可以搞出這個(gè)表單，而且還能拿到表單數(shù)據(jù)，而且重點(diǎn)是，下個(gè)頁(yè)面再用這個(gè)布局，直接用page-search組件就可以了，只需要傳入不同的配置項(xiàng)，如果不同布局，再封裝另一個(gè)page-search就是了，但是這是后臺(tái)耶？搞那么華麗呼哨？不就是搜索表單，展示表單么
下面附上完整全部封裝代碼
完整封裝代碼⑤
配置項(xiàng)類(lèi)型文件
// type.ts
?
type IFormType = 'input' | 'password' | 'select' | 'datepicker'
?
interface IFormOption {
label: string
value: string | number
}
?
export interface IFormItem {
field: string //字段名
type: IFormType //輸入框類(lèi)型
dataType?: string //輸入框返回?cái)?shù)據(jù)類(lèi)型
label: string //輸入框標(biāo)題
rules?: any[] //輸入框驗(yàn)證規(guī)則
placeholder?: any //輸入框默認(rèn)顯示內(nèi)容
// 針對(duì)select
options?: IFormOption[] //選擇器的可選子選項(xiàng)
// 針對(duì)特殊屬性
otherOptions?: any
// 該行是否隱藏
isHidden?: boolean
}
?
export interface IForm {
formItems: IFormItem[]
labelWidth?: string
itemStyle?: any
itemColLayout?: any
}配置項(xiàng)文件
import { IForm } from '@/base-ui/form/type'
export const searchFormConfig: IForm = {
formItems: [
{
field: 'id',
type: 'input',
label: '用戶(hù)id',
placeholder: '請(qǐng)輸入用戶(hù)id'
},
{
field: 'name',
type: 'input',
label: '用戶(hù)名',
placeholder: '請(qǐng)輸入用戶(hù)名'
},
{
field: 'realname',
type: 'input',
label: '真實(shí)姓名',
placeholder: '請(qǐng)輸入真實(shí)姓名'
},
{
field: 'cellphone',
type: 'input',
label: '電話號(hào)碼',
placeholder: '請(qǐng)輸入電話號(hào)碼'
},
{
field: 'enable',
type: 'select',
label: '用戶(hù)狀態(tài)',
placeholder: '請(qǐng)選擇用戶(hù)狀態(tài)',
options: [
{ label: '啟用', value: 1 },
{ label: '禁用', value: 0 }
]
},
{
field: 'createAt',
type: 'datepicker',
label: '創(chuàng)建時(shí)間',
otherOptions: {
startPlaceholder: '開(kāi)始時(shí)間',
endPlaceholder: '結(jié)束時(shí)間',
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[] // 表單配置項(xiàng)
labelWidth?: string // 每個(gè)表單標(biāo)題寬度
itemStyle?: object // 每個(gè)表單樣式
itemColLayout?: object // 表單布局
modelValue: object //綁定表單的每個(gè)數(shù)據(jù)
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>高級(jí)檢索</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.從接收到的搜索配置中取出各個(gè)field,組成表單的數(shù)據(jù)formData
const formItems = props.searchFormConfig?.formItems ?? []
let formDataInit = {}
formItems.map((item) => {
formDataInit[item.field] = ''
})
let formData = ref(formDataInit)
?
// 2.重置與搜索功能
// 重置按鈕觸發(fā)
const resetClick = () => {
BuFormRef.value?.resetForm()
emit('resetBtnClick')
}
// 搜索按鈕觸發(fā)
const searchClick = () => {
// 這里需要遍歷搜索配置項(xiàng)，配置項(xiàng)里可以傳dataType，要求數(shù)據(jù)返回什么類(lèi)型的數(shù)據(jù)
let queryInfo = { ...formData.value }
props.searchFormConfig.formItems.map((item) => {
if (item.dataType === 'number' && queryInfo[item.field] !== '') {
queryInfo[item.field] = Number(queryInfo[item.field])
}
})
// 清空queryInfo中沒(méi)有值的屬性
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頁(yè)面組件文件
<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('點(diǎn)擊了重置按鈕')
}
const handlerSearch = (queryInfo: any) => {
console.log('點(diǎn)擊了搜索按鈕，值為:', queryInfo)
}
</script>
?
<style scoped lang="less"></style>結(jié)語(yǔ)
寫(xiě)了這么多，終于寫(xiě)完了，這里是屬于Form表單部分的封裝全部過(guò)程，能寫(xiě)到這其實(shí)我挺有成就感的哈哈哈哈，因?yàn)槲覄倢W(xué)會(huì)的時(shí)候思路有了，但是敲出來(lái)有點(diǎn)困難，不過(guò)這個(gè)過(guò)程是我又捋了一遍，然后自己敲出來(lái)的，感覺(jué)其實(shí)也不難，已經(jīng)掌握了這種封裝思路與方法了哈哈，其他組件其實(shí)也可以利用這種思路，封裝出來(lái)，在頁(yè)面上的使用直接傳配置項(xiàng)調(diào)用就完事，開(kāi)發(fā)每個(gè)相似的頁(yè)面效率簡(jiǎn)直是牛逼
Table表格的封裝
簡(jiǎn)述
再來(lái)折磨一遍，這里是table表單的封裝，其實(shí)跟上面的差不多，有點(diǎn)小區(qū)別，會(huì)用到添加動(dòng)態(tài)插槽，這里就不墨跡了，直接上用配置項(xiàng)封裝前的正常使用
正常使用
user.vue
<template>
<div class="user">
<el-table style="width: 100%" :data="dataList" border>
<!-- 1.傳入showSelectColumn時(shí)展示的全選列 -->
<template v-if="contentTableConfig.showSelectColumn">
<el-table-column type="selection" />
</template>
<!-- 2.傳入showIndexColumn時(shí)展示的序號(hào)列 -->
<template v-if="contentTableConfig.showIndexColumn">
<el-table-column type="index" label="序號(hào)" />
</template>
<!-- 3.propList里面的所有列 -->
<template v-for="item in contentTableConfig.propList" :key="item.prop">
<el-table-column v-bind="item" show-overflow-tooltip>
<!-- 傳有slotName時(shí)展示的插槽列 -->
<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()
// 這里是網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)
const getPageData = () => {
store.dispatch(`main/getPageListAction`, {
queryInfo: {
offset: 0,
size: 10
},
pageName: 'users'
})
}
// 頁(yè)面加載時(shí)第一次調(diào)用獲取表單數(shù)據(jù)
getPageData()
const dataList = computed(() => store.getters[`main/pageListData`]('users'))
?
// 表格配置項(xiàng)
const contentTableConfig = {
// 表格配置
propList: [
{ prop: 'id', label: '用戶(hù)id', minWidth: '100', align: 'center' },
{ prop: 'name', label: '用戶(hù)名', minWidth: '100', align: 'center' },
{ prop: 'realname', label: '真實(shí)姓名', minWidth: '100', align: 'center' },
{ prop: 'cellphone', label: '手機(jī)號(hào)碼', minWidth: '100', align: 'center' },
{
prop: 'enable',
label: '狀態(tài)',
minWidth: '100',
slotName: 'status',
align: 'center'
},
{
label: '操作',
minWidth: '120',
slotName: 'handler',
align: 'center'
}
],
// 表格具有序號(hào)列
showIndexColumn: true,
// 表格具有可選列
showSelectColumn: true
}
</script>
?
<style scoped lang="less"></style>
從上面可以看出，主頁(yè)面的代碼有多冗余，看到就頭疼+裂開(kāi)，所以開(kāi)始一層封裝
開(kāi)始封裝①
配置項(xiàng)類(lèi)型文件
export interface ITbaleOption {
prop?: string
label: string
minWidth?: string
slotName?: string
}
export interface ITable {
propList: ITbaleOption[]
showIndexColumn?: boolean
showSelectColumn?: boolean
childrenProps?: object
}配置項(xiàng)文件
import { ITable } from '@/base-ui/table/type'
export const contentTableConfig: ITable = {
// 表格配置
propList: [
{ prop: 'id', label: '用戶(hù)id', minWidth: '100' },
{ prop: 'name', label: '用戶(hù)名', minWidth: '100' },
{ prop: 'realname', label: '真實(shí)姓名', minWidth: '100' },
{ prop: 'cellphone', label: '手機(jī)號(hào)碼', minWidth: '100' },
{ prop: 'enable', label: '狀態(tài)', minWidth: '100', slotName: 'status' },
{
label: '操作',
minWidth: '120',
slotName: 'handler'
}
],
// 表格具有序號(hào)列
showIndexColumn: false,
// 表格具有可選列
showSelectColumn: true
}table.vue文件
<template>
<el-table style="width: 100%" :data="listData" border>
<!-- 1.傳入showSelectColumn時(shí)展示的全選列 -->
<template v-if="showSelectColumn">
<el-table-column type="selection" />
</template>
<!-- 2.傳入showIndexColumn時(shí)展示的序號(hào)列 -->
<template v-if="showIndexColumn">
<el-table-column type="index" label="序號(hào)" />
</template>
<!-- 3.propList里面的所有列 -->
<template v-for="item in propList" :key="item.prop">
<el-table-column v-bind="item" show-overflow-tooltip>
<!-- 傳有slotName時(shí)展示的插槽列 -->
<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[] //表單數(shù)據(jù)
propList: ITbaleOption[] //表單配置項(xiàng)
showIndexColumn?: boolean //是否顯示索引列
showSelectColumn?: boolean //是否顯示全選列
childrenProps?: object // 是否有子數(shù)據(jù)，樹(shù)形數(shù)據(jù)才用得到
}
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">
// 導(dǎo)入表單配置項(xiàng)
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()
?
// 這里是網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)
const getPageData = () => {
store.dispatch(`main/getPageListAction`, {
queryInfo: {
offset: 0,
size: 10
},
pageName: 'users'
})
}
// 頁(yè)面加載時(shí)第一次調(diào)用獲取表單數(shù)據(jù)
getPageData()
const dataList = computed(() => store.getters[`main/pageListData`]('users'))
</script>
?
<style scoped lang="less"></style>
可以看到，代碼抽出去了，但是我們可以發(fā)現(xiàn)，里面的插槽其實(shí)不能給它寫(xiě)死，應(yīng)該是動(dòng)態(tài)決定的，所以我們可以這樣做
在擁有slotName部分的插槽列部分放入一個(gè)具名插槽，再將默認(rèn)插槽列中的scope.row發(fā)回給具名插槽
table.vue（為了可擴(kuò)展性，我依舊在里面加了兩個(gè)插槽，一個(gè)頂部一個(gè)底部）
<template>
<div class="header">
<slot name="header"> </slot>
</div>
<el-table style="width: 100%" :data="listData" border>
<!-- 1.傳入showSelectColumn時(shí)展示的全選列 -->
<template v-if="showSelectColumn">
<el-table-column type="selection" />
</template>
<!-- 2.傳入showIndexColumn時(shí)展示的序號(hào)列 -->
<template v-if="showIndexColumn">
<el-table-column type="index" label="序號(hào)" />
</template>
<!-- 3.propList里面的所有列 -->
<template v-for="item in propList" :key="item.prop">
<el-table-column v-bind="item" show-overflow-tooltip>
<!-- 傳有slotName時(shí)展示的插槽列 -->
<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[] //表單數(shù)據(jù)
propList: ITbaleOption[] //表單配置項(xiàng)
showIndexColumn?: boolean //是否顯示索引列
showSelectColumn?: boolean //是否顯示全選列
childrenProps?: object // 是否有子數(shù)據(jù)，樹(shù)形數(shù)據(jù)才用得到
}
const props = withDefaults(defineProps<Props>(), {
showIndexColumn: false,
showSelectColumn: false,
childrenProps: () => ({})
})
</script>
?
<style scoped></style>然后在user.vue中放入具名插槽，傳進(jìn)去table組件里，同時(shí)傳入一些內(nèi)容到可擴(kuò)展插槽里面
user.vue
<template>
<div class="user">
<div class="content">
<table-test v-bind="contentTableConfig" :listData="dataList">
<!-- 1.header中的插槽 -->
<template #header>
<div class="header-default">
<!-- 傳入標(biāo)題（位于左側(cè)） -->
<div class="title">用戶(hù)列表</div>
<!-- 傳入處理內(nèi)容（位于右側(cè)） -->
<div class="handler">
<el-button type="primary" @click="addUserBtnClick"
>新建用戶(hù)</el-button
>
</div>
</div>
</template>
<!-- 2.該user頁(yè)面獨(dú)有部分 -->
<template #status="scope">
<el-button>{{ scope.row.status === 0 ? '禁用' : '啟用' }}</el-button>
</template>
<!-- 3.每個(gè)頁(yè)面都會(huì)有的部分 -->
<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>
<!-- 只有總條數(shù)>0才會(huì)有分頁(yè)器 -->
<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">
// 導(dǎo)入表單配置項(xiàng)
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()
?
// 這里是網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)
const getPageData = () => {
store.dispatch(`main/getPageListAction`, {
queryInfo: {
offset: 0,
size: 10
},
pageName: 'users'
})
}
// 頁(yè)面加載時(shí)第一次調(diào)用獲取表單數(shù)據(jù)
getPageData()
const dataList = computed(() => store.getters[`main/pageListData`]('users'))
?
// 點(diǎn)擊編輯按鈕觸發(fā)事件
const handleEditClick = (row: any) => {
console.log('點(diǎn)擊了編輯按鈕，數(shù)據(jù)為：', row)
}
// 點(diǎn)擊刪除按鈕觸發(fā)事件
const deleteBtnClick = (row: any) => {
console.log('點(diǎn)擊了刪除按鈕，數(shù)據(jù)為：', row)
}
// 點(diǎn)擊新建用戶(hù)觸發(fā)事件
const addUserBtnClick = () => {
console.log('點(diǎn)擊了新建用戶(hù)')
}
</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>
顯然此時(shí)封裝已經(jīng)滿足需求了，但是我們發(fā)現(xiàn)主頁(yè)面的代碼頁(yè)還是比較冗余，如果不用到插槽的話還好，要用到插槽的話，就要在主頁(yè)面寫(xiě)入很多插槽，多個(gè)頁(yè)面都這樣的話頁(yè)裂開(kāi)，所以我們要像之前一樣把這坨代碼再封一層
開(kāi)始封裝②
page-table.vue
<template>
<table-test v-bind="contentTableConfig" :listData="dataList">
<!-- 1.header中的插槽 -->
<template #header>
<div class="header-default">
<!-- 傳入標(biāo)題（位于左側(cè)） -->
<div class="title">{{ pageNameInChinese }}列表</div>
<!-- 傳入處理內(nèi)容（位于右側(cè)） -->
<div class="handler">
<el-button type="primary" @click="addUserBtnClick"
>新建{{ pageNameInChinese }}</el-button
>
</div>
</div>
</template>
<!-- 2.該user頁(yè)面獨(dú)有部分 -->
<template #status="scope">
<el-button>{{ scope.row.status === 0 ? '禁用' : '啟用' }}</el-button>
</template>
<!-- 3.每個(gè)頁(yè)面都會(huì)有的部分 -->
<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>
<!-- 只有總條數(shù)>0才會(huì)有分頁(yè)器 -->
<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()
?
// 這里是網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)
const getPageData = () => {
store.dispatch(`main/getPageListAction`, {
queryInfo: {
offset: 0,
size: 10
},
pageName: props.pageName
})
}
// 頁(yè)面加載時(shí)第一次調(diào)用獲取表單數(shù)據(jù)
getPageData()
const dataList = computed(() =>
store.getters[`main/pageListData`](props.pageName)
)
?
// 1.獲取頁(yè)面中文名稱(chēng)
const pageNameTransform = (pageName: string): string => {
switch (pageName) {
case 'users':
return '用戶(hù)'
default:
return ''
}
}
const pageNameInChinese = pageNameTransform(props.pageName)
?
// 點(diǎn)擊編輯按鈕觸發(fā)事件
const handleEditClick = (row: any) => {
console.log('點(diǎn)擊了編輯按鈕，數(shù)據(jù)為：', row)
}
// 點(diǎn)擊刪除按鈕觸發(fā)事件
const deleteBtnClick = (row: any) => {
console.log('點(diǎn)擊了刪除按鈕，數(shù)據(jù)為：', row)
}
// 點(diǎn)擊新建用戶(hù)觸發(fā)事件
const addUserBtnClick = () => {
console.log('點(diǎn)擊了新建用戶(hù)')
}
</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">
// 導(dǎo)入表單配置項(xiàng)
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>
圖中可以看出效果其實(shí)是一樣的，主頁(yè)面的代碼少了，只需要傳入配置項(xiàng)和pageName（控制網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)）就可以生成一個(gè)表格，但是我們可以發(fā)現(xiàn)，如果多個(gè)頁(yè)面復(fù)用的話，其實(shí)操作列的插槽是公有的，但是狀態(tài)列卻是私有的，別的頁(yè)面不一定有狀態(tài)頁(yè)，所以狀態(tài)列內(nèi)容插入的位置應(yīng)該在主頁(yè)面user里面而不該在封裝的組件里面，而且編輯新建邏輯也是頁(yè)面獨(dú)有，應(yīng)該在主頁(yè)面執(zhí)行
開(kāi)始封裝③
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">
// 導(dǎo)入表單配置項(xiàng)
import { contentTableConfig } from './config/table-config'
import pageTable from '@/components/page-table/page-table-test.vue'
?
const handleEditClick = (row: any, pageNameInChinese: any) => {
console.log('點(diǎn)擊了編輯按鈕，數(shù)據(jù)為：', row, pageNameInChinese)
}
?
const handleCreateClick = (pageNameInChinese: any) => {
console.log('點(diǎn)擊了新建用戶(hù)，數(shù)據(jù)為：', 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">
<!-- 傳入標(biāo)題（位于左側(cè)） -->
<div class="title">{{ pageNameInChinese }}列表</div>
<!-- 傳入處理內(nèi)容（位于右側(cè)） -->
<div class="handler">
<el-button type="primary" @click="addUserBtnClick"
>新建{{ pageNameInChinese }}</el-button
>
</div>
</div>
</template>
<!-- 2.該user頁(yè)面獨(dú)有部分 -->
<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.每個(gè)頁(yè)面都會(huì)有的部分 -->
<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>
<!-- 只有總條數(shù)>0才會(huì)有分頁(yè)器 -->
<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()
?
// 這里是網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)
const getPageData = () => {
store.dispatch(`main/getPageListAction`, {
queryInfo: {
offset: 0,
size: 10
},
pageName: props.pageName
})
}
// 頁(yè)面加載時(shí)第一次調(diào)用獲取表單數(shù)據(jù)
getPageData()
const dataList = computed(() =>
store.getters[`main/pageListData`](props.pageName)
)
?
// 1.獲取頁(yè)面中文名稱(chēng)
const pageNameTransform = (pageName: string): string => {
switch (pageName) {
case 'users':
return '用戶(hù)'
default:
return ''
}
}
const pageNameInChinese = pageNameTransform(props.pageName)
?
// 2.屬于動(dòng)態(tài)插槽的配置項(xiàng)篩選
const otherPropSlots: any = props.contentTableConfig?.propList.filter(
(item: any) => {
if (item.slotName === 'handler') return false
return item.slotName
}
)
?
// 點(diǎn)擊編輯按鈕觸發(fā)事件
const handleEditClick = (row: any) => {
emit('editBtnClick', row, pageNameInChinese)
}
// 點(diǎn)擊刪除按鈕觸發(fā)事件
const deleteBtnClick = (row: any) => {
console.log('點(diǎn)擊了刪除按鈕，數(shù)據(jù)為：', row)
}
// 點(diǎn)擊新建用戶(hù)觸發(fā)事件
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>
可以看到，這時(shí)我們已經(jīng)把獨(dú)有私有的插槽區(qū)分開(kāi)了，而且編輯和新建的邏輯也在主頁(yè)面中執(zhí)行，封裝完畢，下面附上完整代碼
完整封裝代碼④
配置項(xiàng)類(lèi)型文件
export interface ITbaleOption {
prop?: string
label: string
minWidth?: string
slotName?: string
align?: string
}
export interface ITable {
propList: ITbaleOption[]
showIndexColumn?: boolean
showSelectColumn?: boolean
childrenProps?: object
}配置項(xiàng)文件
import { ITable } from '@/base-ui/table/type'
export const contentTableConfig: ITable = {
// 表格配置
propList: [
{ prop: 'id', label: '用戶(hù)id', minWidth: '100', align: 'center' },
{ prop: 'name', label: '用戶(hù)名', minWidth: '100', align: 'center' },
{ prop: 'realname', label: '真實(shí)姓名', minWidth: '100', align: 'center' },
{ prop: 'cellphone', label: '手機(jī)號(hào)碼', minWidth: '100', align: 'center' },
{
prop: 'enable',
label: '狀態(tài)',
minWidth: '100',
slotName: 'status',
align: 'center'
},
{
label: '操作',
minWidth: '120',
slotName: 'handler',
align: 'center'
}
],
// 表格具有序號(hào)列
showIndexColumn: false,
// 表格具有可選列
showSelectColumn: true
}table表單組件文件
<template>
<div class="header">
<slot name="header"> </slot>
</div>
<el-table style="width: 100%" :data="listData" border>
<!-- 1.傳入showSelectColumn時(shí)展示的全選列 -->
<template v-if="showSelectColumn">
<el-table-column type="selection" />
</template>
<!-- 2.傳入showIndexColumn時(shí)展示的序號(hào)列 -->
<template v-if="showIndexColumn">
<el-table-column type="index" label="序號(hào)" />
</template>
<!-- 3.propList里面的所有列 -->
<template v-for="item in propList" :key="item.prop">
<el-table-column v-bind="item" show-overflow-tooltip>
<!-- 傳有slotName時(shí)展示的插槽列 -->
<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[] //表單數(shù)據(jù)
propList: ITbaleOption[] //表單配置項(xiàng)
showIndexColumn?: boolean //是否顯示索引列
showSelectColumn?: boolean //是否顯示全選列
childrenProps?: object // 是否有子數(shù)據(jù)，樹(shù)形數(shù)據(jù)才用得到
}
const props = withDefaults(defineProps<Props>(), {
showIndexColumn: false,
showSelectColumn: false,
childrenProps: () => ({})
})
</script>
?
<style scoped></style>page-table組件文件
user頁(yè)面組件文件
<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">
// 導(dǎo)入表單配置項(xiàng)
import { contentTableConfig } from './config/table-config'
import pageTable from '@/components/page-table/page-table-test.vue'
?
const handleEditClick = (row: any, pageNameInChinese: any) => {
console.log('點(diǎn)擊了編輯按鈕，數(shù)據(jù)為：', row, pageNameInChinese)
}
?
const handleCreateClick = (pageNameInChinese: any) => {
console.log('點(diǎn)擊了新建用戶(hù)，數(shù)據(jù)為：', pageNameInChinese)
}
</script>
?
<style scoped lang="less">
.content {
border-top: 20px solid #dedee1;
padding: 40px;
}
</style>結(jié)語(yǔ)
剛學(xué)會(huì)的代碼思路與寫(xiě)法，花了一天整理，主要還是自己記錄一下，頗有收獲，感覺(jué)大佬分享使我進(jìn)步~雖然還是很菜....
到此這篇關(guān)于Element Plus組件Form表單Table表格二次封裝的文章就介紹到這了,更多相關(guān)Element Plus組件Table表格二次封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue前端img訪問(wèn)鑒權(quán)后端進(jìn)行攔截的代碼示例
路由攔截是一種在用戶(hù)訪問(wèn)特定頁(yè)面之前對(duì)其進(jìn)行攔截和處理的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于vue前端img訪問(wèn)鑒權(quán)后端進(jìn)行攔截的相關(guān)資料,需要的朋友可以參考下2024-03-03
vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題)
這篇文章主要介紹了vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了SpringBoot在yml配置文件中配置druid的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
解決vue打包報(bào)錯(cuò)Unexpected token: punc的問(wèn)題
這篇文章主要介紹了解決vue打包報(bào)錯(cuò)Unexpected token: punc的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明
這篇文章主要介紹了vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
本篇文章主要介紹了詳解在vue-cli中使用路由，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue2.0項(xiàng)目集成Cesium的實(shí)現(xiàn)方法
這篇文章主要介紹了vue2.0項(xiàng)目集成Cesium的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
在Vue3項(xiàng)目中使用Vuex進(jìn)行狀態(tài)管理的詳細(xì)教程
在?Vue?3?中使用?Vuex?進(jìn)行狀態(tài)管理是一個(gè)很好的實(shí)踐,特別是在涉及到多個(gè)組件間共享狀態(tài)的情況,下面是如何在?Vue?3?項(xiàng)目中設(shè)置和使用?Vuex?的教程,包括?state,?mutations,?actions,?getters?的概念及其用途,需要的朋友可以參考下2024-09-09
Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)
這篇文章主要介紹了Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容-rules-案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)
這篇文章主要介紹了Vue+elementUI的動(dòng)態(tài)表單的校驗(yàn)(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04