之前已經(jīng)實(shí)現(xiàn)了表格的新增、編輯和刪除,在我的上篇文章中寫的也比較詳細(xì)。但是總感覺有點(diǎn)不完美,首先新增了一行以后,必須要雙擊某一個(gè)單元格參能進(jìn)行內(nèi)容的輸入。從代碼上來說,代碼量也較大;而且使用的是原生的html標(biāo)簽,有點(diǎn)尷尬。
于是,進(jìn)一步研以后,進(jìn)行了一定的優(yōu)化,直接使用vue的代碼實(shí)現(xiàn),不僅大大減少了代碼量,還實(shí)現(xiàn)了操作的友好性。下面直接上代碼:
1 html部分
這次的優(yōu)化其實(shí)主要在于html部分,直接將vue的el-input標(biāo)簽或者el-select標(biāo)簽放入表格的每個(gè)單元格中。這樣就不用去考慮表格內(nèi)容的編輯問題了。
新增 移除