<template>
<div>
<div>
<el-form ref="form"
:model="form" la
bel-width="80px">
<el-form-item la
bel="">
课程类型
<el-select
v-model="selectedType"
placeholder="请选择"
clearable=""
@change="returnTypeId"
>
<el-option
v-for="type in typeList"
:la
bel="type.typeName"
:value="type.id"
:key="type.id"
></el-option>
</el-select>
课程时间
<el-date-picker
v-model="startEndTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item la
bel="课程名称">
<el-input v-model="form.courseName"></el-input>
</el-form-item>
<el-form-item>
<el-button
style="background-color
: red; color
: aliceblue"
@click="findCourseAll()"
>搜索</el-button
>
</el-form-item>
</el-form>
</div>
<div>
<el-table
:data="tableData" style="width
: 100%">
<el-table-
column prop="courseName" la
bel="课程名称" width="180">
</el-table-
column>
<el-table-
column prop="typeName" la
bel="类型" width="180">
</el-table-
column>
<el-table-
column prop="startTime" la
bel="开始时间" width="180">
</el-table-
column>
<el-table-
column prop="endTime" la
bel="结束时间" width="180">
</el-table-
column>
<el-table-
column prop="pic" la
bel="封面" width="180">
<img v-bind
:src="tableData.pic" alt="" />
</el-table-
column>
</el-table>
</div>
<!-- 分页组件 -->
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="pageSize"
:current-page="pageNum"
@current-change="handlePageChange"
></el-pagination>
</div>
</template>
<script>
import { findAll } from "@/api/user";
import { findCourseAll } from "@/api/user";
export default {
data() {
return {
selectedType
: "",
pageNum
: 1,
bookingContent
: "",
startEndTime
: "",
pageSize
: 7,
total
: 0,
pic
:"",
form
: {
typeId
: "",
startTime
: "",
endTime
: "",
page
: "",
size
: "",
resname
: "",
cocahId
: localStorage.getItem("userId"),
},
tableData
:[{
pic
:"",
courseId
:1
}],
typeList
: [
{
id
: "",
typeName
: "",
},
],
};
},
created() {
this.getTypeAll();
this.getCourseByCoachId();
},
methods
: {
getCourseByCoachId() {
this.form.page = this.pageNum;
this.form.size = this.pageSize;
this.form.resname = this.form.courseName;
this.form.startTime = this.formatDate(this.startEndTime[0]);
this.form.endTime = this.formatDate(this.startEndTime[1]);
findCourseAll(this.form).then((resp) => {
if (resp.data.code == 200) {
this.tableData = resp.data.data.list;
}
});
},
getTypeAll() {
findAll().then((resp) => {
this.typeList = resp.data.data.list;
});
},
returnTypeId(value) {
this.form.typeId = value;
},
handlePageChange(page) {
this.pageNum = page;
this.findCourseAll();
},
formatDate(date) {
if (!date) return "";
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours().toString().padStart(2, "0");
const minutes = date.getMinutes().toString().padStart(2, "0");
const seconds = date.getSeconds().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hours}
:${minutes}
:${seconds}`;
},
},
};
</script>
报错CoachCourseView.vue
:116 [Vue warn]
: Error in render
: "TypeError
: Cannot read properties of undefined (reading 'pic')"
本文介绍了一种常见的SQL错误——因typeId字段为空而引发的错误，并提供了具体的解决方法。通过对SQL语句进行适当修改，使用IFNULL函数来处理可能存在的NULL值，从而避免了错误的发生。
扫一扫
1752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
