隱藏參數面板的小箭頭

1

預期效果。

1. 當報表中有參數面板時，參數面板預設都會有小箭頭，如果需要參數面板和報表主體美觀銜接，就需要隱藏參數介面與報表主體交接處的三角箭頭。如下圖所示。

2

實現思路。

1. 在範本載入結束後，透過JS獲取到參數面板小箭頭的 DOM 元素，然後設定其隱藏，或直接去掉。

2. 隱藏按鈕：

   $('.parameter-container-collapseimg-up').hide();
   

3. 删除按鈕：

   $('.parameter-container-collapseimg-up').remove();
   

1

準備範本。

1. 建立普通報表範本，為了使參數面板顯示，在參數面板中隨意新增兩個元件。如下圖所示。

2

新增事件。

1. 點選參數面板編輯介面，右側【組件設定】處選中 para，在【事件】處為其新增一個【初始化後】事件。如下圖1所示。

2. JavaScript 代碼如下:

   //延遲執行
   setTimeout(function() {
      //隱藏參數面板小箭頭
      $('.parameter-container-collapseimg-up').hide();  
   }, 10);  
   //刪除參數面板小箭頭
   //$('.parameter-container-collapseimg-up').remove();  

3. 預覽報表，然後按 F12 或者找到瀏覽器的開發人員選項，然後使用尋找元素選擇三角按鈕，查看其中 class 屬性值。如下圖2所示。

注：以上代碼只適用於普通報表範本，使用中因為安裝了插件等因素使得前端變化導緻 DOM 元素失效的，可參考以下方法修改。

3

效果預覽。

1. 儲存範本，點選【分頁預覽】。效果如下圖所示。

注：不支援行動端。

1. 點選下載範本：透過JS隱藏參數面板小箭頭.cpt。