活动介绍

el-table 选中行字体颜色

时间: 2025-05-03 21:27:40 浏览: 27
### 修改 Element UI 表格组件中选中行的字体颜色 为了在 `el-table` 组件中设置选中行的字体颜色,可以通过自定义 CSS 来实现。具体来说,在 `.el-table__body tr.current-row>td` 类下指定新的字体颜色属性。 ```css <style> /* 用于设置当前页面element全局table选中某行时的字体颜色 */ .el-table__body tr.current-row > td { color: #ffffff; } </style> ``` 上述代码片段展示了如何将选中行的文字颜色更改为白色[^3]。如果希望应用不同的颜色值,则可以替换 `#ffffff` 为所需的十六进制颜色码或其他合法的颜色表示形式。 对于需要更加灵活控制样式的场景,还可以考虑使用 scoped 样式或者借助于 Vue 的动态绑定特性来进一步增强功能性和可维护性。 #### 动态绑定样式示例 当项目中有多个不同主题需求时,推荐利用 JavaScript 变量来进行动态配置: ```html <template> <div id="app"> <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange"> <!-- 列定义 --> </el-table> </div> </template> <script> export default { data() { return { tableData: [], selectedColor: '#fff' // 默认选中的文字颜色 }; }, methods: { handleCurrentChange(currentRow, oldCurrentRow) { document.querySelectorAll('.el-table__body tr').forEach(tr => { if (tr.classList.contains('current-row')) { Array.from(tr.children).forEach(td => td.style.color = this.selectedColor); } }); } } }; </script> ``` 此方法允许开发者根据业务逻辑调整 `selectedColor` 值从而影响最终呈现的效果。
阅读全文

相关推荐

