Vue 可编辑表格内容 iview

一、实现步骤

第一步：定义子组件myTable,是一个基于iview表格封装的表格。

第二步：

1.在子组件myTable里，可以拿到父组件传来的、用来配置表格的column数组。

2.判断是否有编辑属性

3.如果有编辑属性，可以自定义编辑函数(即name列)

i>如果当前项，是被点击项，则展示input; 否则，展示默认值 (效果：点击编辑按钮，展示对应input)

ii>编辑Input里内容时，不断同步表单row值;

iii>点击保存时，恢复静态展示~(效果：点击保存，展示静态文本)

二、伪代码

父组件:

子组件myTable:

注意：vue jsx语法，非常接近于react jsx语法，所以，在vue jsx中，不能使用vue 指令（比如 v-for、 v-bind:click等）。