本文作者：九弓子

前端最討厭的事：需要閱讀同事封裝的各種奇怪組件

前端最喜歡的事：分分鐘封裝一個(gè)自定義組件

對(duì)于以上描述，你是否也有同感？本期我們?yōu)榇蠹規(guī)淼氖情_發(fā)者“九弓子”投稿的“如何用JS UI框架的List組件畫一個(gè)表格”。

作者通過List組件快速、高效地構(gòu)建了一個(gè)自定義表格。接下來，讓我們一起見證作者是如何遇到問題，解決問題，最終實(shí)現(xiàn)開發(fā)目標(biāo)的。希望能給你的HarmonyOS開發(fā)之旅帶來一些啟發(fā)~

在敲代碼之前，需要大家下載安裝“Huawei DevEco Studio”，安裝指南如下：● Huawei DevEco Studio安裝指南：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

1

前端總會(huì)遇到一種需求 -- 自己畫

不是因?yàn)榇蠹蚁雽懡M件，而是因?yàn)殡S著各種千奇百怪網(wǎng)頁(yè)需求的出現(xiàn)，即便是繁榮如Web的生態(tài)，框架也不夠用。更不用說咱們剛剛出生沒多久的HarmonyOS手機(jī)應(yīng)用開發(fā)。表格是頁(yè)面中最常用的組件之一，那么如何在JS UI為主的HarmonyOS應(yīng)用中書寫一個(gè)表格呢。既然沒有三方框架加持，我們就先拋離css美化的問題，用List組件做一個(gè)極簡(jiǎn)表格：

2

制作頁(yè)面之前，先確定幾件事

在開發(fā)HarmonyOS 的JS UI頁(yè)面之前，先要確定這么幾件事。

1） 是否有我們可以利用的組件？

HarmonyOS的JS開發(fā)不是Web開發(fā)，雖然二者寫法很像，但不是一回事。

2） 不要嘗試去找官方文檔沒有寫的html標(biāo)簽。

官方提供的標(biāo)簽本身就是組件的另一種體現(xiàn)。

3） 頁(yè)面本身沒有Scroll滾動(dòng)。

如果你書寫的頁(yè)面超出屏幕，且外層沒有List組件，是無法滑動(dòng)屏幕的。

基于以上問題，我們通常會(huì)先寫了一個(gè)容器（效果如圖1所示），在外層寫一個(gè)list標(biāo)簽負(fù)責(zé)Y軸縱向的滾動(dòng)。再寫一個(gè)id為table的div，并且給它一個(gè)邊框，之后的表格將在這個(gè)div內(nèi)繪制。

《！--hml--》《div class=“container”》 《！--外層的這個(gè)list組件負(fù)責(zé)Y軸縱向滾動(dòng)--》 《list》 《list-item》 《！--寫了一個(gè)id為table的div--》 《div id=“table”》《/div》 《/list-item》 《/list》《/div》

/*css*/.container { padding： 10px;}#table { width： 100%; height： 500px; border： 1px solid #000;/*給table設(shè)置了邊框*/}

這時(shí)就能在圖1中看到一個(gè)方塊：

3

制作過程

1）確定思路因?yàn)槭謾C(jī)寬度有限，表格過大的話，就需要橫向滾動(dòng)。所以，我們后面還需要繼續(xù)在內(nèi)層寫入一個(gè) list 組件用來負(fù)責(zé)X軸橫向的滾動(dòng)。

2）確定數(shù)據(jù)結(jié)構(gòu)

表格數(shù)據(jù)結(jié)構(gòu)，是可視化的二維數(shù)組，如下所示：

//jsexport default { data： { //table_data就是我們要制作的表格數(shù)據(jù) table_data：［ ［“日期/時(shí)間”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”］， ［“表頭1”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭2”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭3”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭4”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭5”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭6”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭7”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］ ］ }}

為了開啟橫向滾動(dòng)屬性，hml代碼中新增了id為table-row的list組件，并且寫入了一個(gè)style。新增了一個(gè)for語(yǔ)句，通過for語(yǔ)句循環(huán)獲取tabledata里的每個(gè)數(shù)組，還新增了span item，用于數(shù)據(jù)綁定。運(yùn)行效果如圖2所示：

《！--hml--》《div class=“container”》 《list》 《list-item》 《div id=“table”》 《！--新增了一個(gè)id為table-row的list組件，并寫入了一個(gè)Style--》 《list id=“table-row” style=“flex-direction： row;”》 《！--通過for語(yǔ)句循環(huán)獲取table data里的每個(gè)數(shù)組--》 《list-item for=“（index，item） in table_data”》 《div》 《text》 《！--數(shù)據(jù)綁定，注意此處綁定的是item，后文會(huì)改成綁定item中的value--》 《span》{{ item }}《/span》 《/text》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

通過發(fā)現(xiàn)，頁(yè)面的數(shù)組全擠在了一起，為了解決這個(gè)問題，接下來我們需要把最內(nèi)層的文本輸出賦予更多css樣式。

4）表格樣式設(shè)計(jì)

