如何在Element實現表格的增加、修改和刪除

2020-12-16 IT軟體專家

工具

HBuilderXnpm瀏覽器Node.js技術

VueElementJavaScriptCSS3在使用Element框架時，可以使用el-table展示數據，還可以對表格記錄進行新增、修改和刪除。下面利用具體的實例說明：

操作步驟如下：

1、打開HBuilderX開發工具，創建vue+element框架項目，然後新建vue文件，輸入名稱Person.vue，點擊創建按鈕

新建vue文件，輸入文件名並創建

2、在新建的vue文件中，利用Element布局，插入一個搜索框、三個按鈕，分別為查詢、重置和新增按鈕

插入一個輸入框和三個按鈕

3、接著，在下方插入一個表格el-table，並添加表格欄位和操作欄

插入一個表格el-table，並添加表格欄位

4、添加一個el-dialog彈窗，並插入一個el-form標籤元素

添加一個el-dialog彈窗

5、在script標籤中，data對象中初始化表格數據源對象、彈窗綁定變量

初始化表格數據源對象、彈窗綁定變量

6、再次添加彈窗中的form表單對象變量，表單中必填提示

form表單對象變量，表單中必填提示

7、在methods對象中，定義查詢方法、重置方法、操作方法、新增方法、修改方法

在methods對象中，添加不同的方法

8、接著，定義刪除方法和保存方法

定義刪除方法和保存方法

9、保存代碼並啟動項目，打開瀏覽器，查看表格效果

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

10、點擊新增按鈕，打開新增學生窗口，輸入內容並點擊保存，查看表格數據變化

輸入內容並點擊保存，查看表格數據變化

11、新增數據完成後，可以查看到新增了一條數據

新增數據完成後，查看表格

12、選中一條記錄後的操作中的修改，彈出修改窗口；修改內容後點擊保存，查看該條數據的變化

修改內容，查看表格數據變化

13、修改多條記錄，查看表格記錄對應欄位的變化

查看表格記錄對應欄位的變化

14、點擊表格操作欄中的刪除，查看刪除後表格記錄

點擊刪除，查看表格記錄

15、刪除完成後，可以查看到表格中數據少了一條

刪除完成，查看表格數據條數

