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

2021-01-11 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-ui表格,我是這樣做的
    使用過element-ui的表格的同學應該都有這樣的體會，做一個簡單的表格還比較容易，但如果這個表格包含了頂部的按鈕，還有分頁，甚至再包含了行編輯，那開發工作量就成倍的增加，特別是在開發管理系統的時候，表格一個接一個的去開發， 即浪費時間，還對個人沒有什麼提升。今天小編帶來了自己封裝的一個表格，讓你用JSON就可以簡單的生成表格。
  • 論文中表格查重標紅怎麼辦?如何修改表格?
    在我們的論文中，為了能夠表述更加清晰，難免會使用到各種類型的表格。但是大家要特別注意好論文中表格查重的問題，因為表格中也有數字和漢字，所以肯定是會被算作論文查重比對對象的。一旦表格中的被標紅，也會佔用非常多的重複字數，那麼出現這樣的問題要如何處理呢？如何避免表格被標紅呢？
  • 如何在 Word 中給表格增加下拉菜單選項?
    儘管大家都知道做表格要用 Excel，但工作中有時仍然不可避免需要在 Word 中製作表格。是不是用了 Word，表格除了輸入文字就再也無法增加其他任何功能？非也，Word 中的表格也可以智能化，比如增加下拉菜單選項。案例 ：下圖 1 為公司人員基本信息登記表，請將「性別」和「政治面貌」製作成下拉菜單。效果如下圖 2 所示。
  • word中快速應用表格樣式及表格樣式的修改——想像力電腦應用
    ，可以單擊樣式列表中的「修改表格樣式」命令，在彈出的「修改樣式」對話框中，調整相應的對話框參數來設計出自己喜歡的表格樣式。修改表格樣式的操作如下所述：修改表格樣式步驟01如上圖所示：（1）全選需要應用表格樣式的表格
  • 開源組件分享-Avue基於elementUI CRUD最強封裝
    Avue.js是基於element-ui庫進行的二次封裝，從而簡化一些繁瑣的操作，核心理念為數據驅動視圖，主要的組件庫針對table表格和form表單場景，同時衍生出更多企業常用的組件，達到高復用，容易維護和擴展的框架，同時內置了豐富了數據展示組件，讓開發變得更加容易。
  • 谷歌衛星地圖如何添加、修改和刪除多邊形面
    以下將通過如何繪製多邊形面、如何修改多邊形參數(如邊線寬度、填充顏色和透明度等)、如何提取沿線高程值、批量修改多邊形屬性、設置氣泡提示信息和如何批量刪除多邊形等幾部分進行詳細說明。一、如何繪製矢量多邊形面當啟動軟體時，滑鼠默認為平移狀態，可以通過點擊左側「矢量標註」工具欄中的多邊形工具或點擊「編輯\繪多邊形」菜單切換滑鼠狀態為繪多邊形狀態。在視圖中多次點擊滑鼠左鍵，可以連續繪製多邊形，在繪製過程中可以進行撤銷上一個點、移動地圖、刪除對象和結束繪製等操作。
  • CAXA CAPP教程:模板定義中刪除表格的使用方法
    CAXA 工藝圖表(CAXA CAPP)是CAXA工藝解決方案的重要組成部分，它既可以方便的進行表格的編輯也可以進行工藝簡圖的繪製，集office與CAD二者的優點於一身。通過前面幾課，大家都了解了單元格的定義、表區的定義及修改方法(圖一)，今天我們一起學習的是刪除表格的使用方法。
  • 從零做網站開發:基於Flask和JQuery實現表格管理平臺
    我會F12打開網站好吧，那我們來寫個簡單的表格管理平臺。基於Flask框架和JQuery實現管理平臺網站的開發功能，我代碼編寫用了2天的時間 ，從零開始寫；又對具體實現流程，自己斷斷續續地整理總結了近半個月。從自我感覺來說，整個過程和結果的實現都讓我很滿意。
  • 如何快速刪除WPS表格中的空白行
    有時WPS表格中有一些空白行，需要刪除這些空行，一般做法是將空行一一地找出，然後刪除。如果工作表的行數很多，這樣做就非常不方便，自然也降低了工作效率，那麼有沒有更好的方法來提高工作效率呢？只要多開動腦筋，自然會找到高效率的方法。
  • python入門第三課:列表元素的訪問、增加、刪除與修改
    包含數據進行表示，比如下面就是一個列表['蘋果','香蕉','橘子','葡萄',1990]列表的一些特點：1、列表中的數據類型可以不一樣，上面那個列表包含了字符串和整數二、修改、添加和刪除列表元素1、修改列表元素如果要將『橘子』換成『榴槤』，我們可以直接引用列表對應的位置，進行修改，看下面代碼：fruits = [
  • Laravel + Element 超簡單實現分頁效果案例教程
    在Web應用開發中，前端常常要展示數據列表，數據較多時就要對查詢結果進行分頁，只顯示當前頁的數據，一方面不會造成數據列表過長，另一方面減少每次查詢和返回的數據量。Laravel 中實現數據分頁非常簡單，使用 Element-UI 完成分頁數據的前端展示同樣非常簡單。一、Laravel 分頁1、在其他框架中，分頁操作可能比較複雜。
  • Word已製作好的文檔,章節、圖片與表格自動編號如何設置
    用 Word 排版書籍時，可事先不用輸入編號，只需要設置好標題樣式，例如「章」用「標題」，「節」用「標題1」，以此類推；書籍排版好之後，用多級列表可實現對所有標題自動編號。插入的圖片和製作的表格也不用編號，可「題注」實現自動編號。
  • word表格實戰技巧:如何去除表格後的空白頁
    01、表格後多出來的空白頁日常工作中，有時表格會佔滿整個頁面，或是表格剛好在該頁的底部。此時，會把表格後的回車符擠到下一頁中，自動生成一個空白頁，其中只有一個回車符，如果按【Delete】鍵刪除這個回車符，卻無法刪除，該怎麼辦？
  • Word怎麼刪除空白頁,由分節符、分頁符、分欄符、表格等導致
    這要看由什麼導致的空白頁，不同的情況刪除方法有些差異，以下列舉了Word怎麼刪除空白頁七種情況，它們分別為由分節符、分頁符、分欄符、自由換行符、段落標記和表格導致的空白頁，具體看實例，實例操作的 Word 版本為 Word 2016。
  • Word怎麼刪除表格後的空白頁
    在日常生活中，使用Word的時候，經常需要在Word中使用表格，有的時候發現表格後面會多一個空白頁，而且空白頁怎麼也刪不掉。那麼應該怎麼辦呢？下面做一個簡單介紹。第一步，打開桌面上Word文檔第二步，打開後，如圖所示，一張表格第三步，整個Word文檔共計2頁，第二頁是一個空白頁。第四步，可以發現，按下鍵Delete，怎麼也無法刪除。第五步，滑鼠移動至表格右下角的位置。第六步，按住滑鼠左鍵，往上方進行拖動。第七步，拖動完畢後，成功發現空白頁消失了。
  • 遇到中差評如何有效和買家溝通,達到修改刪除的目的
    遇到中差評如何有效和買家溝通對於中差評如何有效溝通，達到修改刪除中差評目的，見仁見智吧，各有各的方法，但萬變不離其宗，大致流程如下：1，了解中差評成因，找到癥結所在2，積極和買家溝通，表示歉意，爭取買家的諒解3，和客戶溝通了解確認中差評癥結，承認過錯
  • 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
    -S安裝ElementUI命令：npm i element-ui -S>npm i element-ui -S8、打開項目中的main.js文件，依次導入element-ui和對應的樣式文件，調用Vue.use(ElementUI)
  • word 2003 如何實現表格中文字上下左右居中?
    使用word 2003文檔時，在沒有表格的地方將文字居中，直接選中再按下「居中」鍵即可。但在表格中，如何實現表格中文字不僅左右居中，而在上下也是居中的呢？下面，我將為大家做一個簡單的介紹。
  • Excel表格實用技巧11、如何快速從數據中找出最大值或最小值
    利用條件格式的項目選取規則找出最大值或最小值操作示例1、從下圖數據中找出最大值：選中所有數據，依次點擊開始菜單下的【條件格式】——【項目選取規則】——【值最大的10項】，在打開的窗體中將「10」修改為」已被高亮顯示；3、以上示例是利用已有規則操作，我們還可以通過自己新建規則來實現，選中所有數據，依次點擊開始菜單下的【條件格式】——【新建規則】——【僅對排名靠前或靠後的數值設置格式】——修改「前」「10」為「前」「1」——點擊【格式】按鈕，在彈出的窗口中將