<template>
<div>
<h3>课程信息</h3>
<el
-form ref="form"
:model="form" label
-width="80px">
<el
-form
-item label="">
课程名称
<el
-input v
-model="form.courseName" style="width
: 200px"></el
-input>
课程时间
<el
-date
-picker
v
-model="startEndTime"
type="datetimerange"
range
-separator="至"
start
-placeholder="开始日期"
end
-placeholder="结束日期"
>
</el
-date
-picker>
<el
-butt
on style="background
-color
: red; color
: aliceblue"
>搜索</el
-butt
on
>
</el
-form
-item>
</el
-form>
<div id="box">
<div>
<el
-radio
-group v
-model="form.status" style="width
: 300px; float
: left">
<el
-radio
-butt
on label="1">已预约</el
-radio
-butt
on>
<el
-radio
-butt
on label="2">已结束</el
-radio
-butt
on>
</el
-radio
-group>
</div>
<ul>
<li v
-for="v
in list"
:key="v.id">
<div>
<el
-butt
on @click="toCourseDetail(v.id)">
<img v
-b
ind
:src="v.pic" alt="" />
<h4>{{ v.courseName }}</h4>
<p style="white
-space
: pre
-wrap">{{ v.
introduce }}</p>
</el
-butt
on>
</div>
</li>
</ul>
</div>
<div>
<el
-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center
>
<span slot="footer" class="dialog
-footer">
<el
-butt
on @click="centerDialogVisible = false">取 消</el
-butt
on>
<el
-butt
on type="primary" @click="courseDetail">确 定</el
-butt
on>
</span>
</el
-dialog>
</div>
<!
-- 分页组件
-->
<el
-pag
inati
on
background
layout="prev, pager, next"
:total="total"
:page
-size="pageSize"
:current
-page="pageNum"
@current
-change="handlePageChange"
></el
-pag
inati
on>
</div>
</template>
<script>
import { f
indAllUserCourse } from '@/api/user';
export default {
data() {
return {
centerDialogVisible
:false,
startEndTime
: "",
pageSize
:6,
pageNum
:1,
total
:0,
form
: {
startTime
: "",
endTime
: "",
page
: "",
size
: "",
resname
: "",
userId
: "",
},
list
: [
{
value
: "0",
id
: "",
pic
: "",
courseName
: "",
introduce
: "",
},
],
};
},
created() {
this.f
indAllUserCourse();
},
methods
: {
f
indAllUserCourse(){
this.userId=localStorage.getItem("userId")
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]);
f
indAllUserCourse(this.form).then((resp)=>{
this.list = resp.data.data.courses.list;
c
onsole.log(this.list);
this.total = resp.data.data.courses.total;
this.form.startTime = "";
this.form.endTime = "";
})
},
toCourseDetail(id) {
this.centerDialogVisible=true
this.courseDetail(id)
},
courseDetail(){
},
handlePageChange(page) {
this.pageNum = page;
this.f
indCourseAll();
},
formatDate(date) {
if (!date) return "";
c
onst year = date.getFullYear();
c
onst m
onth = (date.getM
onth() + 1).toStr
ing().padStart(2, "0");
c
onst day = date.getDate().toStr
ing().padStart(2, "0");
c
onst hours = date.getHours().toStr
ing().padStart(2, "0");
c
onst m
inutes = date.getM
inutes().toStr
ing().padStart(2, "0");
c
onst sec
onds = date.getSec
onds().toStr
ing().padStart(2, "0");
return `${year}
-${m
onth}
-${day} ${hours}
:${m
inutes}
:${sec
onds}`;
},
},
};
</script>
<style scoped>
#box ul {
display
: flex;
flex
-wrap
: wrap;
positi
on: absolute;
top
: 220px;
}
#box li {
padd
ing
: 3px;
list
-style
: n
one;
marg
in-right
: 15px;
border
: 1px solid #eee;
}
#box img {
width
: 200px;
height
: 150px;
}
</style>报错UserCourseView.
vue:110 [
Vue warn]
: Error in render: "
TypeError: Cannot read properties of null (read
ing 'id')"
本文介绍了解决Vue项目中使用el-table组件时遇到的编译错误问题，通过删除node_modules文件夹、清除npm缓存及重新安装依赖，或更新vue-hot-reload-api版本至2.3.3，成功修复了错误。
扫一扫
2890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
