element UI 可編輯表格

前言

表格內編輯,說不上是常用功能,但卻可以有效簡化頁面的輸入框,避免操作介面的複雜化
在Vue.Js裡基本上是避免直接操作dom的,網路上找到的範例往往都是配合著jquery,根據範例再改裝成Vue.Js的方式,不免要費一番功夫,而且也不太好改
而在官方issue裡,團隊也說不會製作此一功能,這部份基本上只能靠自己實作

>>DEMO<<

若看不習慣pug(原名jade),在codePen中也可以調整成html

原理

實作原理跟網路上的作法都一樣
就是在原本位置增加一個INPUT
並在資料中增加一參數isEditing做判斷

其中要注意的是:
el-table-columntemplate
要使用v-if而非v-show
v-show的話只是設定成invisible,但dom節點仍是存在的
而使用v-if可以有效保持dom的乾淨

參考資料

vue+element怎么实现表格内编辑
此篇使用CSS控制,對CSS熟悉者也可以參考看看
個人較偏好使用isEditing,因若有一次只能編輯一列的需求,isEditing較好寫判斷

Github issue / Elementui 实现在table编辑