Vue 可编辑表格内容 iview

一、实现步骤

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

第二步：

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

2.判断是否有编辑属性

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

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

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

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

二、伪代码

父组件:

<template>
  <div id="my-table-page">
    <my-table :columns="columns1" :data="data1"></my-table>
  </div>
</template>

<script type='text/ecmascript-6'>
import MyTable from "@/components/MyTable";
export default {
  name: "MyTablePage",
  components: {
    MyTable
  },
  data() {
    return {
      columns1: [
        {
          edit:true,
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ]
    };
  },
};
</script>
<style>
</style>

子组件myTable:

<template>
  <div id="my-table">
    <Table :columns="myColumns" :data="data"></Table>
  </div>
</template>

<script>
export default {
  name: "MyTable",
  props: ["columns", "data"],
  data() {
    return {
      myColumns: [],
      editIndex: -1
    };
  },
  methods: {
    edit(i) {
      this.editIndex = i;
    },
    save(column, row, index) {
      this.editIndex = -1;
    },
    change(val, column, row, index) {
      row[column.key] = val;
    }
  },
  mounted() {
    let that = this;
    that.myColumns = that.columns.map(column => {
      if (column.edit) {
        column.render = function(h, { column, row, index }) {
          return (
            <div>
              {index === that.editIndex ? (
                <div>
                  <i-input
                    type="text"
                    value={row[column.key]}
                    on-input={(e) => {
                      that.change(e, column, row, index);
                    }}
                  />
                  <i-button
                    on-click={() => {
                      that.save(column, row, index);
                    }}
                    style="margin-left:20px;"
                  >
                    保存
                  </i-button>
                </div>
              ) : (
                <div>
                  {row[column.key]}
                  <i-button
                    on-click={() => {
                      that.edit(index);
                    }}
                    style="margin-left:20px;"
                  >
                    编辑
                  </i-button>
                </div>
              )}
            </div>
          );
        };
      }
      return column;
    });
  }
};
</script>

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