vue3+element plus 如何实现可编辑表格

方法一:使用element plus 中的 Virtualized Table 虚拟化表格 

                具体使用详见element plus 官网

方法二:使用element plus 中的table表格+input输入框,特点是可控制输入框得焦与失焦之后样式的改变(通过事件对象拿到dom,并控制后续样式变化)

样式如下:

1.点击表格内容部分,输入框边框显示出来,此时内容可编辑

vue3+element plus 如何实现可编辑表格_第1张图片

 2.失焦之后,根据失焦事件完成后续样式修改

vue3+element plus 如何实现可编辑表格_第2张图片

 代码如下:














 

 

        

 

你可能感兴趣的:(vue.js,前端)