今天在做根據(jù)后端人員給的接口,要把表格的數(shù)據(jù)渲染到頁面上,如下圖所示

圖中的模板類型這一列,后端人員返給我的是0代表 初始模板,1代表推薦模板,2代表自定義模板,我剛開始做的話沒把數(shù)據(jù)做處理,渲染到頁面上的是0,1,2,最后我想到用三目運算符做。
分頁的獲取數(shù)據(jù)的代碼
async init() {??if (!await this.beforeInit()) {????return??}??return new Promise((resolve, reject) => {????this.loading = true????// console.log(this.url,this.params.pageNum,this.params.pageSize)????initData(this.url, this.params).then(res => {??????this.total = res.data.total // 總條數(shù)??????console.log(this.total)??????this.data = res.data.list // 表格數(shù)據(jù)??????console.log(this.data)??????this.data.forEach((item, index) => {
<--紅色部分是用三目運算做的判斷-->????????this.data[index].templateType = item.templateType == 0 ? '初始模板' : item.templateType == 1 ? '推薦模板' : '自定義模板'})??????setTimeout(() => {????????this.loading = false??????}, this.time)??????resolve(res)????}).catch(err => {??????this.loading = false??????reject(err)????})??})},
哦,對了還有一點下拉框的value值是number類型,不是字符串類型。若寫成value: ‘0’這樣就會報錯。
要寫成value: 0,不要忘記哦!
optionsTemplateType: [{ // 新建模板類型下拉菜單??value: 0,??label: '初始模板'}, {??value: 1,??label: '推薦模板'},{??value: 2,??label: '自定義模板'}],