基于element-plus的基础表单样式

<template><div class="config-page"><!-- 面包屑 --><div class="breadcrumb-header">表单项目配置</div><!-- 搜索栏 --><div ref="searchRef" class="search-container"><el-form :model="searchForm" label-width="auto" class="search-form"><el-form-item label="项目名称"><el-input v-model="searchForm.projectName" placeholder="请输入项目名称" /></el-form-item><el-form-item class="search-actions"><el-button type="primary" @click="handleSearch">查 询</el-button><el-button @click="handleReset">重 置</el-button></el-form-item></el-form></div><!-- 操作栏 --><div class="operation-btns"><el-button @click="handleAdd">添 加</el-button></div><!-- table表格 --><div class="main" :style="{ height: tableHeight }"><el-table :data="tableData" stripe v-loading="loading" style="width: 100%;height: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /><el-table-column label="操作" width="120" fixed="right"><template #default><el-button link type="primary">编辑</el-button><el-button link type="danger">删除</el-button></template></el-table-column></el-table></div><!-- 分页 --><div class="footer"><el-pagination v-model:current-page="searchForm.currentPage" v-model:page-size="searchForm.pageSize":page-sizes="[20, 50, 100, 200]" :total="total" layout="total, sizes, prev, pager, next, jumper"@current-change="handleCurrentChange" @size-change="handleSizeChange" /></div><el-dialog v-model="dialogVisible" :title="dialogTitle" width="500"><el-form :model="form" label-width="auto"><el-form-item label="项目名称"><el-input v-model="form.projectName" autocomplete="off" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></div></template></el-dialog></div>
</template><script setup>
import { ref, useTemplateRef, onMounted, onBeforeUnmount } from 'vue'
import { debounce } from 'lodash-es'// 表格容器高度
const tableHeight = ref('auto')// 计算表格高度
const calculateTableHeight = () => {// 面包屑高度const headerHeight = 41// 搜索栏高度const searchHeight = searchRef.value.offsetHeight// 操作按钮栏高度const operationHeight = 56// 分页高度const footerHeight = 56tableHeight.value = `calc(100% - ${headerHeight + searchHeight + operationHeight + footerHeight}px)`
}// 防抖的resize处理
const debouncedResize = debounce(() => {calculateTableHeight()
}, 200)// 查询条件
const searchForm = ref({projectName: '',currentPage: 1,pageSize: 20
})const loading = ref(false)
const tableData = ref([])
const total = ref(0)// 获取表格数据
const fetchTableData = async () => {try {loading.value = truesetTimeout(() => {tableData.value = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},]total.value = 8loading.value = false}, 500)} catch (error) {loading.value = falseconsole.error('获取数据失败:', error)}
}const searchRef = useTemplateRef('searchRef')
// 搜索
const handleSearch = () => {searchForm.value.currentPage = 1fetchTableData()
}// 重置
const handleReset = () => {searchForm.value = {projectName: '',currentPage: 1,pageSize: 20}fetchTableData()
}// current-page 改变时触发
const handleCurrentChange = (val) => {searchForm.value.currentPage = valfetchTableData()
}// 分页大小变化
const handleSizeChange = (size) => {searchForm.value.pageSize = sizefetchTableData()
}// 添加
const handleAdd = () => {dialogVisible.value = true
}// 初始化数据
fetchTableData()const dialogVisible = ref(false)
const dialogTitle = ref('添加项目')const form = ref({projectName: '',
})onMounted(() => {calculateTableHeight()window.addEventListener('resize', debouncedResize)
})onBeforeUnmount(() => {window.removeEventListener('resize', debouncedResize)
})</script><style scoped>
.config-page {width: 100%;height: 100%;display: flex;flex-direction: column;overflow: hidden;
}.breadcrumb-header {width: 100%;height: 41px;display: flex;align-items: center;border-bottom: 1px solid #e0e0e0;padding: 0 10px;color: #606266;
}.search-container {width: 100%;height: auto;border-bottom: 1px solid #e0e0e0;display: flex;flex-wrap: wrap;align-items: center;
}.main {padding: 0 10px 10px 10px;
}.operation-btns {width: 100%;height: 56px;display: flex;align-items: center;padding: 0 10px;
}.footer {width: 100%;height: 56px;display: flex;justify-content: flex-end;align-items: center;padding: 0 10px;border-top: 1px solid #e0e0e0;
}.search-form {width: 100%;display: flex;flex-wrap: wrap;padding-top: 10px;
}.el-form-item {margin: 0 10px 10px 10px;
}.search-actions {margin-left: auto;
}:deep(.el-table--fit .el-table__inner-wrapper:before) {display: none;
}
</style>