<template> <el-container style="height: 100vh; overflow: hidden;"> <el-aside width="200px" style="background-color: #304156;"> <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF"> <el-menu-item index="1"> 员工管理 </el-menu-item> </el-menu> </el-aside> <el-container> <el-header class="app-header"> 员工管理系统 </el-header> <el-main class="app-content"> <el-row :gutter="20"> <el-col :span="4"> <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable /> </el-col> <el-col :span="4"> <el-select v-model="queryParams.gender" placeholder="请选择性别" clearable> <el-option label="男" :value="0" /> <el-option label="女" :value="1" /> </el-select> </el-col> <el-col :span="4"> <el-select v-model="queryParams.job" placeholder="请选择职位" clearable> <el-option v-for="item in jobOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-col> <el-col :span="6"> <el-date-picker v-model="queryParams.dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-col> <el-col :span="6" class="action-buttons"> <el-button type="primary" @click="fetchData" icon="el-icon-search">搜索</el-button> <el-button type="success" @click="showAddDialog" icon="el-icon-plus">新增</el-button> <el-button type="danger" @click="batchDelete" icon="el-icon-delete">批量删除</el-button> </el-col> </el-row> <el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column prop="id" label="ID" width="80" align="center" /> <el-table-column prop="name" label="姓名" width="120" /> <el-table-column label="头像" width="100" align="center"> <template #default="scope"> <el-avatar v-if="scope.row.image" :src="scope.row.image" :size="50" shape="square" :preview-src-list="[scope.row.image]" /> <el-avatar v-else :size="50" shape="square"> </el-avatar> </template> </el-table-column> <el-table-column prop="gender" label="性别" width="80" align="center"> <template #default="scope"> <el-tag :type="scope.row.gender === 0 ? 'primary' : 'danger'"> {{ scope.row.gender === 0 ? '男' : '女' }} </el-tag> </template> </el-table-column> <el-table-column prop="job" label="职位" width="150"> <template #default="scope"> <el-tag :type="getJobTagType(scope.row.job)"> {{ jobMap[scope.row.job] || '未知' }} </el-tag> </template> </el-table-column> <el-table-column prop="entrydate" label="入职时间" width="120" align="center" /> <el-table-column prop="createTime" label="创建时间" width="180" align="center" /> <el-table-column prop="updateTime" label="最后修改时间" width="180" align="center" /> <el-table-column label="操作" width="200" align="center" fixed="right"> <template #default="scope"> <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination background layout="total, prev, pager, next, sizes" :total="total" :page-sizes="[5, 10, 20, 50]" :page-size="queryParams.pageSize" v-model:current-page="queryParams.pageNum" @current-change="fetchData" @size-change="handleSizeChange" /> </el-main> </el-container> </el-container> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px" :close-on-click-modal="false"> <el-form :model="form" ref="formRef" :rules="formRules" label-width="100px" label-position="left"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="性别" prop="gender"> <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%"> <el-option label="男" :value="0" /> <el-option label="女" :value="1" /> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="职位" prop="job"> <el-select v-model="form.job" placeholder="请选择职位" style="width: 100%"> <el-option v-for="item in jobOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="密码" prop="password" v-if="!isEdit"> <el-input v-model="form.password" show-password /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="入职时间" prop="entrydate"> <el-date-picker v-model="form.entrydate" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" /> </el-form-item> </el-col> </el-row> <el-form-item label="头像链接" prop="image"> <el-input v-model="form.image" placeholder="请输入图片URL" /> <el-image :src="form.image" fit="cover" style="width: 100px; height: 100px; margin-top: 10px;" :preview-src-list="[form.image]" /> </el-form-item> <el-form-item class="form-actions"> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> </template> <script setup> import { ref, reactive, onMounted } from 'vue'; import axios from 'axios'; import { ElMessage, ElMessageBox } from 'element-plus'; // 设置 axios 实例 const apiClient = axios.create({ baseURL: 'http://localhost:8080/emps', timeout: 5000, }); // 表格数据 const tableData = ref([]); const total = ref(0); const selectedRows = ref([]); const formRef = ref(null); // 查询参数 const queryParams = reactive({ pageNum: 1, pageSize: 5, name: '', gender: null, job: null, dateRange: [] }); // 表单数据 const form = reactive({ id: null, username: '', password: '', name: '', gender: null, job: null, image: '', entrydate: '' }); // 表单验证规则 const formRules = { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], gender: [{ required: true, message: '请选择性别', trigger: 'change' }], job: [{ required: true, message: '请选择职位', trigger: 'change' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], entrydate: [{ required: true, message: '请选择入职日期', trigger: 'change' }] }; // 对话框控制 const dialogVisible = ref(false); const dialogTitle = ref('新增员工'); const isEdit = ref(false); // 职位映射表 const jobMap = { 1: '班主任', 2: '讲师', 3: '学工主管', 4: '教研主管', 5: '咨询师' }; // 职位选项 const jobOptions = [ { label: '班主任', value: 1 }, { label: '讲师', value: 2 }, { label: '学工主管', value: 3 }, { label: '教研主管', value: 4 }, { label: '咨询师', value: 5 } ]; // 获取职位标签类型 const getJobTagType = (job) => { const types = ['', 'success', 'warning', 'danger', 'info', 'primary']; return types[job] || 'info'; }; // 获取数据 const fetchData = async () => { const params = { page: queryParams.pageNum, pageSize: queryParams.pageSize, name: queryParams.name, gender: queryParams.gender, job: queryParams.job, begin: queryParams.dateRange[0] || '', end: queryParams.dateRange[1] || '' }; try { const res = await apiClient.get('', { params }); if (res.data.code === 1) { tableData.value = res.data.data.rows.map(item => ({ ...item, // 格式化最后修改时间 updateTime: formatDateTime(item.updateTime) })); total.value = res.data.data.total; } else { ElMessage.error('获取数据失败:' + res.data.msg); } } catch (error) { console.error('请求出错:', error); ElMessage.error('网络请求失败,请检查后端是否运行正常'); } }; // 时间格式化函数 const formatDateTime = (dateTime) => { if (!dateTime) return ''; // 如果是字符串直接返回 if (typeof dateTime === 'string') { // 尝试解析ISO格式时间 try { const date = new Date(dateTime); return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(/\//g, '-'); } catch (e) { return dateTime; } } // 如果是Date对象或时间戳 const date = new Date(dateTime); return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(/\//g, '-'); }; // 显示新增对话框 const showAddDialog = () => { dialogTitle.value = '新增员工'; isEdit.value = false; Object.assign(form, { id: null, username: '', password: '', name: '', gender: null, job: null, image: '', entrydate: '' }); dialogVisible.value = true; }; // 显示编辑对话框 const handleEdit = (row) => { dialogTitle.value = '编辑员工'; isEdit.value = true; Object.assign(form, { ...row }); dialogVisible.value = true; }; // 提交表单 const submitForm = async () => { try { await formRef.value.validate(); if (isEdit.value) { await apiClient.put('', form); ElMessage.success('员工信息更新成功'); } else { await apiClient.post('', form); ElMessage.success('员工添加成功'); } dialogVisible.value = false; fetchData(); } catch (error) { if (error.name !== 'Error') { console.error('保存失败:', error); ElMessage.error('操作失败:' + (error.response?.data?.message || error.message)); } } }; // 删除员工 const handleDelete = async (id) => { try { await ElMessageBox.confirm(确认删除ID为 ${id} 的员工吗?, '删除确认', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }); await apiClient.delete(/${[id]}); ElMessage.success('删除成功'); fetchData(); } catch (error) { if (error !== 'cancel') { console.error('删除失败:', error); ElMessage.error('删除失败:' + (error.response?.data?.message || error.message)); } } }; // 批量删除 const batchDelete = async () => { if (selectedRows.value.length === 0) { ElMessage.warning('请至少选择一条记录'); return; } try { const ids = selectedRows.value.map(item => item.id); await ElMessageBox.confirm(确认删除选中的 ${ids.length} 条员工吗?, '批量删除确认', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }); await apiClient.delete(/${ids}); ElMessage.success(成功删除 ${ids.length} 条记录); fetchData(); } catch (error) { if (error !== 'cancel') { console.error('批量删除失败:', error); ElMessage.error('删除失败:' + (error.response?.data?.message || error.message)); } } }; // 表格选择监听 const handleSelectionChange = (rows) => { selectedRows.value = rows; }; // 处理分页大小变化 const handleSizeChange = (size) => { queryParams.pageSize = size; fetchData(); }; // 初始化加载数据 onMounted(() => { fetchData(); }); </script> <style scoped> /* 全局样式 */ .app-header { background-color: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); display: flex; align-items: center; padding: 0 20px; z-index: 1; } .app-title { margin: 0; font-size: 18px; font-weight: 600; color: #333; } .app-content { padding: 20px; background-color: #f0f2f5; height: calc(100vh - 60px); overflow-y: auto; } .query-section { background: #fff; padding: 20px; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .table-section { background: #fff; padding: 20px; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .pagination-section { display: flex; justify-content: center; background: #fff; padding: 15px 0; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .action-buttons { display: flex; justify-content: flex-end; } .form-actions { display: flex; justify-content: center; margin-top: 20px; } .avatar-preview { display: flex; justify-content: center; margin-top: 10px; } .el-avatar { background-color: #f5f7fa; display: flex; align-items: center; justify-content: center; } .el-avatar i { color: #909399; } /* 优化对话框样式 */ .el-dialog__body { padding: 20px 25px; } /* 调整操作列按钮间距 */ .el-table .el-button { margin: 0 5px; } /* 确保选择器宽度100% */ .el-select { width: 100%; } </style> 优化一下代码,使代码量更简洁, 重构一下数据表格,使数据表格更美观,现在操作的列后面留了一块空白区域数据表格未能铺满

