利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
更新時(shí)間：2023年11月23日 08:26:40 作者：YanaDH
最近公司項(xiàng)目中頻繁會(huì)使用到table表格,而且前端技術(shù)這一塊也用到了vue3來(lái)開(kāi)發(fā),所以基于element plus table做了一個(gè)二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下
1 前言
由于項(xiàng)目中有很多菜單都是列表數(shù)據(jù)的展示，為避免太多重復(fù)代碼，故將 Element Plus 的 Table 表格進(jìn)行封裝，實(shí)現(xiàn)通過(guò)配置展示列表數(shù)據(jù)
2 功能
- 支持自動(dòng)獲取表格數(shù)據(jù)
- 支持?jǐn)?shù)據(jù)列配置及插槽
- 支持操作列配置及插槽
- 支持多選框配置
- 支持表尾配置及插槽
- 支持分頁(yè)顯示
3 實(shí)現(xiàn)步驟
3.1 復(fù)制基本表格
到 Element Plus官網(wǎng)復(fù)制一份最簡(jiǎn)單的 Table 代碼，并刪除多余代碼
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="state" label="State" />
<el-table-column prop="city" label="City" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="zip" label="Zip" />
<el-table-column fixed="right" label="Operations">
<template #default>
<el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}
]
const handleClick = () => {
console.log('click')
}
</script>
3.2 支持自動(dòng)獲取表格數(shù)據(jù)
tableData 數(shù)據(jù)改為從 props.api 接口獲取
3.3 支持?jǐn)?shù)據(jù)列配置及插槽
3.3.1 自動(dòng)生成列
數(shù)據(jù)列（除多選框與操作列外）通過(guò) props.columns 自動(dòng)生成
<el-table-column v-for="item in props.columns" :key="item.prop" :prop="item.prop" :label="item.label" :sortable="item.sortable ? 'custom' : false" :width="item.width" > </el-table-column>
interface TableConfigInterface {
api: string // 表格數(shù)據(jù)獲取接口
columns: {
// 顯示列
prop: string // 鍵名
label?: string // 表頭顯示名稱
formatter?: (row: unknown) => string // 自定義單元格格式化方法，參數(shù)為當(dāng)前行數(shù)據(jù)
tooltip?: string // 表頭 tooltip
sortable?: boolean // 是否可以排序
width?: number | string // 寬度
style?: string // 單元格樣式
labelStyle?: string // 表頭樣式
}[]
}
3.2.2 支持表頭自定義及插槽
- el-table-column 使用
<template #header>自定義表頭<slot :name="item.prop + 'Header'">支持插槽- labelStyle 支持樣式自定義
- 支持 tooltip
<el-table-column
v-for="item in props.columns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable ? 'custom' : false"
:width="item.width"
>
<template #header>
<slot :name="item.prop + 'Header'">
<div class="inline-flex" :style="item.labelStyle">
<span>{{ item.label }}</span>
<el-tooltip
popper-class="table-tooltip"
effect="dark"
placement="top-start"
:content="item.tooltip"
v-if="item.tooltip"
>
<el-icon><i-ep-Warning /></el-icon>
</el-tooltip>
</div>
</slot>
</template>
</el-table-column>
3.2.3 支持單元格自定義及插槽
- el-table-column 使用
<template #default="scope">自定義單元格<slot :name="item.prop" :row="scope.row">支持插槽- style 屬性支持自定義樣式
- formatter 方法支持自定義顯示內(nèi)容
<el-table-column
v-for="item in props.columns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable ? 'custom' : false"
:width="item.width"
>
<template #header>
<slot :name="item.prop + 'Header'">
<div class="inline-flex" :style="item.labelStyle">
<span>{{ item.label }}</span>
<el-tooltip
popper-class="table-tooltip"
effect="dark"
placement="top-start"
:content="item.tooltip"
v-if="item.tooltip"
>
<el-icon><i-ep-Warning /></el-icon>
</el-tooltip>
</div>
</slot>
</template>
<template #default="scope">
<slot :name="item.prop" :row="scope.row">
<div :style="item.style">
<span v-if="item.formatter">{{ item.formatter(scope.row) }}</span>
<span v-else>{{ scope.row[item.prop] }}</span>
</div>
</slot>
</template>
</el-table-column>
3.3 支持操作列配置及插槽
- el-table-column 使用
<template #default="scope">自定義操作列<slot :name="item.prop" :row="scope.row">支持插槽- visible 方法支持自定義按鈕顯示邏輯
<el-table-column
fixed="right"
label="操作"
:width="props.operation?.width"
v-if="props.operation?.columns"
>
<template #default="scope">
<slot name="operations" :row="scope.row">
<span v-for="item in props.operation?.columns" :key="item.text || item.icon">
<el-button
v-if="setVisible(scope.row, item.visible)"
:type="item.type"
:link="item.link"
:plain="item.plain"
@click="item.click(scope.row)"
size="small"
class="margin-right: 4px"
>
<el-icon v-if="item.icon" :class="item.icon"></el-icon>
{{ item.text }}
</el-button>
</span>
</slot>
</template>
</el-table-column>
// 操作框邏輯
const setVisible = (row: unknown, visible?: (row: unknown) => boolean) => {
if (!visible || visible(row)) {
return true
}
return false
}
3.4 支持多選框配置
<el-table>增加 selection 列
<el-table-column fixed :selectable="setSelectable" type="selection" v-if="showSelectBox" />
TableConfigInterface 增加 rowKey、selectable
interface TableConfigInterface {
// ......
rowKey?: string // 行數(shù)據(jù)的 Key
selectable?: boolean | ((row: unknown) => boolean) // 當(dāng)前行多選框是否可以勾選，參數(shù)為當(dāng)前行數(shù)據(jù)，默認(rèn)為 false
}
const props = withDefaults(defineProps<TableConfigInterface>(), {
rowKey: 'id',
})
// 多選框邏輯
const disabledList = reactive<string[]>([]) // 禁止勾選的數(shù)據(jù)
const showSelectBox = computed(() => props.selectable && disabledList.length < tableData.length)
const setSelectable = (row: unknown) => {
const selectable =
typeof props.selectable === 'boolean' ? props.selectable : props.selectable?.(row)
if (!selectable && !disabledList.includes(row?.[props.rowKey])) {
disabledList.push(row?.[props.rowKey])
}
return selectable
}
3.5 支持表尾配置及插槽
<el-table>增加 @selection-change 及 ref 配置<slot name="footer">支持插槽- visible 方法支持自定義按鈕顯示邏輯
<el-table
v-loading="loading"
:data="tableData"
@selection-change="handleSelectionChange"
table-layout="auto"
ref="tableRef"
>
<!-- ...... -->
</el-table>
<div v-if="showSelectBox" class="p-14">
<el-checkbox
v-model="isSelected"
@click="tableRef?.toggleAllSelection()"
:indeterminate="indeterminate"
label="全選"
style="vertical-align: middle; margin-right: 10px"
/>
<slot name="footer" :rows="selectionRows">
<span v-for="item in props.footer?.operations" :key="item.text || item.icon">
<el-button
v-if="item.visible ? item.visible() : true"
:type="item.type || 'primary'"
:link="item.link"
:plain="item.plain"
:disabled="!selectionRows.length"
@click="item.click(selectionRows)"
style="margin-left: 10px"
>
<el-icon v-if="item.icon" :class="item.icon"></el-icon>
{{ item.text }}
</el-button>
</span>
</slot>
</div>
const tableRef = ref()
const isSelected = ref(false) // 是否有選中數(shù)據(jù)
const selectionRows = ref<unknown[]>([]) // 當(dāng)前選中的數(shù)據(jù)
const handleSelectionChange = (rows: unknown[]) => {
selectionRows.value = rows
isSelected.value = rows.length > 0
}
const indeterminate = computed(
() =>
selectionRows.value.length > 0 &&
selectionRows.value.length < tableData.length - disabledList.length
)
3.6 支持分頁(yè)顯示
最底部增加
<el-pagination></el-pagination>
<el-pagination background :total="tableData.length" :layout="props.layout" v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" @current-change="getTableData" @size-change="getTableData" class="p-y-20" > </el-pagination>
interface TableConfigInterface {
// ......
layout?: string // 組件布局
}
const pagination = ref({
currentPage: 1,
pageSize: 10
})
4 使用方法
<template>
<TableComponent v-bind="tableConfig">
<template #nameHeader>
<div>姓名</div>
</template>
<template #name>
<div>Yana</div>
</template>
</TableComponent>
</template>
<script setup lang="ts">
const tableConfig: TableConfigInterface = {
api: 'getTableData',
columns: [
{
prop: 'date',
label: 'Date',
tooltip: 'This is Date'
},
{
prop: 'name',
label: 'Name'
},
{
prop: 'state',
label: 'State'
},
{
prop: 'city',
label: 'City'
},
{
prop: 'address',
label: 'Address'
},
{
prop: 'zip',
label: 'Zip',
style: 'color: red',
labelStyle: 'color: red',
sortable: true
}
],
operation: {
columns: [
{
text: '編輯',
click: () => {},
visible: (row) => row.date === '2016-05-07'
}
]
},
rowKey: 'date',
selectable: (row) => row.date === '2016-05-07',
footer: {
operations: [
{
text: '刪除',
click: () => {}
}
]
}
}
</script>
5 源碼
<template>
<div v-loading="loading" class="table-wrapper">
<el-table
:data="tableData"
:max-height="props.maxHeight"
:default-sort="props.defaultSort"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
@row-click="goDetail"
:row-style="{ cursor: 'pointer' }"
table-layout="auto"
ref="tableRef"
>
<el-table-column fixed :selectable="setSelectable" type="selection" v-if="showSelectBox" />
<el-table-column
v-for="item in props.columns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable ? 'custom' : false"
:width="item.width"
>
<template #header>
<slot name="header">
<div class="inline-flex" :style="item.labelStyle">
<span>{{ item.label }}</span>
<el-tooltip
popper-class="table-tooltip"
effect="dark"
placement="top-start"
:content="item.tooltip"
v-if="item.tooltip"
>
<el-icon><i-ep-Warning /></el-icon>
</el-tooltip>
</div>
</slot>
</template>
<template #default="scope">
<slot :name="item.prop" :row="scope.row">
<div :style="item.style">
<span v-if="item.formatter">{{ item.formatter(scope.row) }}</span>
<span v-else>{{ scope.row[item.prop] }}</span>
</div>
</slot>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
:width="props.operation?.width"
v-if="props.operation?.columns"
>
<template #default="scope">
<slot name="operations" :row="scope.row">
<span v-for="item in props.operation?.columns" :key="item.text || item.icon">
<el-button
v-if="setVisible(scope.row, item.visible)"
:type="item.type"
:link="item.link"
:plain="item.plain"
@click="item.click(scope.row)"
size="small"
style="margin-right: 4px"
>
<el-icon v-if="item.icon" :class="item.icon"></el-icon>
{{ item.text }}
</el-button>
</span>
</slot>
</template>
</el-table-column>
</el-table>
<div v-if="showSelectBox" class="p-14">
<el-checkbox
v-model="isSelected"
@click="tableRef?.toggleAllSelection()"
:indeterminate="indeterminate"
label="全選"
style="vertical-align: middle; margin-right: 10px"
/>
<slot name="footer" :rows="selectionRows">
<span v-for="item in props.footer?.operations" :key="item.text || item.icon">
<el-button
v-if="item.visible ? item.visible() : true"
:type="item.type || 'primary'"
:link="item.link"
:plain="item.plain"
:disabled="!selectionRows.length"
@click="item.click(selectionRows)"
style="margin-left: 10px"
>
<el-icon v-if="item.icon" :class="item.icon"></el-icon>
{{ item.text }}
</el-button>
</span>
</slot>
</div>
</div>
<el-pagination
background
:total="tableData.length"
:layout="props.layout"
v-model:current-page="pagination.currentPage"
v-model:page-size="pagination.pageSize"
@current-change="getTableData"
@size-change="getTableData"
class="p-y-20"
/>
</template>
<script lang="ts" setup>
interface OperationInterface {
click: (row: unknown) => void // 按鈕點(diǎn)擊方法，參數(shù)為當(dāng)前行數(shù)據(jù)
text?: string // 按鈕顯示文字
icon?: string // 按鈕 icon
visible?: (row?: unknown) => boolean // 設(shè)置按鈕是否可見(jiàn)，參數(shù)為當(dāng)前行數(shù)據(jù)，默認(rèn)為 true
type?: string // 按鈕類型['primary'| 'success'| 'warning'| 'danger'| 'info']
link?: boolean // 是否為鏈接按鈕
plain?: boolean // 是否為樸素按鈕
}
interface TableConfigInterface {
api: string // 表格數(shù)據(jù)獲取接口
rowKey?: string // 行數(shù)據(jù)的 Key
columns: {
// 顯示列
prop: string // 鍵名
label?: string // 表頭顯示名稱
formatter?: (row: unknown) => string // 自定義單元格格式化方法，參數(shù)為當(dāng)前行數(shù)據(jù)
tooltip?: string // 表頭 tooltip
sortable?: boolean // 是否可以排序
width?: number | string // 寬度
style?: string // 單元格樣式
labelStyle?: string // 表頭樣式
}[]
selectable?: boolean | ((row: unknown) => boolean) // 當(dāng)前行多選框是否可以勾選，參數(shù)為當(dāng)前行數(shù)據(jù)，默認(rèn)為 false
operation?: {
// 操作列
columns: OperationInterface[]
width?: number | string // 寬度
}
footer?: {
// 操作列
operations: OperationInterface[]
}
defaultSort?: {
// 默認(rèn)排序
prop: string // 默認(rèn)排序的列
order?: string // ['ascending'| 'descending'], 沒(méi)有指定 order, 則默認(rèn)順序是 ascending
}
maxHeight?: number | string // 表格最大高度
layout?: string
}
const props = withDefaults(defineProps<TableConfigInterface>(), {
rowKey: 'id',
layout: 'prev, pager, next, total'
})
const pagination = ref({
currentPage: 1,
pageSize: 10
})
const tableRef = ref()
let tableData = reactive<unknown[]>([])
// 多選框邏輯
const isSelected = ref(false) // 是否有選中數(shù)據(jù)
const selectionRows = ref<unknown[]>([]) // 當(dāng)前選中的數(shù)據(jù)
const handleSelectionChange = (rows: unknown[]) => {
selectionRows.value = rows
isSelected.value = rows.length > 0
}
const disabledList = reactive<string[]>([]) // 禁止勾選的數(shù)據(jù)
const setSelectable = (row: unknown) => {
const selectable =
typeof props.selectable === 'boolean' ? props.selectable : props.selectable?.(row)
if (!selectable && !disabledList.includes(row?.[props.rowKey])) {
disabledList.push(row?.[props.rowKey])
}
return selectable
}
const indeterminate = computed(
() =>
selectionRows.value.length > 0 &&
selectionRows.value.length < tableData.length - disabledList.length
)
const showSelectBox = computed(() => props.selectable && disabledList.length < tableData.length)
// 操作框邏輯
const showOperation = ref(false)
const setVisible = (row: unknown, visible?: (row: unknown) => boolean) => {
if (!visible || visible(row)) {
showOperation.value = true
return true
}
return false
}
// 排序
const handleSortChange = (data: { prop: string; order: string | null }) => {
const { prop, order } = data
console.log(prop, order)
// getTableData
}
// 跳轉(zhuǎn)詳情頁(yè)
const goDetail = (row: unknown) => {
console.log(row)
}
// 發(fā)送接口
const loading = ref(true)
const getTableData = () => {
loading.value = true
showOperation.value = false
tableData = [
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-05',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-09',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-10',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
},
{
date: '2016-05-11',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}
]
loading.value = false
}
getTableData()
</script>
<style lang="scss" scoped>
.table-wrapper {
border-top: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
border-right: 1px solid #eaeaea;
}
.inline-flex {
display: inline-flex;
align-items: center;
}
.p-14 {
border-bottom: 1px solid #eaeaea;
padding: 14px;
}
.p-y-20 {
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
}
</style>
<style lang="scss">
.table-tooltip {
max-width: 220px;
}
</style>總結(jié)
到此這篇關(guān)于利用Vue3+Element Plus封裝公共表格組件的文章就介紹到這了,更多相關(guān)Vue3 Element Plus封裝公共表格組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決
這篇文章主要介紹了Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
elementUI?el-radio?無(wú)法點(diǎn)擊的問(wèn)題解決
本文主要介紹了elementUI?el-radio?無(wú)法點(diǎn)擊的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
VuePress在build打包時(shí)window?document?is?not?defined問(wèn)題解決
這篇文章主要為大家介紹了VuePress在build打包時(shí)window?document?is?not?defined問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Vue項(xiàng)目通過(guò)network的ip地址訪問(wèn)注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了Vue項(xiàng)目通過(guò)network的ip地址訪問(wèn)注意事項(xiàng)及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
解決vue中修改了數(shù)據(jù)但視圖無(wú)法更新的情況
今天小編就為大家分享一篇解決vue中修改了數(shù)據(jù)但視圖無(wú)法更新的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本篇文章主要介紹了vue2組件實(shí)現(xiàn)懶加載淺析,運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力.2017-03-03
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來(lái),我們就直接一個(gè)個(gè)來(lái)看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-07-07
這篇文章主要為大家介紹了eslint在vue中如何使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
本文主要探討了 Vue 3 中父子組件之間的通信方式,包括父?jìng)髯?通過(guò)props傳遞數(shù)據(jù)和方法；子傳父,用emit觸發(fā)自定義事件并傳遞數(shù)據(jù)；還介紹了使用ref直接操作子組件實(shí)例,借助defineExpose暴露子組件的屬性和方法給父組件,需要的朋友可以參考下2025-01-01
Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09