vue+element实现可编辑表格

目录

  • 前言
  • 正文
    • 1.简单实现
    • 2.支持后台传输数据(ps:对删除和增加基本没影响,就不做展示)
    • 3.在表格上方统一修改可编辑状态(ps:对删除和增加基本没影响,就不做展示)
  • 结语

前言

在一般情况下我们实现表格展示数据都是不可修改的,但是我们今天的目的是通过vue语法和element的部分组件来实现可编辑的表格。

正文

通过一定的资料查阅,我们可以通过以下几种不同的方式来实现这个可编辑表格。

1.简单实现

在我们一想到如何实现可编辑表格,首先想到的肯定是在表格最后加一个操作栏,来修改表格当前栏的内容形式,而可编辑这一点我们肯定想到了input框来实现。这就可以通过将表格对应栏的显示在简单的打印和可编辑直接切换。简单来说,通过设置一字段,来控制表格的span和input直接的切换。而删除和增加是通过js代码来控制表格绑定数组。具体关于数组的splice方法的使用可以参考博客
效果图:

你可能感兴趣的:(学习博客,vue)