<script setup lang="ts"> import { ref, reactive, onMounted, computed } from 'vue' import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus' import { queryPageApi, addApi, queryInfoApi, updateApi, deleteApi } from '@/api/clazz' // 类型定义 interface Clazz { id?: number name: string room: string beginDate: string endDate: string masterId: number | null subject: number masterName?: string status?: string } // 表单引用 const formRef = ref<FormInstance>() // 响应式数据 const loading = ref(false) const dialogVisible = ref(false) const dialogTitle = ref('新增班级') const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) const selectedIds = ref<number[]>([]) // 存储选中的班级ID // 查询条件 const queryParams = reactive({ begin: '', end: '', name: '', }) // 班级表单数据 const clazzForm = reactive<Clazz>({ name: '', room: '', beginDate: '', endDate: '', masterId: null, subject: 1, }) // 班级列表 const clazzList = ref<Clazz[]>([]) // 学科选项 const subjectOptions = [ { label: 'Java', value: 1 }, { label: '前端', value: 2 }, { label: '大数据', value: 3 }, { label: 'Python', value: 4 }, { label: 'Go', value: 5 }, { label: '嵌入式', value: 6 }, ] // 计算是否选择了班级 const hasSelection = computed(() => selectedIds.value.length > 0) // 加载班级数据 const loadClazzData = async () => { loading.value = true try { const res = await queryPageApi( queryParams.begin, queryParams.end, queryParams.name, currentPage.value, pageSize.value, ) if (res.code === 1) { clazzList.value = res.data.rows total.value = res.data.total // 重置选中状态 selectedIds.value = [] } else { ElMessage.error(res.msg || '数据加载失败') } } catch (error) { console.error('加载数据出错:', error) ElMessage.error('网络请求异常') } finally { loading.value = false } } // 处理查询 const handleQuery = () => { currentPage.value = 1 loadClazzData() } // 重置查询 const resetQuery = () => { queryParams.begin = '' queryParams.end = '' queryParams.name = '' handleQuery() } // 打开新增对话框 const openAddDialog = () => { dialogTitle.value = '新增班级' Object.assign(clazzForm, { id: undefined, name: '', room: '', beginDate: '', endDate: '', masterId: null, subject: 1, }) dialogVisible.value = true } // 打开编辑对话框 const openEditDialog = async (id: number) => { dialogTitle.value = '编辑班级' try { const res = await queryInfoApi(id) if (res.code === 1) { Object.assign(clazzForm, res.data) dialogVisible.value = true } else { ElMessage.error('获取班级信息失败') } } catch (error) { console.error('获取班级信息出错:', error) ElMessage.error('网络请求异常') } } // 提交表单 const submitForm = async () => { if (!formRef.value) return try { await formRef.value.validate() if (clazzForm.id) { // 更新 const res = await updateApi(clazzForm) if (res.code === 1) { ElMessage.success('更新成功') dialogVisible.value = false loadClazzData() } else { ElMessage.error(res.msg || '更新失败') } } else { // 新增 const res = await addApi(clazzForm) if (res.code === 1) { ElMessage.success('新增成功') dialogVisible.value = false loadClazzData() } else { ElMessage.error(res.msg || '新增失败') } } } catch (error) { console.error('表单验证失败:', error) } } // 处理选择变化 const handleSelectionChange = (selection: Clazz[]) => { selectedIds.value = selection.map((item) => item.id!) as number[] } // 删除班级(单个或批量) const handleDelete = (ids: number | number[]) => { const deleteIds = Array.isArray(ids) ? ids : [ids] const message = deleteIds.length > 1 ? 确定要删除选中的 ${deleteIds.length} 个班级吗? : '确定要删除该班级吗?' ElMessageBox.confirm(message, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }) .then(async () => { const res = await deleteApi(deleteIds) if (res.code === 1) { ElMessage.success('删除成功') loadClazzData() } else { ElMessage.error(res.msg || '删除失败') } }) .catch(() => {}) } // 分页变化处理 const handleSizeChange = (val: number) => { pageSize.value = val loadClazzData() } const handleCurrentChange = (val: number) => { currentPage.value = val loadClazzData() } // 初始化加载数据 onMounted(() => { loadClazzData() }) </script> <template> 班级管理 <el-form :model="queryParams" inline class="query-form"> <el-form-item label="班级名称"> <el-input v-model="queryParams.name" placeholder="请输入班级名称" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="开课时间"> <el-date-picker v-model="queryParams.begin" type="date" placeholder="选择开始日期" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item label="结课时间"> <el-date-picker v-model="queryParams.end" type="date" placeholder="选择结束日期" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery">查询</el-button> <el-button @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-button type="primary" @click="openAddDialog"> 新增班级 </el-button> <el-button type="danger" :disabled="!hasSelection" @click="handleDelete(selectedIds)"> 批量删除 </el-button> <el-table :data="clazzList" v-loading="loading" border stripe highlight-current-row @selection-change="handleSelectionChange" class="data-table" > <el-table-column type="selection" width="55" align="center" /> <el-table-column type="index" label="序号" width="80" align="center" /> <el-table-column prop="name" label="班级名称" min-width="150" align="center" /> <el-table-column prop="room" label="教室" width="120" align="center" /> <el-table-column prop="beginDate" label="开课时间" width="120" align="center" /> <el-table-column prop="endDate" label="结课时间" width="120" align="center" /> <el-table-column prop="masterName" label="班主任" width="120" align="center" /> <el-table-column label="学科" width="100" align="center"> <template #default="{ row }"> <el-tag effect="plain" type="info"> {{ subjectOptions.find((item) => item.value === row.subject)?.label || '未知' }} </el-tag> </template> </el-table-column> <el-table-column label="状态" width="100" align="center"> <template #default="{ row }"> <el-tag :type="row.status || '未开始'"> {{ row.status || '未开始' }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="180" align="center" fixed="right"> <template #default="{ row }"> <el-button type="primary" size="small" @click="openEditDialog(row.id)" ><el-icon><edit /></el-icon>编辑</el-button > <el-button type="danger" size="small" @click="handleDelete(row.id)" ><el-delete><edit /></el-delete>删除</el-button > </template> </el-table-column> </el-table> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" @closed="formRef?.resetFields()" > <el-form ref="formRef" :model="clazzForm" label-width="100px" :rules="{ name: [{ required: true, message: '请输入班级名称', trigger: 'blur' }], room: [{ required: true, message: '请输入教室', trigger: 'blur' }], beginDate: [{ required: true, message: '请选择开课时间', trigger: 'change' }], endDate: [{ required: true, message: '请选择结课时间', trigger: 'change' }], subject: [{ required: true, message: '请选择学科', trigger: 'change' }], }" > <el-form-item label="班级名称" prop="name"> <el-input v-model="clazzForm.name" placeholder="请输入班级名称" /> </el-form-item> <el-form-item label="教室" prop="room"> <el-input v-model="clazzForm.room" placeholder="请输入教室" /> </el-form-item> <el-form-item label="开课时间" prop="beginDate"> <el-date-picker v-model="clazzForm.beginDate" type="date" placeholder="选择开课日期" value-format="YYYY-MM-DD" style="width: 100%" /> </el-form-item> <el-form-item label="结课时间" prop="endDate"> <el-date-picker v-model="clazzForm.endDate" type="date" placeholder="选择结课日期" value-format="YYYY-MM-DD" style="width: 100%" /> </el-form-item> <el-form-item label="学科" prop="subject"> <el-select v-model="clazzForm.subject" placeholder="请选择学科" style="width: 100%"> <el-option v-for="item in subjectOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="班主任ID"> <el-input v-model.number="clazzForm.masterId" type="number" placeholder="请输入班主任ID" /> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确定</el-button> </template> </el-dialog> </template> <style scoped> .app-container { padding: 20px; background-color: #f5f7fa; } .header-container { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } .page-title { margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 1px solid #ebeef5; color: #303133; font-size: 18px; } .operation-container { display: flex; flex-direction: column; gap: 15px; } .query-form { display: flex; flex-wrap: wrap; gap: 10px; } .action-buttons { display: flex; gap: 10px; } .data-table { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } .pagination-container { display: flex; justify-content: flex-end; margin-top: 20px; padding: 15px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } .el-form-item { margin-bottom: 18px; } .el-table :deep(.el-table__cell) { padding: 12px 0; } .el-tag { font-weight: 500; } </style> 优化一下整体代码逻辑,使代码更简洁,优化一下样式,美化一下页面

