elementUI实现表格可编辑,下拉,VUE3版本,每个单元格独立,简洁实现

单个单元格点击后可编辑,鼠标移出输入框焦点消失
elementUI实现表格可编辑,下拉,VUE3版本,每个单元格独立,简洁实现_第1张图片

大致思路

插入2个标签input和span,绑定同一值,if控制,点击span切换该行该列的show为true,
表格项截图

`
        
        
      `

注意:需要在数据中添加控制切换input框的数组show。
用来判断每行数据的第几个字段是否可编辑
elementUI实现表格可编辑,下拉,VUE3版本,每个单元格独立,简洁实现_第2张图片
下拉框直接在表格项插入即可,如图不解释
elementUI实现表格可编辑,下拉,VUE3版本,每个单元格独立,简洁实现_第3张图片

你可能感兴趣的:(前端,elementui)