前期回顧
純前端 —— 200行JS代碼、實現(xiàn)導(dǎo)出Excel、支持DIY樣式，縱橫合并-CSDN博客https://blog.csdn.net/m0_57904695/article/details/135537511?spm=1001.2014.3001.5501
目錄
一、?????newTable.vue 封裝Table
二、?? newForm.vue 封裝搜索表單?
三、?? TS類型?src\types\global.d.ts
四、?? 頁面使用功能 - 靜態(tài)?
?五、?? 頁面使用功能 - 動態(tài)?
?六、?? 倉庫地址、演示地址
七、?? 結(jié)語?
在平時開發(fā)中，系統(tǒng)中寫的最多的 表格+搜索表單排名No.1，每一次都在Element-Plus中?拷貝一遍?<template> ,顯然是個大活，我們將其html封裝，每一只寫Data數(shù)據(jù)讓其動態(tài)渲染，編寫速度達(dá)達(dá)滴！
一、?????newTable.vue 封裝Table
<template>
<div class="container">
<div class="container-main">
<!-- 表單搜索區(qū)域 -->
<el-scrollbar v-if="isShowSearchRegion" max-height="300px" class="scrollbar-height">
<slot name="search"></slot>
</el-scrollbar>
<!-- 表格上方搜索向下方按鈕區(qū)域 -->
<slot name="btn"></slot>
<!-- 列表區(qū)域 -->
<el-table
ref="multipleTableRef"
v-bind="$attrs"
stripe
style="width: 100%"
:data="filterTableData"
:border="tableBorder"
:height="tableHeight || excludeSearchAreaAfterTableHeight"
:row-key="getRowKeys"
@selection-change="onSelectionChange"
>
<template #empty>
<el-empty :image-size="emptyImgSize" description="暫無數(shù)據(jù)" />
</template>
<el-table-column
type="selection"
width="30"
v-if="isSelection"
:reserve-selection="true"
:selectable="selectableCallback"
/>
<el-table-column
type="index"
label="序號"
min-width="60"
:index="orderHandler"
align="center"
/>
<el-table-column
v-for="item in tableHeader"
v-bind="item"
:key="item.prop"
header-align="center"
align="center"
>
<template #header v-if="item.slotKey?.includes('tableHeaderSearch')">
<el-input
v-model.trim="search"
size="small"
:placeholder="getSearchInfo.label"
/>
</template>
<template #default="{ row }" v-if="item.slotKey">
<slot
v-for="slot in item.slotKey.split(',')"
:name="slot"
:row="row"
></slot>
<template v-if="item.slotKey.includes('default')">
<el-link type="primary" :underline="false" @click="handleEdit(row)"
>編輯</el-link
>
<el-popconfirm title="確定刪除嗎？" @confirm="handleDelete(row.id)">
<template #reference>
<el-link type="danger" :underline="false">刪除</el-link>
</template>
</el-popconfirm>
</template>
</template>
</el-table-column>
</el-table>
<!-- 分頁區(qū)域-->
<el-pagination
v-if="paginationFlag"
background
:page-sizes="pageSizesArr"
:current-page="pageNum"
:page-size="pageSize"
:layout="layout"
:total="total"
popper-class="pagination-popper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, toRaw, nextTick, computed } from 'vue';
import { ElTable } from 'element-plus';
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
import myEmits from './newTableConfig/emits';
import myProps from './newTableConfig/props';
const emits = defineEmits(myEmits);
const props = defineProps(myProps);
const search = ref('');
// 搜索過濾
const filterTableData = computed(() =>
props.tableData?.filter(
(data) =>
!search.value ||
String(data[getSearchInfo.value.prop])
.toLowerCase()
.includes(search.value.toLowerCase())
)
);
// 計算那列用于展示搜索
const getSearchInfo = computed(() => {
let searchInfo = { label: '', prop: '' };
props.tableHeader?.find((v) => {
if (v.searchFields) {
searchInfo = { label: v.label, prop: v.prop };
return true;
}
});
return searchInfo;
});
// 序號根據(jù)數(shù)據(jù)長度計算
const orderHandler = (index: number) => {
const { pageNum, pageSize } = props;
// 第0條 * 每頁條數(shù) + 當(dāng)前索引+1
return (pageNum - 1) * pageSize + index + 1;
};
// 頁數(shù)改變
const handleSizeChange = (val: number | string) => emits('handleSizeChange', val);
// 當(dāng)前頁改變
const handleCurrentChange = (val: number | string) => emits('handleCurrentChange', val);
// 編輯、刪除
const handleEdit = (row: object) => emits('handleEdit', row);
const handleDelete = (id: number) => emits('handleDelete', id);
// 復(fù)選框
const onSelectionChange = (val: any) => emits('selection-table-change', val);
//記錄每行的key值
const getRowKeys = (row: any) => row.id;
// 根據(jù)父組件傳遞的id字符串，默認(rèn)選中對應(yīng)行
const toggleSelection = (rows?: any) => {
if (props.isSelection) {
if (rows) {
rows.forEach((row: any) => {
const idsArr = props.selectionIds?.split(',');
if (idsArr?.includes(row.id.toString())) {
//重要
nextTick(() => multipleTableRef.value?.toggleRowSelection(row, true));
}
});
} else {
multipleTableRef.value!.clearSelection();
}
}
};
const selectableCallback = (row: any) => {
const idsArr = props.selectionIds?.split(',');
if (props.isDisableSelection && idsArr?.includes(row.id.toString())) {
return false;
}
return true;
};
watch(
() => props.tableData,
(newV) => {
if (!!props.selectionIds) {
// console.log('???? selectionIds?? ==>:', props.selectionIds);
// console.log('???? newV ==>:', newV);
toggleSelection(toRaw(newV));
}
}
);
// 搜索區(qū)域高度及默認(rèn)值
const Height = ref();
// 減去搜索區(qū)域高度后的table，不能有默認(rèn)值不然會出現(xiàn)滾動條
const excludeSearchAreaAfterTableHeight = ref();
// 獲取表格高度-動態(tài)計算搜索框高度（onMounted、resize，208是已知的面包屑tebView高度）
const updateHeight = () => {
let wrapEl = document.querySelector('.scrollbar-height') as HTMLElement | null;
if (!wrapEl) return;
Height.value = wrapEl.getBoundingClientRect().height;
// console.log('???? ?? ==>:', wrapEl.getBoundingClientRect());
if (props.isShowSearchRegion) {
excludeSearchAreaAfterTableHeight.value = `calc(100vh - ${200 + Height.value}px)`;
}
};
onMounted(() => {
// 表格下拉動畫
const tableContainer = <HTMLElement>document.querySelector('.container');
setTimeout(() => {
if (tableContainer) tableContainer.style.transform = 'translateY(0)';
updateHeight();
}, 800);
});
window.addEventListener('resize', updateHeight);
defineExpose({
toggleSelection,
});
</script>
<style scoped lang="scss">
.container {
overflow: hidden;
width: 100%;
height: 100%;
padding: 15px;
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
background-color: #f8f8f8;
// background-color: #870404;
&-main {
overflow: hidden;
position: relative;
padding: 15px;
width: 100%;
// height: 100%; el-scrollbar有默認(rèn)高度100%，當(dāng)頁面列表渲前會繼承這里高度，導(dǎo)致搜索區(qū)域鋪滿全屏
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 5px;
&:hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
transition: box-shadow 0.3s ease-in-out;
.scrollbar-height {
min-height: 100px;
}
.el-pagination {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
}
}
// 穿透父組件
:deep(.el-link) {
padding-left: 10px;
}
</style>
二、?? newForm.vue 封裝搜索表單?
<template>
<el-form ref="searchFormRef" :model="searchForm" size="default">
<!-- 使用了不穩(wěn)定的 key，可能會導(dǎo)致一些不可預(yù)期的行為，比如輸入框失去焦點。 -->
<el-row>
<el-col
:xs="24"
:sm="24"
:md="24"
:lg="12"
:xl="6"
v-for="item in formOptions"
:key="item.vm"
>
<el-form-item :label="item.props.label" :prop="item.vm">
<el-input
v-if="item.type === FormOptionsType.INPUT"
v-model.lazy.trim="searchForm[item.vm]"
v-bind="item.props"
class="ml10 w100"
></el-input>
<el-select
v-if="item.type === FormOptionsType.SELECT"
v-model.lazy="searchForm[item.vm]"
v-bind="item.props"
class="ml10 w100"
fit-input-width
>
<el-option label="全部" value=""></el-option>
<el-option
v-for="option in item.selectOptions"
:key="option.value"
:label="option.label"
:value="option.value"
>
<zw-tooltip-omit :content="option.label"></zw-tooltip-omit>
</el-option>
</el-select>
<el-cascader
v-if="item.type === FormOptionsType.CASCADER"
v-model.lazy="searchForm[item.vm]"
:options="item.cascaderOptions"
v-bind="item.props"
class="ml10 w100"
/>
<el-date-picker
v-if="item.type === FormOptionsType.DATE_PICKER"
v-model.lazy="searchForm[item.vm]"
v-bind="item.props"
class="ml10 w100"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" class="xs-mt">
<el-form-item style="margin-left: 10px">
<el-button @click="onSearch('reset')">
<SvgIcon name="ant-ReloadOutlined"></SvgIcon>
重置
</el-button>
<el-button type="primary" @click="onSearch()">
<SvgIcon name="ant-SearchOutlined"></SvgIcon>
查詢
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script setup lang="ts" name="newForm">
import { toRefs, onBeforeUnmount, ref } from 'vue';
import type { PropType } from 'vue';
import { type FormInstance } from 'element-plus';
import { debounce } from '/@/utils/debounce';
const searchFormRef = ref<FormInstance>();
enum FormOptionsType {
INPUT = 'input', // 輸入框
SELECT = 'select', // 下拉框
CASCADER = 'cascader', // 級聯(lián)選擇器
DATE_PICKER = 'date-picker', // 日期選擇器
}
const props = defineProps({
formOptions: {
type: Array as PropType<FormOptions[]>,
required: true,
},
searchForm: {
type: Object as PropType<SearchFormType>,
required: true,
},
});
const { formOptions, searchForm } = toRefs(props);
const emit = defineEmits(['search']);
const debouncedEmitSearch = debounce((type) => emit('search', type));
const onSearch = (type: string) => {
if (type) searchFormRef.value?.resetFields();
debouncedEmitSearch(type);
};
onBeforeUnmount(() => searchFormRef.value?.resetFields());
defineExpose({ searchFormRef });
</script>
<style scoped lang="scss">
:deep(.el-form-item__label) {
margin-left: 10px;
}
</style>
<style scoped lang="scss">
:deep(.el-form-item__label) {
margin-left: 10px;
}
</style>
三、?? TS類型?src\types\global.d.ts
// new-table
//表頭數(shù)據(jù)類型定義
declare interface TableHeader<T = any> {
label: string;
prop: string;
align?: string;
overHidden?: boolean;
minWidth?: string;
sortable?: boolean;
type?: string;
fixed?: string;
width?: string | number;
// isActionColumn?: boolean; // 是否是操作列
// isCustomizeColumn?: boolean; // 是否是自定義列
slotKey?: string; // 自定義列的插槽名稱
searchFields?: boolean; // 是否是搜索字段
}
/*
newForm
允許任何字符串作為索引
不然會報錯, 使用動態(tài)屬性名,需要使用索引簽名
*/
declare type SearchFormType = {
[key: string]: string;
};
declare type FormOptions = {
type: string;
props: {
label: string;
placeholder: string;
type: string;
clearable: boolean;
};
vm: string;
selectOptions?: {
value: string | number;
label: string;
}[];
cascaderOptions?: any;
};四、?? 頁面使用功能 - 靜態(tài)?
<template>
<new-table
:tableHeader="tableHeader"
:tableData="tableData"
:total="100"
@handleSizeChange="onHandleSizeChange"
@handleCurrentChange="onHandleCurrentChange"
@handleDelete="onHandleDelete"
@handleEdit="onHandleEdit"
>
<template #search>
<el-row>
<el-col
:xs="24"
:sm="24"
:md="24"
:lg="12"
:xl="6"
v-for="item in Math.ceil(Math.random() * 10)"
:key="item"
class="scrollbar-demo-item"
>56546</el-col
>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" class="xs-mt">
<el-form-item>
<el-button> 重置 </el-button>
<el-button type="primary"> 查詢 </el-button>
</el-form-item>
</el-col>
</el-row>
</template>
<template #switch="slotProps">
<el-switch
v-model="slotProps.row.status"
active-text="開"
inactive-text="關(guān)"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeSwitchStatus(slotProps.row.id, slotProps.row.status)"
/>
</template>
</new-table>
</template>
<script setup lang="ts" name="algorithmRegistrationQuery">
import { reactive, toRefs } from "vue";
const state = reactive({
//表頭數(shù)據(jù)
tableHeader: <TableHeader[]>[
{ label: "姓名", prop: "uname", width: "100px" },
{ label: "年齡", prop: "age", slotKey: "switch" },
{ label: "性別", prop: "sex" },
{ label: "操作", width: "240px", fixed: "right", slotKey: "default" },
],
//表數(shù)據(jù),從接口獲取
tableData: [
{ uname: "小帥", age: "18", sex: "男", status: false, id: 1 },
{ uname: "小美", age: "148", sex: "女", status: false, id: 2 },
{ uname: "小明", age: "12", sex: "男", status: true, id: 3 },
{ uname: "小紅", age: "12", sex: "女", status: false, id: 4 },
{ uname: "小黑", age: "12", sex: "男", status: true, id: 5 },
{ uname: "小白", age: "12", sex: "女", status: false, id: 6 },
{ uname: "小黑", age: "12", sex: "男", status: true, id: 7 },
{ uname: "小白", age: "12", sex: "女", status: false, id: 8 },
{ uname: "小黑", age: "12", sex: "男", status: true, id: 9 },
{ uname: "小白", age: "12", sex: "女", status: false, id: 10 },
{ uname: "小黑", age: "12", sex: "男", status: true, id: 11 },
],
});
const { tableHeader, tableData } = toRefs(state);
// 修改
const onHandleEdit = (row: object) => {
console.log(row);
};
// 刪除
const onHandleDelete = (row: object) => {
console.log(row);
};
// switch
const changeSwitchStatus = (id: number, status: boolean) => {
console.log(id, status);
};
//分頁改變
const onHandleSizeChange = (val: number) => {
console.log("！這里輸出 ?? ==>：", val);
};
//分頁改變
const onHandleCurrentChange = (val: number) => {
console.log("！這里輸出 ?? ==>：", val);
};
// //頁容量改變
// const onHandleSizeChange = (val: number) => {
// // console.log('頁容量 ==>：', val);
// pageSize.value = val;
// getTableList(pageNum.value, pageSize.value, tableId.value);
// };
// //當(dāng)前分頁改變
// const onHandleCurrentChange = (val: number) => {
// // console.log('當(dāng)前頁 ?? ==>：', val);
// pageNum.value = val;
// getTableList(pageNum.value, pageSize.value, tableId.value);
// };
</script>
<style lang="scss" scoped>
.scrollbar-demo-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin: 10px;
text-align: center;
border-radius: 4px;
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
.xs-mt {
display: flex;
align-items: flex-end;
}
</style>
?五、?? 頁面使用功能 - 動態(tài)?
<template>
<div class="container-wrapper">
<!-- 動態(tài) page -->
<new-table
v-bind="state"
:total="pageTotal"
@handleSizeChange="onHandleSizeChange"
@handleCurrentChange="onHandleCurrentChange"
@handleEdit="onHandleEdit"
@handleDelete="onHandleDelete"
>
<template #search>
<new-form :formOptions="formOptions" :searchForm="searchForm" @search="onSearch" />
</template>
<template #btn>
<el-button type="primary" size="default" class="btn-add">
<SvgIcon name="ant-PlusOutlined"></SvgIcon>
新建題目
</el-button>
</template>
<template #switch="{ row }">
<el-switch
v-model="row.fileStatus"
active-text="開"
inactive-text="關(guān)"
:active-value="1"
:inactive-value="2"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeSwitchStatus(row.id, row.fileStatus)"
/>
</template>
</new-table>
</div>
</template>
<script setup lang="ts" name="algorithmRegistrationQuery">
import { onMounted, reactive, toRefs } from 'vue';
import { getTestList } from '/@/api/encryptionAlgorithm/templateDefinition';
import { STATUS_CODE } from '/@/enum/global';
const state = reactive({
//表頭數(shù)據(jù)
// el-table-column有的屬性都可以在這傳
/*
searchFields:true 搜索字段
slotKey: 'xxx' 自定義插槽
包含tableHeaderSearch則展示表格搜索框。
包含default則展示 編輯刪除
其他值可以在父組件中使用插槽 template自定義內(nèi)容
#search 表單搜索
#btn 列表上方的按鈕
*/
tableHeader: <TableHeader[]>[
{ label: '合規(guī)規(guī)則', prop: 'knowledgeName', searchFields: true },
{ label: '文件數(shù)量', prop: 'documentNumber', width: '200px' },
{ label: '文件狀態(tài)', prop: 'fileStatus', slotKey: 'switch' },
{ label: '操作', fixed: 'right', slotKey: 'default,tableHeaderSearch', width: 200 },
],
//表項數(shù)據(jù)
tableData: [],
formOptions: <FormOptions[]>[
{
type: 'input',
props: {
label: '合規(guī)規(guī)則',
placeholder: '請輸入合規(guī)規(guī)則',
type: 'text',
clearable: true,
},
vm: 'knowledgeName',
},
{
type: 'input',
props: {
label: '文件數(shù)量',
placeholder: '請輸入文件數(shù)量',
type: 'text',
clearable: true,
},
vm: 'documentNumber',
},
// 下拉選擇器
{
type: 'select',
props: {
label: '所屬部門',
placeholder: '請選擇',
clearable: true,
},
vm: 'department',
selectOptions: [
{
label: '數(shù)據(jù)安全',
value: 1,
},
{
label: '研發(fā)',
value: 2,
},
{
label: '事業(yè)',
value: 3,
},
],
},
// 時間范圍選擇器
{
type: 'date-picker',
props: {
label: '時間范圍',
type: 'datetimerange', // datetimerange范圍 datetime日期
clearable: true,
'range-separator': '-',
'start-placeholder': '開始日期',
'end-placeholder': '結(jié)束日期',
'value-format': 'YYYY-MM-DD HH:mm:ss',
},
vm: 'createTime',
},
// 級聯(lián)選擇器
{
type: 'cascader',
props: {
label: '所屬部門',
placeholder: '請選擇',
clearable: true,
},
vm: 'cascader',
cascaderOptions: [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'side nav',
label: 'Side Navigation',
},
{
value: 'top nav',
label: 'Top Navigation',
},
],
},
],
},
{
value: 'component',
label: 'Component',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'button',
label: 'Button',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio',
},
{
value: 'checkbox',
label: 'Checkbox',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'Menu',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog',
},
],
},
],
},
{
value: 'resource',
label: 'Resource',
children: [
{
value: 'axure',
label: 'Axure Components',
},
],
},
],
},
],
//這里允許動態(tài)屬性所以可為空,如果是下拉選項將vm置為空就會匹配到子組件的'全部'label字段
searchForm: <SearchFormType>{
department: '',
},
pageNum: 1,
pageSize: 10,
pageTotal: 0,
tableHeight: 'calc(100vh - 375px)', //如果開啟#btn占位符需要手動設(shè)置表格高度
});
const { tableData, formOptions, searchForm, pageNum, pageSize, pageTotal } = toRefs(state);
// 修改
const onHandleEdit = (row: object) => {
console.log(row);
};
// 刪除
const onHandleDelete = (row: object) => {
console.log(row);
};
// switch
const changeSwitchStatus = (id: number, status: boolean) => {
console.log(id, status);
};
//頁容量改變
const onHandleSizeChange = (val: number) => {
// console.log('頁容量 ==>：', val);
pageSize.value = val;
getTableList(pageNum.value, pageSize.value);
};
//當(dāng)前分頁改變
const onHandleCurrentChange = (val: number) => {
// console.log('當(dāng)前頁 ?? ==>：', val);
pageNum.value = val;
getTableList(pageNum.value, pageSize.value);
};
// 獲取表項數(shù)據(jù)
const getTableList = (pageNum: number, pageSize: number) => {
// 處理searchForm.value createTime
let params = { ...searchForm.value };
if (params.createTime) {
params.createTimeBegin = params.createTime[0];
params.createTimeEnd = params.createTime[1];
}
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
const { createTime, ...paramsWithoutCreateTime } = params;
getTestList({
pageNum,
pageSize,
...paramsWithoutCreateTime,
}).then((res) => {
if (res.code !== STATUS_CODE.SUCCESS) return;
const { list, total } = res.data;
tableData.value = list;
// console.log('???? 表項 ?? ==>:', list);
pageTotal.value = total;
});
};
const onSearch = (isReset?: string) => {
pageNum.value = isReset ? 1 : pageNum.value;
getTableList(pageNum.value, pageSize.value);
};
onMounted(() => getTableList(pageNum.value, pageSize.value));
</script>
<style scoped lang="scss">
.btn-add {
float: right;
margin-bottom: 20px;
}
</style>
?六、?? 倉庫地址、演示地址
倉庫地址：
Vite + Ts + Vue3 - template -- 模板: ?????? Vite + Vue3 + Ts + router + Vuex + axios + eslint 、prettier、stylelint、husky、gitCommit --- 集成多種組件、Hooks支持開封即用，嚴(yán)格的代碼質(zhì)量檢驗、祝您輕松上大分???????? 【動態(tài)路由、特效、N個組件、N個自定義指令...】 (gitee.com)
在線演示：
Vite + Vue + TS (gitee.io)
??
七、?? 結(jié)語?
封裝其他組件在其余博文中也有詳細(xì)描寫，快來抱走把！
文章來源：http://www.zghlxwxcb.cn/news/detail-820223.html
?_______________________________??期待再見??_______________________________文章來源地址http://www.zghlxwxcb.cn/news/detail-820223.html
到了這里，關(guān)于Vue3 + TS + Element-Plus —— 項目系統(tǒng)中封裝表格+搜索表單 十分鐘寫五個UI不在是問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