<script setup lang="ts"> import { ref, reactive, onMounted } from 'vue' import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus' import { queryPageApi, addApi, queryInfoApi, updateApi, deleteApi } from '@/api/clazz' // 导入API方法 // 类型定义 interface Clazz { id?: number name: string room: string beginDate: string endDate: string masterId: number | null subject: number masterName?: string status?: string } // 表单引用 const formRef = ref<FormInstance>() // 响应式数据 const loading = ref(false) const dialogVisible = ref(false) const dialogTitle = ref('新增班级') const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) // 查询条件 const queryParams = reactive({ begin: '', end: '', name: '', }) // 班级表单数据 const clazzForm = reactive<Clazz>({ name: '', room: '', beginDate: '', endDate: '', masterId: null, subject: 1, }) // 班级列表 const clazzList = ref<Clazz[]>([]) // 学科选项 const subjectOptions = [ { label: 'Java', value: 1 }, { label: '前端', value: 2 }, { label: '大数据', value: 3 }, { label: 'Python', value: 4 }, { label: 'Go', value: 5 }, { label: '嵌入式', value: 6 }, ] // 加载班级数据 const loadClazzData = async () => { loading.value = true try { const res = await queryPageApi( queryParams.begin, queryParams.end, queryParams.name, currentPage.value, pageSize.value, ) if (res.code === 1) { clazzList.value = res.data.rows total.value = res.data.total } else { ElMessage.error(res.msg || '数据加载失败') } } catch (error) { console.error('加载数据出错:', error) ElMessage.error('网络请求异常') } finally { loading.value = false } } // 处理查询 const handleQuery = () => { currentPage.value = 1 loadClazzData() } // 重置查询 const resetQuery = () => { queryParams.begin = '' queryParams.end = '' queryParams.name = '' handleQuery() } // 打开新增对话框 const openAddDialog = () => { dialogTitle.value = '新增班级' Object.assign(clazzForm, { id: undefined, name: '', room: '', beginDate: '', endDate: '', masterId: null, subject: 1, }) dialogVisible.value = true } // 打开编辑对话框 const openEditDialog = async (id: number) => { dialogTitle.value = '编辑班级' try { const res = await queryInfoApi(id) if (res.code === 1) { Object.assign(clazzForm, res.data) dialogVisible.value = true } else { ElMessage.error('获取班级信息失败') } } catch (error) { console.error('获取班级信息出错:', error) ElMessage.error('网络请求异常') } } // 提交表单 const submitForm = async () => { if (!formRef.value) return try { await formRef.value.validate() if (clazzForm.id) { // 更新 const res = await updateApi(clazzForm) if (res.code === 1) { ElMessage.success('更新成功') dialogVisible.value = false loadClazzData() } else { ElMessage.error(res.msg || '更新失败') } } else { // 新增 const res = await addApi(clazzForm) if (res.code === 1) { ElMessage.success('新增成功') dialogVisible.value = false loadClazzData() } else { ElMessage.error(res.msg || '新增失败') } } } catch (error) { console.error('表单验证失败:', error) } } // 删除班级 const handleDelete = (id: number[]) => { ElMessageBox.confirm('确定要删除该班级吗?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }) .then(async () => { const res = await deleteApi(id) if (res.code === 1) { ElMessage.success('删除成功') loadClazzData() } else { ElMessage.error(res.msg || '删除失败') } }) .catch(() => {}) } // 分页变化处理 const handleSizeChange = (val: number) => { pageSize.value = val loadClazzData() } const handleCurrentChange = (val: number) => { currentPage.value = val loadClazzData() } // 初始化加载数据 onMounted(() => { loadClazzData() }) </script> <template> <el-form :model="queryParams" inline> <el-form-item label="班级名称"> <el-input v-model="queryParams.name" placeholder="请输入班级名称" clearable /> </el-form-item> <el-form-item label="开课时间"> <el-date-picker v-model="queryParams.begin" type="date" placeholder="选择开始日期" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item label="结课时间"> <el-date-picker v-model="queryParams.end" type="date" placeholder="选择结束日期" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery">查询</el-button> <el-button @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-button type="primary" @click="openAddDialog">新增班级</el-button> <el-table :data="clazzList" v-loading="loading" border> <el-table-column type="index" label="序号" width="80" align="center" /> <el-table-column prop="name" label="班级名称" min-width="150" /> <el-table-column prop="room" label="教室" width="120" align="center" /> <el-table-column prop="beginDate" label="开课时间" width="120" align="center" /> <el-table-column prop="endDate" label="结课时间" width="120" align="center" /> <el-table-column prop="masterName" label="班主任" width="120" align="center" /> <el-table-column label="学科" width="100" align="center"> <template #default="{ row }"> {{ subjectOptions.find((item) => item.value === row.subject)?.label || '未知' }} </template> </el-table-column> <el-table-column prop="status" label="状态" width="100" align="center" /> <el-table-column label="操作" width="150" align="center" fixed="right"> <template #default="{ row }"> <el-button type="primary" size="small" @click="openEditDialog(row.id)">编辑</el-button> <el-button type="danger" size="small" @click="handleDelete(row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" @closed="formRef?.resetFields()" > <el-form ref="formRef" :model="clazzForm" label-width="100px" :rules="{ name: [{ required: true, message: '请输入班级名称', trigger: 'blur' }], room: [{ required: true, message: '请输入教室', trigger: 'blur' }], beginDate: [{ required: true, message: '请选择开课时间', trigger: 'change' }], endDate: [{ required: true, message: '请选择结课时间', trigger: 'change' }], subject: [{ required: true, message: '请选择学科', trigger: 'change' }], }" > <el-form-item label="班级名称" prop="name"> <el-input v-model="clazzForm.name" placeholder="请输入班级名称" /> </el-form-item> <el-form-item label="教室" prop="room"> <el-input v-model="clazzForm.room" placeholder="请输入教室" /> </el-form-item> <el-form-item label="开课时间" prop="beginDate"> <el-date-picker v-model="clazzForm.beginDate" type="date" placeholder="选择开课日期" value-format="YYYY-MM-DD" style="width: 100%" /> </el-form-item> <el-form-item label="结课时间" prop="endDate"> <el-date-picker v-model="clazzForm.endDate" type="date" placeholder="选择结课日期" value-format="YYYY-MM-DD" style="width: 100%" /> </el-form-item> <el-form-item label="学科" prop="subject"> <el-select v-model="clazzForm.subject" placeholder="请选择学科" style="width: 100%"> <el-option v-for="item in subjectOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="班主任ID"> <el-input v-model.number="clazzForm.masterId" type="number" placeholder="请输入班主任ID" /> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确定</el-button> </template> </el-dialog> </template> <style scoped> .app-container { padding: 20px; } .mb-4 { margin-bottom: 16px; } .mt-4 { margin-top: 16px; } </style> import request from ‘@/utils/request’ import type { ResultModel } from ‘./model/model’ // 分页条件查询 export const queryPageApi = ( begin: string, end: string, name: string, page: number, pageSize: number, ) => request.get<any, ResultModel>( /clazzs?begin=${begin}&end=${end}&name=${name}&page=${page}&pageSize=${pageSize}, ) // 新增班级 export const addApi = (clazz: any) => request.post<any, ResultModel>(‘/clazzs’, clazz) // 根据ID查询班级 export const queryInfoApi = (id: number) => request.get<any, ResultModel>(/clazzs/${id}) // 更新班级 export const updateApi = (clazz: any) => request.put<any, ResultModel>(/clazzs, clazz) // 批量删除班级 export const deleteApi = (ids: number[]) => request.delete<any, ResultModel>('/clazzs', { params: { ids: ids.join(',') } }) // 查询全部班级信息 export const queryAllApi = () => request.get<any, ResultModel>(‘/clazzs/list’) 根据api优化一下项目优化一下班级表格, 美化一下页面效果,增加批量删除功能

