DataV：進度條表格

配置項

描述

圖示

全域配置

表格配置

定義進度條表格的輪播效果、表格內容及表頭樣式、懸浮樣式，以及序號列樣式。

• 輪播：開啟後，進度條表格才會以動畫樣式進行輪播，可設定輪播間隔時間、輪播模式等。支援設定全屏滾動和逐條滾動模式，全屏滾動是以當前頁面為單位進行輪播，類似翻頁效果。

• 每頁行數：進度條表格每頁顯示的行數。

• 表格內容樣式：支援設定進度條表格的文本、背景、邊框、儲存格內邊距等樣式。主要說明如下：

  • 文本樣式：設定文本的字型、顏色、字型大小大小、粗細等。

  • 基礎樣式：設定表格整體的背景顏色、行高、內容的對齊，以及是否開啟斑馬線。開啟斑馬線後，奇數行背景色與表格背景色相同，偶數行的背景色可按需設定。

    說明

    此處的對齊為進度條表格全域文本的對齊，如需單獨設定某列的對齊，可在表格列配置項中設定。

    

  • 空資料樣式：當表格記憶體在空資料時，此處可自訂空資料的顯示樣式。預設顯示樣式為藍色背景，文案為暫無資料。

  • 溢出文本：定義溢出文本是否滾動顯示，支援自訂滾動速率或滾動時間長度。若不開啟滾動，則溢出文本將被截斷，無法顯示。

• 表頭：開啟後，將為進度條表格添加表頭，可設定表頭的內容對齊、文本樣式、排序選中樣式、邊框樣式、背景顏色、行高等。關閉後，表格將沒有表頭。

  說明

  排序選中樣式指在預覽和發布進度條表格組件時，單擊表頭某列的排序按鈕時顯示的顏色。 僅當表格列配置中，相應列開啟排序功能，當前參數才會生效。

• 懸浮高亮：設定在預覽或發布狀態下，滑鼠懸浮至進度條表格的指定行，相應行的常值內容是否高亮呈現。可設定如下高亮樣式：

  • 文本的字型、粗細、大小、顏色等樣式。

  • 行背景顏色、陰影位移程度及陰影顏色。

• 序號列：開啟後，將在進度條表格的最左側產生一個序號列，可按需進行如下配置。

  • 通用配置：支援配置列名稱、列寬、該列的文本字型、顏色、字型大小、背景等樣式。

  • 特色項：如您需設定序號列的前N行呈現特殊內容（例如，圖片），可開啟該配置。

    • 自訂欄位：此處的配置內容需要與資料來源中對應的圖片欄位一致，該參數才會生效。例如，資料來源中配置imgSrc: 'https://xxxx.png'，此處配置為imgSrc。

    • 自訂圖片：使用自訂圖片，請按需上傳對應行所需的圖片連結。如要擷取動態圖片，需在資料來源中配置圖片相關欄位。

    說明

    • 資料來源中的自訂圖片欄位內容，優先順序高於此處配置的圖片內容。

    • 單擊或表徵圖，添加或刪除一個圖片資料。 單擊或表徵圖配置多個圖片資料的排列樣式。單擊表徵圖，可複製當前選中的圖片資料。

翻頁器配置

翻頁器，通常位於進度條表格下方，用於進行手動翻頁，此處可設定翻頁器的大小、顯示頁數、文字內容、邊距等樣式。

• 翻頁器顯隱設定：

  • 翻頁器隱藏：開啟後，將隱藏翻頁器。

  • 單頁隱藏：開啟後，若進度條表格只有一頁內容，則翻頁器將隱藏。

• 通用設定：設定翻頁器的大小、位置及顯示樣式。

• 頁碼樣式設定：

  • 頁碼數量：定義當頁數較多時，翻頁器顯示的頁碼數量。中間頁數將使用省略符號...代替。

  • 輸入框：開啟後，當頁碼較多時，可通過輸入指定頁數快速跳轉至該頁。

  • 頁碼樣式：定義不同狀態下的頁碼文字及背景顏色。

  • 自訂文字：定義翻頁器上一頁、下一頁的顯示文本。

表格列配置

定義進度條表格的列內容及樣式。該配置項為一個數組，可配置多個列（序號列除外），編輯器會遍曆資料，使資料通過自訂欄的配置迴圈渲染。此處列的先後順序即為進度條表格中列的展示順序，您可按需調整相應順序。

• 列樣式：支援定義列的欄位名稱、顯示名稱、列寬、是否可排序等樣式。

  • 欄欄位名：需要來源於資料來源中的欄位名稱。配置後，進度條表格中該列才會擷取資料來源相應欄位的內容進行顯示。

  • 列顯示名稱：作為該列的表頭內容顯示。

  • 列寬：當值為0時，列寬將自適應。若內容寬度超出列寬的設定數值，為保證內容準確展示，可使用該寬度。

  • 排序：開啟後，可對當前列的資料按升降序排列。當列資料為進度條時，不支援排序。

  • 文本樣式：可設定文本的字型、大小、顏色等。

    說明

    當資料類型為圖片時，不涉及配置該參數。

  • 對齊：可設定當前列內容的對齊。

• 資料類型：可指定列資料的類型及顯示樣式。不同類型涉及的配置項存在差異，具體請以實際介面為準。

  • 數值型：可設定數值的精度。

  • 類目型：用於表示有限數量的類別或分類。例如，城市（北京、上海等）。

  • 時間型：可選擇多種格式，通常為YYYY/MM/DD HH:mm:ss。

  • 圖片：可設定圖片的寬度、高度及圓角樣式。

  • 趨勢圖：用於直觀查看某指標的趨勢。可設定趨勢圖標、不同趨勢的顏色、指標顯示樣式等。

    • 指標設定：設定基礎值及數值尾碼（例如，%）。基礎值表示以此數值作為基礎，來計算圖表走勢，預設為0。基礎值建議優先使用資料中的初始值。

    • 千分位：千分位分隔字元。分隔字元最長為一位，超出一位時取第一位，不能將數字作為分隔字元。

    • 顯示：控制是否需要顯示不合規的資料類型。開啟後，即使資料不符合趨勢圖支援的資料類型，該資料也會顯示在進度條表格中。

  • 進度圖：可選擇橫條圖或環形圖展示，通常資料為Number類型。可設定數值的精度、尾碼、顏色、字型等樣式。

• 其他動作：單擊或表徵圖，可添加或刪除一列；單擊或表徵圖，可更改自訂欄配置地區的排列樣式；單擊表徵圖，可複製當前選中列。

進階配置

定義進度條表格中是否增加選擇列、操作列、超連結、虛擬滾動等。

• 選擇列：開啟後，將在進度條表格最左側添加一列選擇列，使用者可按需勾選指定行，執行進一步操作。

  • 預設選中：可設定預設選中的行，多個行使用英文逗號,分隔。該配置項匹配的是資料來源中的id欄位，需輸入id對應的value值進行觸發。

    說明

    若資料來源無id欄位或id欄位內容為空白，該配置項則無效。

  • 相關樣式：可配置按鈕的尺寸、背景顏色，以及選中狀態下對鉤（√）的顏色及大小。

• 操作列：開啟後，將在進度條表格最右側添加一列操作列，使用者可按需配置相應樣式及操作類型（例如，編輯、刪除）。

  • 列樣式：可設定列顯示名稱、列寬，以及常規狀態及懸停狀態下文本和按鈕的大小、顏色等樣式。

  • 列操作：可按需定義所要執行的操作類型，支援顯示為按鈕或文本。單擊或表徵圖，可添加或刪除一項操作；單擊或表徵圖，可更改配置地區多個操作的排列樣式；單擊表徵圖，可複製當前選中的操作項。

• 超連結配置：開啟後，進度條表格式資料源中配置的超連結才會生效。

  • 超連結欄位名：此處配置的名稱，需與資料來源面板中設定的超連結欄位一致（例如，link）。表格某行設定超連結後，單擊該行的任意位置，即可跳轉到相應連結。資料來源中的程式碼範例如下。

    {
      "link": "https://www.aliyun.com/"
    }

  • 新視窗中開啟：開啟後，在預覽或發布頁單擊相應超連結，將在瀏覽器新開一個視窗呈現跳轉連結內容；若未開啟，則在當前頁面呈現連結內容。

• 虛擬滾動：開啟後，可通過滑鼠滾動查看進度條表格內容。可設定滾動的地區高度及邊框樣式。使用該功能時，請確保資料id值唯一。

  說明

  僅當輪播功能關閉時，可配置該參數。

條件配置

可通過條件控制，在進度條表格中選中合格指定儲存格或行，並以所配置的樣式呈現。主要說明如下：

• 條件名稱：配置所要執行的條件內容。例如，篩選出city欄位等於杭州的儲存格。更多條件樣式配置詳情，請參見條件樹使用說明。

• 選定範圍：定義當滿足所配置的條件後，將選中指定儲存格或選中整行。

  當選定範圍配置為儲存格時，若開啟自訂顯示列，將渲染自訂欄所在的儲存格。列顯示名稱需要來源於資料來源中的欄位。

  

• 資料類型：可選擇進度圖或趨勢圖。選擇不同類型後，可按照介面指引配置相應類型的顏色、字型等樣式。

• 其他動作：單擊或表徵圖，添加或刪除一個條件樣式。 單擊或表徵圖，可配置多個條件的排列樣式。單擊表徵圖，可複製當前選中的條件樣式。

配置項

描述

圖示

互動事件

定義與其他組件間的互動行為，實現組件聯動。單擊表徵圖，即可定義相關互動事件及互動動作。

關聯全域變數

可在組件中關聯全域參數，實現組件間的參數傳遞，進行組件互動。單擊表徵圖，即可開啟相應指令，並為該指令關聯所需全域變數。

• 當點擊單行時：單擊進度條表格某一行時拋出的臨時變數，預設拋出資料中的id、value、sales、proportion和city欄位。

  說明

  該欄位為預設的樣本欄位，具體欄位名稱請以您的資料為準。

• 當點擊分頁時：單擊進度條表格的分頁按鈕進行分頁時，拋出的臨時變數，預設拋出資料中自訂的current欄位。

• 當點擊排序時：單擊進度條表格的排序按鈕時，拋出的臨時變數，預設拋出資料中自訂的columnName和order欄位。

• 當點擊多選時：當勾選進度條表格的多個行時，拋出的臨時變數，預設拋出資料中自訂的id、value、sales、proportion和city欄位。

• 當點擊操作項時：單擊進度條表格的操作列時，拋出的臨時變數，預設拋出資料中自訂的operateType和dataItem欄位。

配置詳情請參見組件互動配置。