首先，給予X軸橫向list內(nèi)部每一個(gè)list-item一個(gè)寬度，讓它們撐開超出屏幕寬度，自然就可以順利滾動(dòng)。然后，給予內(nèi)部文本的div一個(gè)邊框，讓它們看起來更像一個(gè)表格，運(yùn)行后效果如圖3所示：

《！--hml--》《div class=“container”》 《list》 《list-item》 《div id=“table”》 《list id=“table-row” style=“flex-direction： row;”》 《！--給list內(nèi)部每個(gè)list-item設(shè)定一個(gè)寬度30%，讓它們撐開超出屏幕寬度--》 《list-item for=“（index，item） in table_data” style=“width： 30%;”》 《！--給內(nèi)部文本的div一個(gè)邊框，讓它看起來像個(gè)表格--》 《div style=“border： 1px solid #000;width： 100%;”》 《！--文本排列：居中--》 《text style=“text-align： center;”》 《span》{{ item }}《/span》 《/text》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

通過發(fā)現(xiàn)，橫向滾動(dòng)已實(shí)現(xiàn)，但這個(gè)表格是按照一維數(shù)組輸出的，只輸出了每個(gè)item。接下來新增一個(gè)for語(yǔ)句，使數(shù)據(jù)的輸出為item里面的value值。我們?cè)俳o內(nèi)層的div加一個(gè)flex彈性換行 ，最后我們?cè)賹懸粋€(gè)Css樣式最常用的Flex彈性布局，讓文本的輸出真正按照二維數(shù)組來輸出。運(yùn)行效果圖如圖4所示：

《！--hml--》《div class=“container”》 《list》 《list-item》 《div id=“table”》 《list id=“table-row” style=“flex-direction： row;”》 《list-item for=“（index，item） in table_data” style=“width： 30%;”》 《div class=“row”》 《！--新增了一個(gè)for語(yǔ)句，使數(shù)據(jù)的輸出為item里面的value值--》 《div for=“value in item” class=“col”》 《text》 《！--這里的數(shù)據(jù)綁定是value值，前文代碼中一直都是item--》 《span》{{ value }}《/span》 《/text》 《/div》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

/*css*/.container { padding： 10px;}#table { width： 100%; height： 500px; border： 1px solid #000;}//設(shè)定彈性布局.row { display： flex ; flex-direction:row; flex-wrap:wrap;}.col { width： 100%; height： 60px; border： 1px solid #000;}

我們目標(biāo)中的表，但如果數(shù)據(jù)增多，Y軸無法就滾動(dòng)查看。這是因?yàn)槲覀兊膇d=table 的div組件，鎖死了高度500px。并且最外層負(fù)責(zé)Y軸滾動(dòng)的list組件并沒有一個(gè)固定高度，且小于內(nèi)部元素。

我們給予表格容器 id=table 一個(gè)自適應(yīng)的高度，因?yàn)楝F(xiàn)在的hml中的div不支持高度自動(dòng)（height:auto）。那么我們需要在//js中先計(jì)算需要的高度，然后將值綁定在hml中。

最后的代碼：

//jsexport default { data： { table_data：［ ［“日期/時(shí)間”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”，“2020-12-16”］， ［“表頭1”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭2”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭3”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭4”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭5”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭6”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］， ［“表頭7”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”，“10.10”，“15.36”，“58.00”，“66.41”，“20.21”，“22.00”］ ］， table_height：‘’

}， onInit（） { let rowNum = this.table_data［0］.length let height = rowNum*60 //我們?cè)赾ss中設(shè)計(jì)了行高為60像素，在這里計(jì)算出高度 this.table_height = height + ‘px’ }}

《！--hml--》《div class=“container”》 《list scrollbar=“on” style=“height： 500px;”》 《list-item》 《！--JS 計(jì)算出的高度數(shù)據(jù)綁定在此--》 《div id=“table” style=“height： {{table_height}};”》 《list id=“table-row” style=“flex-direction： row;”》 《list-item for=“（index，item） in table_data” style=“width： 30%;”》 《div class=“row”》 《div for=“value in item” class=“col”》 《text style=“width： 100%;text-align： center;”》 《span》{{ value }}《/span》 《/text》 《/div》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

/*css*/.container { padding： 10px;}#table { width： 100%; height： 500px;/* border： 1px solid #000;*/}.row { display： flex ; flex-direction:row; flex-wrap:wrap;}.col { width： 100%; height： 60px; border： 1px solid #000;}

滑動(dòng)條出現(xiàn)，就解決了數(shù)據(jù)增多，Y軸無法滑動(dòng)查看的問題。至此，我們就完成本次的開發(fā)目標(biāo)，用list組件創(chuàng)建一個(gè)自定義表格，只需幾行代碼就可以解決，非常便捷和高效。

以上就是本期作者分享的如何用List組件自定義的一個(gè)表格，大家可以根據(jù)自己的需求，用List組件自定義你想要的表格。學(xué)無止境，希望本期分享的內(nèi)容能給你帶來新的啟發(fā)。同時(shí)也歡迎更多開發(fā)者與我們分享開發(fā)成果、技術(shù)解讀與經(jīng)驗(yàn)心得，說不定下一期的主角就是你哦！

編輯：jq