vue+element-ui表格的增刪改,行的上移下移,指定位置添加行


前幾天寫了一個小功能,也說不上是功能,就是對表格的一些操作,只是之前沒有寫過所以記錄下來,如果能幫助到別人就更好啦!

首先,表格的插入,編輯,刪除指定行,批量刪除。

插入:每個表格都有一個數據源,這個數據源是你自己定的一個數組,插入就是往這個數組里面push一條數據。

編輯:表格一般是展示數據的,編輯的話就是我的表格里面是套的input框,所以是可以編輯的。

刪除:批量刪除和刪除指定行,刪除指定行就是 獲取到當前行的下標,用splice方法根據下標刪除一條數據。

           批量刪除就是選中多行,選中的行存入到一個數組中,點擊刪除的時候首先判斷這個數組是否為空,為空的話提示"請選中要刪除的行",不為空則彈出確認刪除對話框進行取消或確認操作。

先貼代碼圖,第一張圖我就簡單貼了下html部分的代碼結構,以方便看到對應的方法名。

這里聲明一下,relyonTable是這個table的數據源,在data里面,不用傳值,是我忘記刪了。

下面是方法圖,包含了上圖中所有的方法

某一行的上移下移就是,先獲取當前行的坐標,做一個判斷,對於上移就是判斷當前行的坐標是否為0,如果為0,說明已經是第一行的,不能再上移了;對於下移,就是判斷當前行坐標加上1是否等於這個數組的長度,或者說當前航坐標是否等於數組長度減1,如果等於,說明已經是最后一行,不能再下移了。

 

對於在某一行前后插入新行,和向表格中插入一行的道理差不多,只不過向表格中插入行,是永遠放在最后一行,用的是數組的push,在這里就需要用到splice,spilce的3個參數,splice(index,0,要插入的數據) index代表下標,從哪個下標開始,0代表刪除的個數也就是不刪除,要插入的數據就是你要插入的空數據,尼克先把一條空數據賦值給一個變量,插入的時候直接插入這個變量,這樣看起來比較明了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM