element-ui直接在表格中点击单元格编辑

⽬录

实现效果实现代码

最近由于公司开始使⽤elementUI，开发的过程中需要⽤到对表格的单元格进⾏编辑，下⾯是我⾃⼰实现表格可编辑的⽅式，感兴趣的可以了解⼀下

实现效果

编辑之后对应表格数据该字段值也就发⽣了变化，控制台输出所有数据即可查看变化

实现代码

1、⾃定义编辑组件

页⾯调⽤

import EditCell from \"@/components/EditCell/EditCell\";components: { EditCell},

v-for=\"item in tableColumn\" :prop=\"item.dataIndex\" :label=\"item.title\" :width=\"item.width\" :align=\"item.align\" :key=\"item.id\" :fixed=\"item.fixed\" >

//此处调⽤⾃定义组件（dataIndex 为表头数据中字段，相当于 展⽰表头 ⽼师对应的 teacher名称）

v-for=\"item2 in item.children\" :prop=\"item2.dataIndex\"

:label=\"item2.title\" :width=\"item2.width\" :align=\"item2.align\" :key=\"item2.id\" :fixed=\"item2.fixed\" >

到此这篇关于element-ui直接在表格中点击单元格编辑的⽂章就介绍到这了,更多相关element 单元格编辑内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！