在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效

在Vue项目中使用ElementUI的Input组件时,发现v-model.trim会导致输入时无法输入空格。通过分析,了解到这是由于Element的Input不支持v-model.trim。为了解决这个问题,可以改用@blur事件结合JavaScript的trim方法,在失去焦点时去除首尾空格。示例代码展示了如何在不使用修饰符.trim的情况下实现这一功能。

在vue项目里使用element ui组件库,你会发现使用element的input框,如果在v-model上加.trim修饰符,得到的内容是去除了前后空白的,但是在输入数据的时候没法按空格键输入空格,这让录数据的人非常难受。分析不能输入空格的原因就是,element的input框不支持v-model.trim的写法,如图:

了解原因以后,想解决去除输入值前后空白又能输入空格的问题就清楚很多了,我现在的写法是这样的,不用修饰符.trim,使用js的trim方法,在el-input的@blur事件中去除首尾空格:

 

代码:

<el-form-item label="名称:" class="postInfo-container-item">
   <el-input
     placeholder="请输入内容"
     v-model="searchData.name"
     @blur="searchData.name=$event.target.value.trim()"
     clearable
     maxlength="50"
     show-word-limit
    >
    </el-input>
</el-form-item>

 

<template> <div class="unit"> <!-- 搜索区域 --> <div class="search-container"> <el-input v-model="searchForm.communityname" placeholder="小区名称" class="first-input" @keyup.enter.native="handleSearch" :maxlength="50" ></el-input> <el-input v-model="searchForm.unitname" placeholder="单元名称" class="second-input" @keyup.enter.native="handleSearch" :maxlength="50" ></el-input> <el-date-picker v-model="searchForm.createtime" align="right" type="date" placeholder="建设时间" :picker-options="pickerOptions" class="day" @change="handleDateChange" ></el-date-picker> <el-select v-model="searchForm.unitstatus" placeholder="选择状态" class="choose" @change="handleStatusChange" > <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> <el-button type="primary" icon="el-icon-search" class="search" @click="handleSearch" :loading="searchLoading" ></el-button> <el-button type="primary" icon="el-icon-plus" class="entry" @click="handleAdd" >录入</el-button > <el-button type="warning" icon="el-icon-refresh-right" class="reset" @click="handleReset" >重置</el-button > </div> <!-- 表格区域 --> <el-table :data="tableData" border stripe class="table-container" v-loading="loading" element-loading-text="正在加载数据..." > <el-table-column prop="communityname" label="小区名称" align="center" min-width="120" ></el-table-column> <el-table-column prop="unitname" label="单元名称" align="center" min-width="120" ></el-table-column> <el-table-column prop="unitnum" label="栋数" align="center" min-width="80" ></el-table-column> <el-table-column label="建设时间" align="center" min-width="160" > <template slot-scope="scope"> {{ formatDateTime(scope.row.createtime) }} </template> </el-table-column> <el-table-column prop="unitstatus" label="状态" align="center" min-width="100" > <template slot-scope="scope"> <el-tag :type="scope.row.unitstatus === 1 ? 'success' : 'warning'" > {{ scope.row.unitstatus === 1 ? '已建成' : '未建成' }} </el-tag> </template> </el-table-column> <el-table-column label="操作" align="center" min-width="160"> <template slot-scope="scope"> <el-button type="text" @click="handleDetail(scope.row)" class="detail-btn" >详情</el-button > <el-button type="text" @click="handleArchive(scope.row)" class="archive-btn" >归档</el-button > </template> </el-table-column> </el-table> <!-- 分页区域 --> <div class="pagination-container" v-if="total > 0"> <el-pagination background :current-page="pagination.currentPage" :page-size="pagination.pageSize" :total="total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination> </div> <!-- 空状态提示 --> <div v-else-if="!loading && total === 0" class="empty-state"> <el-empty description="暂无符合条件的数据"></el-empty> </div> </div> </template> <script> export default { data() { return { // 搜索表单数据 searchForm: { communityname: "", unitname: "", unitnum: "", createtime: "", unitstatus: "", }, statusOptions: [ { value: 1, label: "已建成" }, { value: 2, label: "未建成" }, ], // 表格数据 tableData: [], // 加载状态 loading: false, // 搜索按钮加载状态 searchLoading: false, // 分页信息 pagination: { currentPage: 1, pageSize: 10, }, // 总条数 total: 0, // 日期选择器配置 pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, shortcuts: [ { text: "今天", onClick(picker) { picker.$emit("pick", new Date()); }, }, { text: "昨天", onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit("pick", date); }, }, { text: "一周前", onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", date); }, }, ], }, }; }, created() { this.fetchTableData(); }, methods: { formatDateTime(isoString) { if (!isoString) return ''; const date = new Date(isoString); const year = date.getFullYear(); const month = this.padZero(date.getMonth() + 1); const day = this.padZero(date.getDate()); const hours = this.padZero(date.getHours()); const minutes = this.padZero(date.getMinutes()); const seconds = this.padZero(date.getSeconds()); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }, padZero(num) { return num < 10 ? `0${num}` : num; }, fetchTableData() { this.loading = true; const searchDate = this.searchForm.createtime ? this.formatDateForSearch(this.searchForm.createtime) : ''; const params = { currPage: this.pagination.currentPage - 1, pageNum: this.pagination.pageSize, communityname: this.searchForm.communityname.trim(), // 去除首尾空格 unitname: this.searchForm.unitname.trim(), unitnum: this.searchForm.unitnum, createtime: searchDate, unitstatus: this.searchForm.unitstatus }; this.$axios.get("http://community.byesame.com/house/gethouseList", { params }) .then((res) => { this.loading = false; this.searchLoading = false; this.tableData = res.data.data || []; this.total = res.data.total || 0; }) .catch((err) => { this.loading = false; this.searchLoading = false; console.error("接口请求失败:", err); this.$message.error("网络错误,无法获取数据"); this.tableData = []; this.total = 0; }); }, formatDateForSearch(date) { if (!date) return ''; if (date instanceof Date) { const year = date.getFullYear(); const month = this.padZero(date.getMonth() + 1); const day = this.padZero(date.getDate()); return `${year}-${month}-${day}`; } return date; }, handleArchive(row) { this.$confirm( `确定要将【${row.communityname}-${row.unitname}】归档吗?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", } ) .then(() => { this.loading = true; this.$axios .post("http://community.byesame.com/house/archiveUnit", { id: row.id }) .then((res) => { this.loading = false; if (res.data.code === 200) { this.$message.success("归档成功"); this.fetchTableData(); } else { this.$message.error(res.data.message || "归档失败"); } }) .catch((err) => { this.loading = false; console.error("归档失败:", err); this.$message.error("归档操作失败"); }); }) .catch(() => { this.$message.info("已取消归档"); }); }, handleSearch() { // 简单验证 if (this.searchForm.communityname.length > 50) { this.$message.warning("小区名称不能超过50个字符"); return; } if (this.searchForm.unitname.length > 50) { this.$message.warning("单元名称不能超过50个字符"); return; } this.searchLoading = true; this.pagination.currentPage = 1; this.fetchTableData(); }, handleReset() { this.searchForm = { communityname: "", unitname: "", unitnum: "", createtime: "", unitstatus: "", }; this.pagination.currentPage = 1; this.fetchTableData(); }, handleAdd() { this.$emit("openAddDialog"); }, handleDetail(row) { this.$emit("openDetailDialog", row); }, handleSizeChange(val) { this.pagination.pageSize = val; this.fetchTableData(); }, handleCurrentChange(val) { this.pagination.currentPage = val; this.fetchTableData(); }, // 日期选择后自动搜索 handleDateChange() { this.handleSearch(); }, // 状态选择后自动搜索 handleStatusChange() { this.handleSearch(); } }, }; </script> <style lang='scss' scoped> .search-container { margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .first-input, .second-input, .day, .choose { width: 263px; } /* 移除冗余的margin-left设置,使用gap统一控制间距 */ .search { margin-left: 10px; width: 43.6px; height: 36px; } .entry, .reset { width: 116.78px; height: 36px; font-size: 14px; } .entry { background-color: #67c23a; border-color: #67c23a; } .table-container { width: 100%; margin-bottom: 20px; } .pagination-container { display: flex; justify-content: flex-end; align-items: center; padding: 10px 0; } .detail-btn { color: #409eff; margin-right: 10px; } .archive-btn { color: #fa5555; } .empty-state { margin: 50px 0; text-align: center; } /* 响应式调整 */ @media (max-width: 1200px) { .first-input, .second-input, .day, .choose { width: 220px; } } @media (max-width: 992px) { .first-input, .second-input, .day, .choose { width: calc(50% - 15px); } .search, .entry, .reset { width: calc(33.33% - 10px); margin-left: 0; } } </style>我现在能实现当我点击上一页或者下一页的时候,列表面的内容会发生改变,但是当我点击搜索的时候,列表面的数据不会更新成我搜索的数据,帮我实现搜索的功能
最新发布
10-03
<!-- 补课 --> <template> <div class="page-content" v-loading="loading"> <el-card class="search-card"> <el-form-item label="上课日期:"> <el-radio-group class="custom-radio-group" @change="getData" v-model="query.timeType"> <el-radio-button label="不限" :value="-1" /> <el-radio-button label="本周" :value="1" /> <el-radio-button label="本月" :value="2" /> <el-radio-button label="上月" :value="3" /> <el-radio-button label="自定义" :value="4" /> </el-radio-group> </el-form-item> <el-divider border-style="dashed" class="query-split-line" /> <el-form-item label="补课状态:"> <el-radio-group class="custom-radio-group" @change="getData" v-model="query.makeupStatus"> <el-radio-button label="不限" :value="-1" /> <el-radio-button label="已补课" :value="1" /> <el-radio-button label="未补课" :value="0" /> </el-radio-group> </el-form-item> <el-divider border-style="dashed" v-if="showMore" class="query-split-line" /> <el-form-item label="更多筛选:" class="more-filter" v-show="showMore"> <el-select placeholder="授课模式" clearable v-model="query.teachType" @change="getData"> <el-option label="班课" :value="1" /> <el-option label="1对1" :value="2" /> </el-select> <CampusSelect placeholder="校区" multiple @change="getData" clearable v-model="query.campusIds" /> <GradeSelect placeholder="年级" multiple @change="getData" clearable v-model="query.grades" /> <SubjectSelect placeholder="科目" multiple @change="getData" clearable v-model="query.subjectIds" /> <CourseTypeSelect placeholder="课程类型" v-model="query.courseTypeIds" clearable multiple @change="getData" /> <TeacherSelect placeholder="请选择老师" @change="getData" clearable v-model="query.teacherId" filterable /> <TeacherSelect placeholder="请选择教务" @change="getData" clearable v-model="query.assistantId" filterable /> <DatePicker transfer type="daterange" placeholder="补课日期" :value="query.makeupDateRange" style="width: 200px" @on-change="onMakeupDateRangeChange" /> <el-select placeholder="上课时间段" /> <el-select placeholder="上课教室" @change="getData" /> </el-form-item> <el-divider border-style="dashed" class="cursor-pointer query-split-line" @click="showMore = !showMore"> {{ showMore ? "收起" : "更多筛选" }} <el-icon> <ArrowUp v-if="showMore" /> <ArrowDown v-else /> </el-icon> </el-divider> </el-card> <el-card> <div class="flex justify-between text-sm mb4"> <div class="flex gap-1"> 共 <strong>{{ total }}</strong> 条班级记录 </div> <!--查询--> <div class="flex gap-3"> <el-input placeholder="输入学生关键字查询" v-model="input" @change="getData" class="input-with-select"> <template #prepend> <el-select v-model="selectType" style="width: 80px"> <el-option label="课程" value="course" /> <el-option label="班级" value="class" /> <el-option label="学生" value="student" /> </el-select> </template> </el-input> <!--批量操作--> <el-dropdown @command="(command: string) => handleMakeupAction(selectedRows, command)"> <el-button class="batch-action-btn"> 批量操作 <el-icon><arrow-down /></el-icon> </el-button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item @click="handleBatchMakeup">直接补课</el-dropdown-item> <el-dropdown-item command="in-class">插班补课</el-dropdown-item> <el-dropdown-item command="cancel">取消补课</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </div> <SelectionTable ref="tableRef" :data="tableData" header-cell-class-name="table-header" border v-model="selectedRows"> <el-table-column label="上课日期" show-overflow-tooltip min-width="180"> <template #default="scope">{{ moment(scope.row.date).format("YYYY-MM-DD ") }}</template> </el-table-column> <el-table-column label="上课时间" show-overflow-tooltip min-width="180" prop="classItem.classTime" /> <el-table-column label="ID" show-overflow-tooltip min-width="100" prop="student.id" /> <el-table-column label="班级" show-overflow-tooltip min-width="300" prop="classGroup.name" /> <el-table-column label="学员" show-overflow-tooltip min-width="100" prop="student.name" /> <el-table-column label="老师" show-overflow-tooltip min-width="100"> <template #default="scope"> {{ getNames(scope.row.classItem.teachers).join(",") }} </template> </el-table-column> <el-table-column label="教务" show-overflow-tooltip min-width="100"> <template #default="scope"> {{ getNames(scope.row.classGroup.assistants).join(",") }} </template> </el-table-column> <el-table-column label="考勤状态" width="100"> <template #default="scope"> <el-tag v-if="scope.row.classItem.status == 1" type="success">出勤</el-tag> <el-tag v-else-if="scope.row.classItem.status == 2" type="warning">请假</el-tag> <el-tag v-else-if="scope.row.classItem.status == 3" type="danger">缺勤</el-tag> <el-tag v-else type="info">未知</el-tag> </template> </el-table-column> <el-table-column label="补课状态" width="100"> <template #default="scope"> <el-tag v-if="scope.row.makeupStatus == 0" type="info">未补课</el-tag> <el-tag v-else-if="scope.row.makeupStatus == 1" type="success">已补课</el-tag> </template> </el-table-column> <el-table-column label="补课类型" width="100"> <template #default="scope"> <el-tag v-if="scope.row.makeupType == MakeupType.Direct" type="success">直接补课</el-tag> <el-tag v-else-if="scope.row.makeupType == MakeupType.MakeupInOtherClass" type="success">插班补课</el-tag> </template> </el-table-column> <el-table-column label="补课老师" width="100"> <template #default="scope"> {{ getNames([scope.row.teacherId]).join(",") }} </template> </el-table-column> <el-table-column label="补课日期" width="100" prop="makeupDate"> <template #default="scope"> {{ scope.row.makeupDate ? moment(scope.row.makeupDate).format("YYYY-MM-DD") : "" }} </template> </el-table-column> <el-table-column label="备注" show-overflow-tooltip width="120" prop="remark" /> <el-table-column label="操作" width="80" fixed="right"> <template #default="{ row }"> <el-dropdown trigger="click"> <span class="more-action"> 更多 <el-icon class="arrow-icon"><ArrowDown /></el-icon> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-if="row.makeupStatus === 0" @click="handleMakeup(row)">直接补课</el-dropdown-item> <el-dropdown-item v-if="row.makeupStatus === 0" @click="handleMakeupAction">插班补课</el-dropdown-item> <el-dropdown-item v-if="row.makeupStatus === 1" @click="cancelMakeup([row])">取消补课</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> </el-table-column> </SelectionTable> </el-card> <!--直接补课对话框--> <el-dialog v-model="directMakeup" title="直接补课" width="600px" destroy-on-close> <el-form :model="form" label-position="top" ref="formRef" :rules="rules"> <el-form-item label="补课老师" prop="teacherId"> <TeacherSelect v-model="form.teacherId" filterable clearable placeholder="请选择老师" /> </el-form-item> <el-form-item label="补课日期" prop="makeupDate"> <el-date-picker v-model="form.makeupDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择补课日期" style="width: 40%" /> </el-form-item> <el-form-item label="补课时间段" prop="makeUpTimeRange"> <TimePicker confirm type="timerange" :value="form.makeUpTimeRange" @on-change="onTimeRangeChange" placeholder="请选择上课时段" :steps="[1, 15]" :format="timeFormat" /> </el-form-item> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" placeholder="请填写备注" type="textarea" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" :disabled="loading" @click="handleConfirmMakeup">确定</el-button> <el-button @click="handleDialogClose">取消</el-button> </div> </template> </el-dialog> <!--插班补课对话框--> <el-dialog v-model="inclassMakeup" title="插班补课" width="1000px"> <el-alert title="只支持同课程下的班级安排补课,每个月3号过后,不能插入上个月及以前月份的班级" type="warning" class="mb-4" /> <div class="filters mb-4 flex gap-4"> <!-- 校区下拉选择 --> <CampusSelect placeholder="请选择" v-model="classItemQuery.campusIds" @change="campusChange" style="width: 90px" /> <!-- 班级下拉选择 --> <el-select placeholder="请选择班级" v-model="selectedClassGroupId" filterable clearable @change="classGroupChange" style="width: 200px"> <el-option v-for="item in classGroupList" :key="item.id" :label="item.name" :value="item.id" /> </el-select> <!-- 日期选择 --> <DatePicker type="daterange" placeholder="补课日期" :value="classItemQuery.timeRange" onchange="onInClassRange" style="width: 200px" /> </div> <!--插班补课表格--> <el-table :data="classItemList" border header-cell-class-name="table-header" @selection-change="handleClassItemSelectionChange"> <el-table-column type="selection" width="55" align="center" :selectable="() => true" :reserve-selection="false"> <template #header> <!-- 空 header,隐藏全选框 --> </template> </el-table-column> <el-table-column label="班级" show-overflow-tooltip min-width="180" prop="classGroupName" /> <el-table-column label="上课时间" show-overflow-tooltip min-width="180"> <template #default="scope">{{ moment(scope.row.date).format("YYYY-MM-DD ") }}{{ scope.row.startTime }} - {{ scope.row.endTime }}</template> </el-table-column> <el-table-column label="老师" show-overflow-tooltip min-width="100"> <template #default="scope"> {{ getNames(scope.row.teachers).join(",") }} </template> </el-table-column> <el-table-column label="教室" show-overflow-tooltip min-width="100" prop="classRoomName" /> </el-table> <template #footer> <div class="dialog-footer"> <el-button type="primary" :disabled="loading" @click="submitMakeupInclass">确定</el-button> <el-button @click="inclassMakeup = false">取消</el-button> </div> </template> </el-dialog> </div> </template> <script setup lang="ts"> import type { ElTable, FormInstance } from "element-plus"; import moment from "moment"; import { useUserStore } from "@/store"; import { Makeup, MakeupQuery, MakeupStatus, MakeupType, rules } from "@/models/enroll/Makeup"; import { useRouter } from "vue-router"; import { MakeupAPI } from "@/api/MakeupApi"; import { DatePicker, Row } from "view-ui-plus"; import { ClassItem, ClassGroup } from "@/models/routine/ClassGroup"; import { RoutineAPI } from "@/api/RoutineAPI"; import { ClassItemQuery } from "@/models/routine/scheduleTable/Query"; import { ClassGroupQuery } from "@/models/routine/Query"; import { TimePicker } from "view-ui-plus"; const selectedClassGroupId = ref<number>(); const classItemList = ref<ClassItem[]>([]); const classGroupList = ref<ClassGroup[]>([]); const userStore = useUserStore(); const directMakeup = ref(false); const inclassMakeup = ref(false); const timeFormat: any = "HH:mm"; // 状态管理 const loading = ref(false); const showMore = ref(true); const tableData = ref<Makeup[]>([]); const total = ref(0); const input = ref(""); const selectType = ref("student"); const tableRef = ref(); const selectedRows = ref<Makeup[]>([]); const query = ref<MakeupQuery>(new MakeupQuery()); const classItemQuery = ref<ClassItemQuery>(new ClassItemQuery()); const classGroupQuery = ref<ClassGroupQuery>(new ClassGroupQuery()); //插班补课表格复选框 const selectedClassItems = ref<ClassItem[]>([]); function handleClassItemSelectionChange(rows: ClassItem[]) { selectedClassItems.value = rows; } //直接补课表单 const formRef = ref<FormInstance>(); const form = ref(new Makeup()); //重置直接补课表单,清除验证状态 function resetForm() { form.value = new Makeup(); nextTick(() => { if (formRef.value) { formRef.value.clearValidate(); // 清除验证状态 } }); } const getClassGroupList = async () => { const queryParams = new ClassGroupQuery(); // 确保campusIds是数组格式 if (classItemQuery.value.campusIds) { queryParams.campusIds = Array.isArray(classItemQuery.value.campusIds) ? classItemQuery.value.campusIds : [classItemQuery.value.campusIds]; } const res = await RoutineAPI.queryClassGroup(queryParams); if (res && "records" in res) { classGroupList.value = res.records || []; } else { classGroupList.value = []; } }; function campusChange() { getClassGroupList(); getClassItemList(); } const classGroupChange = async () => { if (selectedClassGroupId.value) { loading.value = true; const items = await RoutineAPI.getClassItemByGroupId(selectedClassGroupId.value); classItemList.value = items || []; loading.value = false; } else { getClassItemList(); } }; //直接补课对话框关闭处理 function handleDialogClose() { resetForm(); directMakeup.value = false; } function onTimeRangeChange(range: string[]) { form.value.makeUpTimeRange = range[0] ? range : []; } //提交直接补课 async function handleConfirmMakeup() { formRef.value?.validate(async (pass) => { if (pass) { if (form.value.id) { loading.value = true; form.value.makeupStatus = MakeupStatus.Completed; const res = await MakeupAPI.updateMakeup(form.value); loading.value = false; if (res) { handleDialogClose(); getData(); } } else { const datas = selectedRows.value.map((item) => { item.makeupStatus = MakeupStatus.Completed; const data = new Makeup(); Object.assign(data, item); data.makeupType = form.value.makeupType; data.makeUpTimeRange = form.value.makeUpTimeRange; data.makeupDate = item.makeupDate; data.teacherId = form.value.teacherId; data.makeupDate = form.value.makeupDate; data.makeupStatus = item.makeupStatus; data.remark = form.value.remark; return data; }); loading.value = true; const res = await MakeupAPI.updateMakeupBatch(datas); loading.value = false; if (res) { handleDialogClose(); getData(); } } } }); } /** 提交插班补课 */ function submitMakeupInclass() {} //单个记录直接补课 function handleMakeup(row: Makeup) { // 创建行数据的深拷贝 const rowData = JSON.parse(JSON.stringify(row)); //bug:更多按钮直接补课老师选择器默认展示teacherId值0 // 修复:如果 teacherId 为 0,设置为 undefined if (rowData.teacherId === 0) { rowData.teacherId = undefined; } form.value = rowData; form.value.makeupType = MakeupType.Direct; directMakeup.value = true; } //批量处理直接补课 function handleBatchMakeup() { if (selectedRows.value.length === 0) { ElMessage.warning("请先选择需要补课的数据"); return; } if (selectedRows.value.some((item) => item.makeupStatus !== 0)) { ElMessage.warning("请选择未补课的数据"); return; } form.value = new Makeup(); form.value.makeupType = MakeupType.Direct; directMakeup.value = true; } //取消补课 async function cancelMakeup(rows: Makeup[]) { // 状态检查 if (rows.length === 0) { ElMessage.warning("请先选择需要取消补课的数据"); return; } const makeStatuses = new Set(rows.map((r) => r.makeupStatus)); if (makeStatuses.size > 1) { ElMessage.warning("请选择相同补课状态的记录进行批量操作"); return; } const makeStatus = rows[0].makeupStatus; if (makeStatus !== 1) { ElMessage.warning("只有已补课状态的记录才允许取消补课"); return; } // 确认提示(根据记录数量显示不同提示) try { await ElMessageBox.confirm(rows.length === 1 ? "确定取消该补课记录吗?" : `确定取消选中的${rows.length}条补课记录吗?`, "取消确认", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }); } catch (cancel) { ElMessage.info("操作取消"); return; } // 执行取消操作 loading.value = true; const ids = rows.map((r) => r.id); const cancelSuccess = await MakeupAPI.cancelMakeup(ids); loading.value = false; if (cancelSuccess) { getData(); // 刷新数据 // 清空选择(如果是批量操作) if (rows.length > 1) { selectedRows.value = []; tableRef.value?.clearSelection(); } } } //补课类型选择 const handleMakeupAction = async (rows: Makeup[], action: string) => { if (action === "cancel") { await cancelMakeup(rows); return; } else { if (action === "direct") { selectedRows.value = rows; directMakeup.value = true; return; } else if (action === "in-class") { selectedRows.value = rows; inclassMakeup.value = true; } } loading.value = false; }; async function getData() { loading.value = true; const res = await MakeupAPI.queryMakeup(query.value); loading.value = false; tableData.value = Array.isArray(res?.records) ? res.records : []; total.value = res?.total || 0; nextTick(() => { tableRef.value.toggleSelection(selectedRows.value); }); } async function getClassItemList() { loading.value = true; // 如果有选中班级,使用getClassItemByGroupId API if (selectedClassGroupId.value) { const items = await RoutineAPI.getClassItemByGroupId(selectedClassGroupId.value); classItemList.value = items || []; } // 如果既没有选中班级也没有选中校区,清空列表 else { classItemList.value = []; } loading.value = false; } function getNames(row: string[]) { return row?.map((r) => userStore.userNameMap.get(parseInt(r))) ?? []; } function onMakeupDateRangeChange(range: string[]) { query.value.makeupDateRange = range[0] ? [range[0] + " 00:00:00", range[1] + " 23:59:59"] : []; getData(); } function onInClassRange(range: string[]) { classItemQuery.value.timeRange = range[0] ? [range[0]] : []; getClassItemList(); } onMounted(() => { getData(); }); </script> <style lang="scss" scoped></style> 但是你看我代码中的这一部分 <el-table-column label="老师" show-overflow-tooltip min-width="100"> <template #default="scope"> {{ getNames(scope.row.classItem.teachers).join(",") }} </template> </el-table-column> 方法是一样的都是getnames,操作的数据也都是一样的都是classitem对象的teachers,那为什么这个就可以正常显示呢,而且浏览器得到的回复明显也有teachers的值[2]
08-22
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yongqiang Chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值