最新推荐

recommend-type

《门户网站对比》.ppt

《门户网站对比》.ppt
recommend-type

C++实现的DecompressLibrary库解压缩GZ文件

根据提供的文件信息,我们可以深入探讨C++语言中关于解压缩库(Decompress Library)的使用,特别是针对.gz文件格式的解压过程。这里的“lib”通常指的是库(Library),是软件开发中用于提供特定功能的代码集合。在本例中,我们关注的库是用于处理.gz文件压缩包的解压库。 首先,我们要明确一个概念:.gz文件是一种基于GNU zip压缩算法的压缩文件格式,广泛用于Unix、Linux等操作系统上,对文件进行压缩以节省存储空间或网络传输时间。要解压.gz文件,开发者需要使用到支持gzip格式的解压缩库。 在C++中,处理.gz文件通常依赖于第三方库,如zlib或者Boost.IoStreams。codeproject.com是一个提供编程资源和示例代码的网站,程序员可以在该网站上找到现成的C++解压lib代码,来实现.gz文件的解压功能。 解压库(Decompress Library)提供的主要功能是读取.gz文件,执行解压缩算法,并将解压缩后的数据写入到指定的输出位置。在使用这些库时,我们通常需要链接相应的库文件,这样编译器在编译程序时能够找到并使用这些库中定义好的函数和类。 下面是使用C++解压.gz文件时,可能涉及的关键知识点: 1. Zlib库 - zlib是一个用于数据压缩的软件库,提供了许多用于压缩和解压缩数据的函数。 - zlib库支持.gz文件格式,并且在多数Linux发行版中都预装了zlib库。 - 在C++中使用zlib库,需要包含zlib.h头文件,同时链接z库文件。 2. Boost.IoStreams - Boost是一个提供大量可复用C++库的组织,其中的Boost.IoStreams库提供了对.gz文件的压缩和解压缩支持。 - Boost库的使用需要下载Boost源码包,配置好编译环境,并在编译时链接相应的Boost库。 3. C++ I/O操作 - 解压.gz文件需要使用C++的I/O流操作,比如使用ifstream读取.gz文件,使用ofstream输出解压后的文件。 - 对于流操作,我们常用的是std::ifstream和std::ofstream类。 4. 错误处理 - 解压缩过程中可能会遇到各种问题,如文件损坏、磁盘空间不足等,因此进行适当的错误处理是必不可少的。 - 正确地捕获异常,并提供清晰的错误信息,对于调试和用户反馈都非常重要。 5. 代码示例 - 从codeproject找到的C++解压lib很可能包含一个或多个源代码文件,这些文件会包含解压.gz文件所需的函数或类。 - 示例代码可能会展示如何初始化库、如何打开.gz文件、如何读取并处理压缩数据,以及如何释放资源等。 6. 库文件的链接 - 编译使用解压库的程序时,需要指定链接到的库文件,这在不同的编译器和操作系统中可能略有不同。 - 通常,在编译命令中加入-l参数,比如使用g++的话可能是`g++ -o DecompressLibrary DecompressLibrary.cpp -lz`,其中`-lz`表示链接zlib库。 7. 平台兼容性 - 在不同平台上使用解压库可能需要考虑平台兼容性问题。 - Windows系统可能需要额外的配置和库文件,因为zlib或其他库可能不是默认预装的。 根据以上知识点,我们可以得出,在C++中解压.gz文件主要涉及到对zlib或类似库的使用,以及熟悉C++的I/O操作。正确使用这些库,能够有效地对压缩文件进行解压,并处理可能出现的错误情况。如果从codeproject获取到的C++解压lib确实是针对.gz文件格式的,那么它很可能已经封装好了大部分的操作细节,让开发者能够以更简单的方式实现解压功能。
recommend-type

【数据融合技术】:甘肃土壤类型空间分析中的专业性应用

# 摘要 数据融合技术作为一种集成多源数据信息的方法,在土壤类型空间分析中发挥着关键作用。本文介绍了数据融合技术的基本概念及其理论基础,阐述了数据预处理、同步整合及冲突解决等关键技术,并详细描述了甘肃土壤类型数据准备的流程,包括数据采集、质量评估、空间化处理及融合实践准备。通过具体案例分析,展示了数据融合在土壤类型空间分布分析、土壤质量评估及土壤保护规划中的应用。同时,文
recommend-type

VM ware如何查看软件版本信息

<think>首先,用户的问题是:“我想查找VMware软件版本信息的查看方法请问如何在VMware中查看软件版本信息”。用户参考了之前的引用,但那些引用主要是关于查看VMware版本的一般方法,现在用户具体想知道在VMware软件中如何查看版本信息。回顾之前的对话:-用户第一次问的是VSCode的版本查看方法。-现在用户问的是VMware的版本查看方法。-系统级指令要求使用中文回答,正确格式化数学表达式(如果需要),但这里可能不需要数学表达式。-指令还要求生成相关问题,并在回答中引用段落时添加引用标识。用户提供的引用[1]到[5]是关于VMware版本的查看方法、下载等,但用户特别强调“参考
recommend-type