相關焦點

  • 如何在Element框架實現表格並聯動子表格
    如果想要實現父子表格的聯調（根據父表格的某個欄位查詢子表格），該如何實現呢？下面利用實例說明：1、打開HBuilderX工具，創建vue模板項目，然後安裝Element；接著，在項目指定文件夾下，新建vue文件ParentChild.vue
  • 如何在Element中實現表格雙擊查看詳情
    ）組件，如果表格欄位是編號，顯示的是描述，或雙擊表格行記錄，查看這條記錄的詳情，該如何實現呢？下面利用實例說明：實現功能：欄位數據為編號（數值），界面上要顯示文字內容雙擊表格行記錄，彈出一個詳情窗口，可以查看步驟如下：1
  • 酷狗如何增加修改刪除電臺
    酷狗增加修改刪除電臺的方法如下：　　在「我的收藏」裡，點擊滑鼠右鍵，在彈出的菜單裡點擊相應的按鈕，可以實現電臺的增加、修改和刪除。酷狗主要提供在線文件交互傳輸服務和網際網路通訊，採用了P2P的先進構架設計研發，為用戶設計了高傳輸效果的文件下載功能，通過它能實現P2P數據分享傳輸，還有支持用戶聊天、播放器等完備的網絡娛樂服務，好友間也可以實現任何文件的傳輸交流，通過KuGoo，用戶可以方便、快捷、安全地實現音樂查找，即時通訊，文件傳輸，文件共享等網絡應用。
  • CAD軟體中如何實現CAD表格與Excel表格的相互轉換?
    使用浩辰CAD軟體繪製圖紙過程中，經常需要用到表格，這些表格有時還會作為項目文件出現在word、excel中。在CAD設計過程中，這些表格會隨著CAD圖紙的變化，經常地發生修改，那麼如何讓CAD表格與Excel表格實現同步修改和相互轉換？
  • Excel表格解密方法!Excel表格有表格修改權限的加密,教你解密!
    背景介紹：實際工作中很多情況下需要把表格進行設置加密權限，讓別人僅僅可以看，輸入指定單元格內容，但是不能修改保存，其實這個是用到了表格權限，如果你是設置權限的人，需要對表格進行調整更改，這個時候你突然發現，保護密碼忘記了；那麼今天就教你如何清除這個密碼！
  • vue實現複雜表格上移下移功能
    由於當前表格較為複雜，其中包含較多合併單元格，所以拖拽不大好處理，於是使用簡單的上移下移按鈕來替代。表格採用的是element-ui的el-table實現的。用於展示的數據是一個數組，經過合併單元格的方法處理，展現效果為上圖所示。而上移、下移是基於整體項目的上移下移。
  • 不要亂改我的Excel表格,教你設置讓別人只能修改表格中部分區域
    我們在使用Excel表格的時候，經常需要其他部門或別人去協助填充一些數據，可是每次把表格拿回來的時候都會發現他們修改了本來不需要他們修改的地方，那麼如何設置能讓其他人只修改該修改的部分，而不亂動我的部分呢？今天就和大家分享一個小技巧，讓別人無法亂動我的Excel表格。
  • Excel表格刪除行後怎麼讓序號自動排序
    在工作中經常要編輯excel表格，記錄也很多，一般都會設置「序號」列，以方便查看及排序。2. Excel初學者可能是逐個輸入1，2，3……，或者使用填充功能向下自動填充，但是如果數據多的話，在修改數據，刪除某些行後，序號需要重新編輯或填充。3.
  • 從零做網站開發:基於Flask和JQuery實現表格管理平臺
    我會F12打開網站好吧，那我們來寫個簡單的表格管理平臺。基於Flask框架和JQuery實現管理平臺網站的開發功能，我代碼編寫用了2天的時間 ，從零開始寫；又對具體實現流程，自己斷斷續續地整理總結了近半個月。從自我感覺來說，整個過程和結果的實現都讓我很滿意。
  • 如何把Excel表格輸出為png或jpg圖片
    NO.1表格作為圖片進行保存，不是很普通的表格使用方法，但是在一些特定的情況下，就需要將表格轉化為圖片保存或發送。那麼如何來操作呢？其方法有幾種：一使用截圖功能，二使用Excel vba給我們的專用方法。
  • ArrayList和LinkedList底層原理
    ArrayList和LinkedList都是List的實現類，是在日常開發中經常被使用到的兩個集合，我們來結合源碼看下兩個集合的不同之處。記錄著集合的修改次數modCount++;int numMoved = size - index - 1;// 判斷是否是最後一個元素，這裡的操作和remove(index)一樣if (numMoved > 0)System.arraycopy(elementData
  • 2B產品設計套路二:表格頁設計
    上一篇《2B產品設計套路一：表單設計》總結了「增刪改查顯」中的「增」和「改」對應的表單設計，這一篇繼續講講「查」和「顯」。我們可以通過數據統計、表格、詳情頁配合篩選、搜索實現查和顯的操作，達到從不同維度向用戶輸出的目的。
  • Word已製作好的文檔,章節、圖片與表格自動編號如何設置
    用 Word 排版書籍時，可事先不用輸入編號，只需要設置好標題樣式，例如「章」用「標題」，「節」用「標題1」，以此類推；書籍排版好之後，用多級列表可實現對所有標題自動編號。插入的圖片和製作的表格也不用編號，可「題注」實現自動編號。
  • 用SQL語句在資料庫中對表的列進行添加、修改、刪除及增加約束
    用SQL語句在SQL Server中進行各種操作是非常常見的操作，今天整理了一下用SQL語句在SQL Server中進行創建表，然後對表的列添加、修改、刪除及增加約束。刪除一列(刪除EmpAddress列)alter table Employees drop column EmpAddressSQL語句增加列增加一列(增加一列EmpAddr varchar(1000))
  • Vue 3下element-ui用不了怎麼辦,element-plus來幫你
    element-plus你可以理解為是element-ui支持Vue 3的版本，element-plus是一套支持Vue 3.0的組件庫，提供的組件涵蓋了絕大部分頁面UI的需求。在Vue 3的腳手架項目中，首先安裝element-plus的npm包，命令如下所示：npm install element-plus -S編輯main.js，引入整個element-plus組件和所需的樣式，由於element-plus組件內部默認使用英語，而我們項目需要使用中文
  • 如何創建vue項目並使用element框架中的el-select
    命令：npm i element-ui -Snpm i element-ui -S8、打開項目中的main.js文件，依次導入element-ui和對應的樣式文件，調用Vue.use(ElementUI)
  • 如何給表格中的單元格製作下拉菜單?
    在日常工作中，有時我們在使用表格錄入大量數據時，發現有很多內容是一樣的，為了提升辦公效果，這時一般會使用添加下拉菜單，快速選擇數據的方式處理。那麼如何給表格中的單元格製作下拉菜單呢？1、固定內容輸入先用極速表格打開需要修改Excel文檔，如我們需要給姓名對應的項輸入性別，首先選中所有需要輸入性別的單元格後，依次點擊菜單欄的「數據」—「數據驗證」，在數據驗證下拉菜單中選擇「數據驗證」工具。
  • 如何在Element框架使用日期控制項並獲取年齡
    JavaScriptCSS3在element框架項目中，日期控制項是一種常用的，可以顯示日期、時間和日期時間。那麼，如何使用日期控制項設置用戶出生日期？然後根據出生日期算出年齡。下面利用實例說明：操作步驟如下：1、打開HBuilderX工具，創建vue項目，然後新建vue文件
  • Excel使用方法:如何將表格複製到Word中並保持格式內容同步更新
    Excel使用方法：如何將表格複製到Word中並保持格式內容同步更新Excel由於具有強大的公式和表格編輯功能，是工作中常用的數據處理軟體針對這種情況，如何進行處理那？今天給大家介紹三種不同的方法，可以根據工作的需要具體決定使用哪種方法。
  • Excel多個表格數據如何合成一個表格呢?
    Excel多個表格數據如何合成一個表格呢？平常看表格數據的時候是不是覺得一個一個表格打開很麻煩，表格很多的時候不想一個一個打開，那要怎麼辦呢？多個表格數據可以合成一個表格數據嗎？答案是可以的。那麼下面小編就簡單介紹一下Excel多個表格數據如何合成一個表格，希望能幫到您。