vue+element ui 点击某单元格切换该格编辑状态

想实现如下效果(一列为例)


点单元格可编辑

先直接上代码:

布局部分


注意红框

element自带cell-class-name属性可以得到每个单元格坐标,添加到数据中,可进行判断然后做input与div切换,实现最终效果


data


methods

ps:

该需求主要注意的点就是进行横纵坐标判断,来判断哪个单元格切换

demo只举了一列,多列进行循环即可,思想是一样的,还有的需求要求点击某单元格该列或行可编辑,那进行一个判断就可

例子不太完备,bug大家随时提,一起进步~

你可能感兴趣的:(vue+element ui 点击某单元格切换该格编辑状态)