前言
很久之前看了下關(guān)于 vben 的基礎(chǔ)使用,最近項(xiàng)目需求開始用了,業(yè)務(wù)需要一個(gè)帶搜索區(qū)域的表格,今天寫完有點(diǎn)懵逼,來記錄的過程中整理下思路~~
這里是之前寫過的關(guān)于 vben admin BasicTable 表格的基本使用
一、上代碼
<template>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="exportData"> 數(shù)據(jù)導(dǎo)出 </a-button>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { BasicForm, FormSchema } from '/@/components/Form';
import { BasicTable, useTable } from '/@/components/Table';
import { getBasicColumns } from './details/tableData';
import { reactive, ref, unref, watch, nextTick } from 'vue';
import { getTowersInfo, towerLatestData } from '/@/api/bu/device/device';
import { towerBillPage, exportTowerHistoryToExcel } from '/@/api/bu/device/towerBill';
//這里是表格中搜索區(qū)域表單的配置,就和 FORM 的配置是一樣的
const detailSearchForm: FormProps = {
baseColProps: { lg: 6, md: 8 },
labelWidth: 90,
schemas: [
{
label: '工作類型',
field: 'workType',
component: 'Select',
componentProps: {
dictType: 'tower_bill_type',
},
},
{
label: '單據(jù)時(shí)間',
field: 'startTime',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
},
},
],
};
const [registerTable, { reload, getForm }] = useTable({
api: towerBillPage,
beforeFetch: (params) => {
params.deviceId = deviceId;
return params;
},
afterFetch: (result) => {
// handleTowerHistory是自己寫的關(guān)于拿到返回?cái)?shù)據(jù)后進(jìn)行的一些處理的函數(shù)
return handleTowerHistory(result);
},
columns: getBasicColumns(),
showIndexColumn: false,
useSearchForm: true,
formConfig: detailSearchForm,
showTableSetting: true,
tableSetting: {
// 是否顯示刷新按鈕
redo: true,
size: false,
// 是否顯示字段調(diào)整按鈕
setting: false,
// 是否顯示全屏按鈕
fullScreen: false,
},
canResize: true,
});
// 使用在表格插槽中放了一個(gè)按鈕,對(duì)應(yīng)的點(diǎn)擊事件,是用來下載文件的
function exportData() {
// getForm().resetFields()
let data = getForm().getFieldsValue();
exportTowerHistoryToExcel({ deviceId, createTime: data.startTime }).then((url) => {
let fileName = url.slice(url.lastIndexOf('/') + 1);
fetch(url)
.then((res) => res.blob())
.then((blob) => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
// 下載文件的名稱及文件類型后綴
link.download = fileName;
document.body.appendChild(link);
link.click();
//在資源下載完成后 清除 占用的緩存資源
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
});
});
}
</script >
二、上最終效果
三、代碼分析
1.創(chuàng)建實(shí)例
我這里使用 useTable 的方式
如果需要開啟搜索區(qū)域,在 useTable 的配置過程中需要加上下面的配置項(xiàng)
useSearchForm boolean false 使用搜索表單
formConfig any 表單配置，參考表單組件的 Props
2. 表格設(shè)置工具的配置
默認(rèn)表格的設(shè)置區(qū)域的樣式是這樣子的,但是實(shí)際上并不需要這些,只保留一個(gè)刷新就可以了
配置項(xiàng)
showTableSetting boolean false - 顯示表格設(shè)置工具
tableSetting TableSetting - - 表格設(shè)置工具配置，見下方 TableSetting
2.使用 table 的插槽來放置按鈕
這里使用了 basic table 的插槽來實(shí)現(xiàn)的
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="exportData"> 數(shù)據(jù)導(dǎo)出 </a-button>
</template>
</BasicTable>
3.獲取搜索區(qū)域表單的值
業(yè)務(wù)需求,在點(diǎn)擊數(shù)據(jù)導(dǎo)出按鈕的時(shí)候,執(zhí)行 exportData() 函數(shù)需要發(fā)請(qǐng)求獲取對(duì)應(yīng)的文件 url 地址來實(shí)現(xiàn)下載功能
但是這個(gè)請(qǐng)求是需要帶表格搜索區(qū)域的時(shí)間條件作為參數(shù)的,所以我需要獲取到搜索表單中的數(shù)據(jù)
在官方文檔中可以看到,table 的 methods 中是有 getForm() 的
在 exportData() 方法中,調(diào)用 getForm() 方法,獲取到搜索表單實(shí)例對(duì)象
再調(diào)用 form 實(shí)例對(duì)象的getFieldsValue() 來獲取數(shù)據(jù)
let data = getForm().getFieldsValue();
function exportData() {
// getForm().resetFields()
let data = getForm().getFieldsValue();
exportTowerHistoryToExcel({ deviceId, createTime: data.startTime }).then((url) => {
let fileName = url.slice(url.lastIndexOf('/') + 1);
fetch(url)
.then((res) => res.blob())
.then((blob) => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
// 下載文件的名稱及文件類型后綴
link.download = fileName;
document.body.appendChild(link);
link.click();
//在資源下載完成后 清除 占用的緩存資源
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
});
});
}
4.實(shí)現(xiàn)在外部調(diào)用表單的 reload()
業(yè)務(wù)表單需要在某些時(shí)機(jī)來刷新,而不是手動(dòng)點(diǎn)擊表單設(shè)置工具區(qū)域的刷新按鈕,所以就需要表格實(shí)例對(duì)象的 reload() 方法
const [registerTableA, { reload, getForm }] = useTable({
.....
});
reload();
這樣在需要刷新表單的時(shí)候執(zhí)行 reload 就可以了
遺留思考 (已解決)
如果一個(gè)頁(yè)面當(dāng)中有多個(gè)表單實(shí)例的話 , emmm 分別需要在兩個(gè)位置執(zhí)行這兩個(gè)表單的 reload()
如果出現(xiàn)下面的情況,怎樣區(qū)分 是哪個(gè)表單的 relaod 呢?
(盲猜測(cè)以下代碼會(huì)報(bào)錯(cuò) 畢竟出現(xiàn)了兩個(gè) reload 兩個(gè) getForm )
const [registerTableA, { reload, getForm }] = useTable({
.....
});
const [registerTableB, { reload, getForm }] = useTable({
.....
});
(繼續(xù)猜測(cè),沒時(shí)間驗(yàn)證,等真的遇到可以試試看? 主要還是對(duì) vue3 了解太差了) (驗(yàn)證過了,失敗)
const [registerTableA, { reload as reloadA, getForm as getFormA }] = useTable({
.....
});
const [registerTableB, { reload as reloadB, getForm as getFormB }] = useTable({
.....
});
reloadA();
reloadB();
猜測(cè)失敗
//直接編譯失敗了
const [registerTableA, { reload as reloadA, getForm as getFormA }] = useTable({
.....
});
const [registerTableB, { reload as reloadB, getForm as getFormB }] = useTable({
.....
});
reloadA();
reloadB();
// reloadA is not defined
const [registerTableA, { reloadA :reload, getForm}] = useTable({
.....
});
const [registerTableB, { reloadB :reload, getForm}] = useTable({
.....
});
reloadA();
reloadB();
解決方案
這里主要還是 ES6 解構(gòu)賦值的基本功了, 在 結(jié)構(gòu)賦值中變量命名沖突的問題，可以通過使用別名的方式來解決文章來源：http://www.zghlxwxcb.cn/news/detail-787297.html
// reloadA is not defined
const [registerTableA, { reload :reloadA, getForm}] = useTable({
.....
});
const [registerTableB, { reload :reloadB, getForm}] = useTable({
.....
});
reloadA();
reloadB();
總結(jié)
之前一直以為需要先通過給 table 或者 form 綁定 ref ,才能執(zhí)行到 reload() , getFieldsValues() … 方法,但是實(shí)際上這種方式獲取的好像是 DOM 對(duì)象,而不是實(shí)例對(duì)象
所以在 useTable 的時(shí)候?qū)?reload 寫進(jìn)去頁(yè)面中就會(huì)有 reload() 方法可以直接調(diào)用了文章來源地址http://www.zghlxwxcb.cn/news/detail-787297.html
到了這里，關(guān)于vben admin BasicTable 表格的進(jìn)階使用之帶搜索區(qū)域以及對(duì)于 useTable 中方法使用別名的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
