如何在Element框架實現表格並聯動子表格

2020-12-22 IT軟體專家

工具

HBuilderXnpm瀏覽器Node.js技術

vueElementJavaScriptCSS3在使用vue+Element結合的框架開發項目時，會經常使用到Element中的表格。如果想要實現父子表格的聯調（根據父表格的某個欄位查詢子表格），該如何實現呢？下面利用實例說明：

1、打開HBuilderX工具，創建vue模板項目，然後安裝Element；接著，在項目指定文件夾下，新建vue文件ParentChild.vue

新建vue文件ParentChild.vue

2、打開新建的vue文件，利用Element布局，插入父子表格，並分別綁定數據源和欄位

插入父子表格，並分別綁定數據源和欄位

3、在script標籤data對象中，定義父表格的數據源以及相關欄位

定義父表格的數據源以及相關欄位

4、接著，打開項目中的App.vue文件，導入組件ParentChild，並在頁面引入

導入組件ParentChild，並在頁面引入

5、保存代碼並使用命令npm run serve啟動項目，打開瀏覽器，查看表格效果

啟動項目，打開瀏覽器，查看表格效果

6、返回到HBuilderX工具，在父表格綁定一個行點擊事件，rowClick

父表格綁定一個行點擊事件，rowClick

7、在data對象下加methods，並在裡面定義行點擊事件，根據不同條件，子表格展示不同的數據

定義行點擊事件，切換子表格數據

8、再次保存代碼並刷新瀏覽器，點擊父表格，觀察子表格變化

點擊父表格，觀察子表格變化

9、上述有一個問題，就是頁面初始化時，子表格沒有數據；代碼中添加mounted，給子表格添加初始化數據

給子表格添加初始化數據

10、再次保存並刷新瀏覽器，可以看到子表格也有數據了（不點擊父表格時）

子表格數據初始化