数据库课程设计报告:常用数据库综述

数据库是现代信息管理的基础,其技术广泛应用于各个领域。在高等教育中,数据库课程设计是一个重要环节,它不仅是学习理论知识的实践,也是培养学生综合运用数据库技术解决问题能力的平台。本知识点将围绕“经典数据库课程设计报告”展开,详细阐述数据库的基本概念、课程设计的目的和内容,以及在设计报告中常用的数据库技术。 ### 1. 数据库基本概念 #### 1.1 数据库定义 数据库(Database)是存储在计算机存储设备中的数据集合,这些数据集合是经过组织的、可共享的,并且可以被多个应用程序或用户共享访问。数据库管理系统(DBMS)提供了数据的定义、创建、维护和控制功能。 #### 1.2 数据库类型 数据库按照数据模型可以分为关系型数据库(如MySQL、Oracle)、层次型数据库、网状型数据库、面向对象型数据库等。其中,关系型数据库因其简单性和强大的操作能力而广泛使用。 #### 1.3 数据库特性 数据库具备安全性、完整性、一致性和可靠性等重要特性。安全性指的是防止数据被未授权访问和破坏。完整性指的是数据和数据库的结构必须符合既定规则。一致性保证了事务的执行使数据库从一个一致性状态转换到另一个一致性状态。可靠性则保证了系统发生故障时数据不会丢失。 ### 2. 课程设计目的 #### 2.1 理论与实践结合 数据库课程设计旨在将学生在课堂上学习的数据库理论知识与实际操作相结合,通过完成具体的数据库设计任务,加深对数据库知识的理解。 #### 2.2 培养实践能力 通过课程设计,学生能够提升分析问题、设计解决方案以及使用数据库技术实现这些方案的能力。这包括需求分析、概念设计、逻辑设计、物理设计、数据库实现、测试和维护等整个数据库开发周期。 ### 3. 课程设计内容 #### 3.1 需求分析 在设计报告的开始,需要对项目的目标和需求进行深入分析。这涉及到确定数据存储需求、数据处理需求、数据安全和隐私保护要求等。 #### 3.2 概念设计 概念设计阶段要制定出数据库的E-R模型(实体-关系模型),明确实体之间的关系。E-R模型的目的是确定数据库结构并形成数据库的全局视图。 #### 3.3 逻辑设计 基于概念设计,逻辑设计阶段将E-R模型转换成特定数据库系统的逻辑结构,通常是关系型数据库的表结构。在此阶段,设计者需要确定各个表的属性、数据类型、主键、外键以及索引等。 #### 3.4 物理设计 在物理设计阶段,针对特定的数据库系统,设计者需确定数据的存储方式、索引的具体实现方法、存储过程、触发器等数据库对象的创建。 #### 3.5 数据库实现 根据物理设计,实际创建数据库、表、视图、索引、触发器和存储过程等。同时,还需要编写用于数据录入、查询、更新和删除的SQL语句。 #### 3.6 测试与维护 设计完成之后,需要对数据库进行测试,确保其满足需求分析阶段确定的各项要求。测试过程包括单元测试、集成测试和系统测试。测试无误后,数据库还需要进行持续的维护和优化。 ### 4. 常用数据库技术 #### 4.1 SQL语言 SQL(结构化查询语言)是数据库管理的国际标准语言。它包括数据查询、数据操作、数据定义和数据控制四大功能。SQL语言是数据库课程设计中必备的技能。 #### 4.2 数据库设计工具 常用的数据库设计工具包括ER/Studio、Microsoft Visio、MySQL Workbench等。这些工具可以帮助设计者可视化地设计数据库结构,提高设计效率和准确性。 #### 4.3 数据库管理系统 数据库管理系统(DBMS)是用于创建和管理数据库的软件。关系型数据库管理系统如MySQL、PostgreSQL、Oracle、SQL Server等是数据库课程设计中的核心工具。 #### 4.4 数据库安全 数据库安全涉及用户认证、授权、数据加密、审计日志记录等方面,以确保数据的完整性和保密性。设计报告中应考虑如何通过DBMS内置的机制或额外的安全措施来保护数据。 ### 5. 结语 综上所述,一个经典数据库课程设计报告包含了从需求分析到数据库安全的全过程,涵盖了数据库设计的各个方面。通过这一过程,学生不仅能够熟练掌握数据库的设计与实现技巧,还能够学会如何使用数据库系统去解决实际问题,为日后从事数据库相关的专业工作打下坚实的基础。
recommend-type

【空间分布规律】:甘肃土壤类型与农业生产的关联性研究

