基于 iview table 组件开发的可编辑表格

功能

• 点击表格任一行的编辑按钮进入编辑状态，将对应的值回显到输入框；

• 点击保存按钮保存修改后的值；

• 当某一行处于编辑时，点击其他行的编辑按钮对应行可直接编辑；

• 点击新增在最上面新增一行并直接进入编辑状态；

组件

    <Table :columns="columns1" :data="data1" border>
      <div
        v-if="index === curRowIndex"
        slot-scope="{ row, column, index }"
        slot="action"
      >
        <Input v-model="row[column.key]" placeholder="Enter something..." />
      </div>
      <div v-else slot-scope="{ row, column, index }" slot="action">
        {{ row[column.key] }}
      </div>
      <div slot="op" slot-scope="{ row, column, index }">
        <Button @click="edit(row, index)">编辑</Button>
        <Button @click="save(row, index)">保存</Button>
      </div>
    </Table>
    <Button @click="add">新增一行并且可编辑</Button>

data() {
    return {
      curRowIndex: 0,
      isEdit: false,
      columns1: [
        {
          title: 'Name',
          key: 'name',
          align: 'center',
          width: 200,
          slot: ''
        },
        {
          title: 'Age',
          key: 'age',
          align: 'center',
          slot: ''
        },
        {
          title: 'Address',
          key: 'address',
          align: 'center',
          slot: ''
        },
        {
          title: '操作',
          key: 'op',
          align: 'center',
          slot: 'op'
        }
      ],
      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'
        }
      ]
    }
  },
  methods: {
    add() {
      if (!this.isEdit) {
        this.isEdit = true
        this.data1.unshift({})
        this.curRowIndex = 0
        this.columns1.forEach((i) => {
          if (i.slot !== 'op') {
            i.slot = 'action'
          }
        })
      }
    },
    edit(row, index) {
      this.curRowIndex = index
      this.columns1.forEach((i) => {
        if (i.slot !== 'op') {
          i.slot = 'action'
        }
      })
    },
    save(row, index) {
      this.columns1.forEach((i) => {
        if (i.slot !== 'op') {
          i.slot = ''
        }
      })
      this.isEdit = false
    }
  }