相關焦點

  • 如何在Element實現表格的增加、修改和刪除
    >技術VueElementJavaScriptCSS3在使用Element框架時，可以使用el-table展示數據，還可以對表格記錄進行新增、修改和刪除。下面利用具體的實例說明：操作步驟如下：1、打開HBuilderX開發工具，創建vue+element框架項目，然後新建vue文件，輸入名稱Person.vue，點擊創建按鈕
  • 如何在Element中實現表格雙擊查看詳情
    ）組件，如果表格欄位是編號，顯示的是描述，或雙擊表格行記錄，查看這條記錄的詳情，該如何實現呢？下面利用實例說明：實現功能：欄位數據為編號（數值），界面上要顯示文字內容雙擊表格行記錄，彈出一個詳情窗口，可以查看步驟如下：1
  • CAD軟體中如何實現CAD表格與Excel表格的相互轉換?
    使用浩辰CAD軟體繪製圖紙過程中，經常需要用到表格，這些表格有時還會作為項目文件出現在word、excel中。在CAD設計過程中，這些表格會隨著CAD圖紙的變化，經常地發生修改，那麼如何讓CAD表格與Excel表格實現同步修改和相互轉換？
  • 從零做網站開發:基於Flask和JQuery實現表格管理平臺
    我會F12打開網站好吧，那我們來寫個簡單的表格管理平臺。基於Flask框架和JQuery實現管理平臺網站的開發功能，我代碼編寫用了2天的時間 ，從零開始寫；又對具體實現流程，自己斷斷續續地整理總結了近半個月。從自我感覺來說，整個過程和結果的實現都讓我很滿意。
  • Excel多個表格數據如何合成一個表格呢?
    Excel多個表格數據如何合成一個表格呢？平常看表格數據的時候是不是覺得一個一個表格打開很麻煩，表格很多的時候不想一個一個打開，那要怎麼辦呢？多個表格數據可以合成一個表格數據嗎？答案是可以的。那麼下面小編就簡單介紹一下Excel多個表格數據如何合成一個表格，希望能幫到您。
  • 列印表格,如何通過簡單設置,將表格調整在一頁中
    那麼在列印的時候，如果表格太大，而有需要在一頁中列印出來，那麼該怎麼做到呢？今天芯青年就教大家如何在列印表格時候，把內容調整大小放在一頁中。首先，我們先在Excel中建立一個40行11列的表格，內容作為示例，我就全部填寫為33，那麼在列印的時候，可以看到，第一頁中只顯示了部分表格項目，列印完整的表格，就需要兩頁。
  • Excel中如何實現多表格動態求和
    日常工作中，在Excel表格中進行數據求和操作，相信小夥伴們能說出一大堆方法，前面小編也發布過《學會SUM函數，再多的工作表匯總求和都輕鬆搞定》教程，教大家如何快速匯總十二個月表格數據，但是匯總的是整體上看這個表格求和與以前教大家的多個工作表求和沒太大區別，只是多了兩個工作表【開始】和【結束】，玄機就在這兒，通過移動【開始】或【結束】工作表，比如把【結束】工作表移動到【3】工作表之後，【匯總】工作表的數據就是1-3的數據之和，有意思吧，看下面演示：具體操作步驟：1、先添加兩個空白工作表，並分別命名為
  • 兩個Excel表格,內容部分重合,排序不同,如何實現排序相同
    我們常常需要核對兩個表格，如果兩個表格的順序相同，核對工作就會簡單很多，可實際往往不是。就像下圖中的兩個表格，大部分貨品相同，少部分貨品有差異，怎樣將這兩個表格按照某個關鍵字（貨品）調整成一樣的順序呢？相信會有不少朋友使用VLOOKUP之類的函數來處理，這當然是可以的。
  • vue實現複雜表格上移下移功能
    由於當前表格較為複雜，其中包含較多合併單元格，所以拖拽不大好處理，於是使用簡單的上移下移按鈕來替代。表格採用的是element-ui的el-table實現的。用於展示的數據是一個數組，經過合併單元格的方法處理，展現效果為上圖所示。而上移、下移是基於整體項目的上移下移。
  • 如何在Node.js使用Pug創建表格並設置樣式
    ，該怎麼實現？單個表格沒有加樣式屬性，如何設置表格樣式？下面利用實例說明：操作步驟：1、在已創建好的Node.js項目中，views文件夾上，滑鼠右鍵新建Pug文件；輸入文件名稱，點擊OK添加模塊內容，插入表格元素3、打開路由JS文件，配置表格頁面路由
  • qq畫圖紅包電子表格如何畫出來 最簡單的電子表格畫法與你分享
    qq畫圖紅包電子表格如何畫出來 最簡單的電子表格畫法與你分享時間：2020-04-04 19:04   來源：騰牛網   責任編輯：沫朵 川北在線核心提示：原標題：qq畫圖紅包電子表格如何畫出來 最簡單的電子表格畫法與你分享 qq畫圖紅包現在很多人都愛玩，一群好友在一起搶非常的有意思。
  • EXCEL如何清除表格中的隱藏字符
    現今各種的網上調查問卷越來越多，也方便我們日常的收集數據和整理，但無論如何這些調查問卷都需要人來設計並且需要按特定的格式編輯，否則會無法上傳到網上，但是這些收集工作異常的多，如果讓一個人來編輯是忙不完，但是讓其他人做有的會將格式打亂，使得無法使用，那如何清除不規則的 格式呢，就需要用到
  • 如何在Element框架使用日期控制項並獲取年齡
    HBuilderXNode.jsnpm瀏覽器技術vueelementJavaScriptCSS3在element框架項目中，日期控制項是一種常用的，可以顯示日期、時間和日期時間。那麼，如何使用日期控制項設置用戶出生日期？然後根據出生日期算出年齡。下面利用實例說明：操作步驟如下：1、打開HBuilderX工具，創建vue項目，然後新建vue文件
  • 已經做好的Excel表格,老闆說方向不對,橫向表格怎麼換成豎向?
    Hello大家好，不知大家在工作中有沒有遇到這樣的情況，一個已經做好的數據表格，需要把做好的橫向表格轉換成豎的。如果有一天你花了大量時間做好的一個表格，給老闆看過之後，老闆說這表格看著不順眼，要你做豎的，你會怎麼做？
  • Excel表格解密方法!Excel表格有表格修改權限的加密,教你解密!
    背景介紹：實際工作中很多情況下需要把表格進行設置加密權限，讓別人僅僅可以看，輸入指定單元格內容，但是不能修改保存，其實這個是用到了表格權限，如果你是設置權限的人，需要對表格進行調整更改，這個時候你突然發現，保護密碼忘記了；那麼今天就教你如何清除這個密碼！
  • Excel如何對表格進行自適應設置,方法很簡單
    No.1Excel操作當中，表格的高度和寬度可以進行自動調整。方法就是使用.AutoFit屬性進行設置。下面用一個例子簡單介紹一下，如何對單元高度和寬度格進行自動調整。No.2方法很簡單，如上圖所示。R.Columns.AutoFit『自動調整列寬R.Rows.AtuoFit'自動調整行高上圖為例對表格內數據隨機生成，然後自動調整單元格高度和寬度。如下幾行代碼就可實現整個工作表的行高和寬設置。
  • 如何把Excel表格輸出為png或jpg圖片
    NO.1表格作為圖片進行保存，不是很普通的表格使用方法，但是在一些特定的情況下，就需要將表格轉化為圖片保存或發送。那麼如何來操作呢？其方法有幾種：一使用截圖功能，二使用Excel vba給我們的專用方法。
  • 如何製作體溫登記excel表格?
    體溫登記excel表格製作在公司復工期間，公司都會要求體溫登記，好保證公司其他人的安全。所以，接下來，我將和大家分享如何製作體溫登記表格。如何製作體溫登記表格？步驟如下：1.開excel，點擊選擇4個單元格，在「開始」一欄中點擊「合併並居中」。2.將滑鼠對著該單元格時，點擊右鍵，彈出窗口後選擇「設置單元格」。
  • 銷售清單excel表格怎麼做
    銷售清單表格在企業管理中是比較常見的工作表格、企業領導或者各個部門都需要這樣的報表數據。根據企業的管理訴求、單純表格的製作和顯示，並不能完全體現出銷售的流程體系。銷售清單表格可以分為客戶銷售表、銷售員業績表、銷售客戶欠款表、甚至銷售商品的數據匯總這些都是根據各個部門的需求來進行分別製作。企業工作人員如何能夠快速高效地完成這些表格數據、就能充分體現出工作人員的工作能力。
  • 公眾號中的表格如何製作?三種方法一定要知道
    有的時候，需要在公眾號文章中使用一些數據，進行分析和對比，就需要製作表格，還有很多小夥伴對製作表格的方法不是很清楚，下面就為大家帶來非常實用的三種方法，一起看下吧。1、在編輯器或公眾平臺製作表格有的表格比較複雜，需要經過精心的設計，提前有一個大體的框架，知道要有幾行幾列，然後點擊編輯器或公眾平臺的表格按鈕，拖動形成相應的表格，填充文字和內容即可。可以在表格單擊右鍵，對表格進行設置。這種製作表格的方法靈活性很強，也能夠滿足要求，不過效果就有點單調。