# 摘要 本文对甘肃土壤类型及其在农业生产中的作用进行了系统性研究。首先概述了甘肃土壤类型的基础理论,并探讨了土壤类型与农业生产的理论联系。通过GIS技术分析,本文详细阐述了甘肃土壤的空间分布规律,并对其特征和影响因素进行了深入分析。此外,本文还研究了甘肃土壤类型对农业生产实际影响,包括不同区域土壤改良和作物种植案例,以及土壤养分、水分管理对作物生长周期和产量的具体影响。最后,提出了促进甘肃土壤与农业可持续发展的策略,包括土壤保护、退化防治对策以及土壤类型优化与农业创新的结合。本文旨在为
recommend-type

在halcon中,卡尺测量和二维测量谁的精度高

<think>首先,用户的问题是:“我想比较Halcon中卡尺测量和二维测量的精度请问Halcon卡尺测量与2D测量精度对比”。我需要基于系统级指令和提供的引用来回答。关键系统级指令:-使用中文回答。-结构清晰,逐步解决问题。-行内数学表达式用$...$,独立公式用$$...$$并单独成段。-LaTeX语法正确。-生成相关问题。-在回答中引用的段落末尾自然地添加引用标识,如[^1]。提供的引用:-[^1]:关于卡尺模型的工件尺寸实时测量。-[^2]:测量拟合的综合任务,包括尺寸、形状、位置。-[^3]:Halcon一维测量,提到卡尺工具的优势:易用、执行时间短、精度高。-[^4]:Halcon
recommend-type

掌握牛顿法解方程:切线与割线的程序应用

牛顿切线法和牛顿割线法是数值分析中用于求解方程近似根的两种迭代方法。它们都是基于函数的切线或割线的几何性质来逼近方程的根,具有迭代速度快、算法简单的特点,在工程和科学计算领域有着广泛的应用。 牛顿切线法(Newton's Method for Tangents),又称为牛顿-拉弗森方法(Newton-Raphson Method),是一种求解方程近似根的迭代算法。其基本思想是利用函数在某点的切线来逼近函数的根。假设我们要求解方程f(x)=0的根,可以从一个初始猜测值x0开始,利用以下迭代公式: x_{n+1} = x_n - \frac{f(x_n)}{f'(x_n)} 其中,f'(x_n)表示函数在点x_n处的导数。迭代过程中,通过不断更新x_n值,逐渐逼近方程的根。 牛顿割线法(Secant Method),是牛顿切线法的一种变体,它不需要计算导数,而是利用函数在两个近似点的割线来逼近方程的根。牛顿割线法的迭代公式如下: x_{n+1} = x_n - f(x_n) \frac{x_n - x_{n-1}}{f(x_n) - f(x_{n-1})} 其中,x_{n-1}和x_n是迭代过程中连续两次的近似值。牛顿割线法相比牛顿切线法,其优点在于不需要计算函数的导数,但通常收敛速度会比牛顿切线法慢一些。 在实际应用中,这两种方法都需要注意迭代的起始点选择,否则可能会导致迭代过程不收敛。同时,这两种方法都是局部收敛方法,即它们只能保证在初始点附近有足够的近似根时才收敛。 关于例题和程序,牛顿切线法和牛顿割线法都可以通过编程实现。通常在编程实现时,需要输入函数的表达式、初始猜测值、迭代次数限制以及误差容忍度等参数。程序会根据这些输入,通过循环迭代计算,直到满足误差容忍度或达到迭代次数限制为止。 在编程实现过程中,需要注意以下几点: 1. 初始猜测值的选择对迭代的收敛性有较大影响,需要根据具体问题来合理选择。 2. 当迭代过程中遇到函数值或导数值过大、过小,或者分母趋近于零时,需要进行适当的数值处理,以避免数值不稳定或除以零的错误。 3. 对于不同的方程和函数,可能需要选择不同的迭代终止条件,如设定一个误差值或迭代次数上限。 牛顿法(包含牛顿切线法和牛顿割线法)是一类非常强大的数值解法,尤其适用于求解非线性方程,其基本原理和程序实现的知识点在理工科的许多领域都有着广泛的应用,是数值分析领域的一个基石。 请注意,本知识点仅涵盖标题和描述中提到的内容,压缩包子文件列表中的信息并未提供,因此无法提供相关内容的知识点。
recommend-type

【制图技术】:甘肃高质量土壤分布TIF图件的成图策略

# 摘要 本文针对甘肃土壤分布数据的TIF图件制作进行了系统研究。首先概述了甘肃土壤的分布情况,接着介绍了TIF图件的基础知识,包括其格式特点、空间数据表达以及质量控制方法。随后,文中构建了成图策略的理论框架,分析了土壤分布图的信息需求与数据处理流程,并探讨了成图原则与标准。在实践操作部分,详细阐述了制图软
recommend-type

GaAs外延设备维修是指什么意思

<think>嗯,用户想了解GaAs外延设备维修的定义和技术背景。这个问题涉及半导体制造领域的专业知识,需要准确解释核心概念并梳理技术要点。 首先明确GaAs外延设备指用于砷化镓材料外延生长的设备,常见于MBE和MOCVD系统。维修定义应包含预防性维护和故障修复两个维度。技术背景方面需要覆盖外延工艺特点对设备的影响,比如高真空环境要求、温度控制精度等关键参数。 网络检索显示GaAs外延设备维修的核心在于维持晶体生长环境的稳定性。常见维护点包括:反应室清洁(防止砷沉积物积累)、源材料补给系统校准(确保III/V族元素比例精确)、真空泵组维护(维持10⁻⁸Torr级真空度)。技术难点在于处理剧