使用vue實現超級課程表的功能 附完整原始碼

2021-10-02 01:41:52 字數 2482 閱讀 5330

效果圖展示:

實現思路:

(1)使用table**實現的

(2)介面資料需要返回乙個二位陣列即可。

**實現:

封裝乙個超級課程表元件classtable如下:

<

!-- 課表元件 --

>

="class-table"

>

=>

="tabel-container"

>

for=

"(item,index) in classtabledata.weeks"

:key=

"index"

>

}<

/th>

<

/tr>

<

/thead>

for=

"(item,index) in classtabledata.courses"

:key=

"index"

>

style="font-size:

12px;background:#d4f7fd;word-wrap:

break

-word;

word-

break

:break

-all;"

>

}<

/td>

for=

"(inneritem,idx) in item"

:key=

"idx" @click=

"toscandetail(inneritem,idx)"

>

"inneritem.lessonsname"

>

}>

}<

/div>

<

/td>

<

/tr>

<

/tbody>

<

/table>

<

/div>

<

/div>

<

/div>

<

/template>

var that;

import

from

"vant"

;export

default},

computed:;}

},methods:

$上課地點:

$授課老師:

$課程課時:$`

;if(item.lessonsname));

}}}}

;<

/script>

* width:

100%

; overflow: auto;

margin-bottom:

60px;

}table

thead

th tbody

th,td

tr td div

tr td:first-child

.course

.bgcolor

<

/style>使用該元件如下:

"classtabledata"

/>

<

/div>

<

/template>

var that;

import classtable from

"../../components/classtable"

;import

from

"../../config/api"

;export

default};

},components:

,created()

=json

.parse

(this

.$cookie.

get(

"userinfo"))

;this

.findteacherlesson

(username);}

, methods:

;const

=await

reqfindteacherlesson

(params)

; that.classtabledata.courses = info;}}

};<

/script>介面返回的資料格式如下:

,,

],[,

,],[

,,]]

}

高仿課程格仔實現課程表的功能

又是一年中秋節,中秋佳節更思親,一直很糾結到底是回家呢還是回家呢,呵呵,隨著時間的推移,現在又沒有時間回家了,最近也挺迷茫的,android和iphone 開發到底該學哪乙個,有點小鬱悶,眼看就要9月底了,來學校這麼長時間,什麼也沒有學到,再開學就大三了,以後的工作咋弄嘞,好多事要想,誒,頭痛中.最...

超級課程表前景與範圍文件

1.業務需求 1.1 應用背景 大學生群體是個龐大的群體。從中國實行擴招大學生開始,全國現有近2300所高校,在校大學生接近3000萬。對於許多企業來說這是乙個潛在的消費物件。手機是大學生不能離開的生活必須用品,所在針對大學生這個特殊的群體而設計的超級課程表應該具有隨時可查課程資訊等功能,方便大學的...

正方成績查詢(利用超級課程表介面)

第一步 獲取cookie error reporting 0 header content type text html charset utf 8 curl初始化 模擬登入 cookie file init cookie url time post xz username post usernam...