日常开发记录-elementUI 表格的编辑数据回显和删除操作

点击编辑，可以编辑对应行的数据内容，更新内容

<template>
    <el-table
        :data="tableData"
        style="width: 100%">


            <el-table-column
                v-for="(item, i) in tableColumns"
                :key="i"
                :prop="item.prop"
                :label="item.label"
                v-bind="item.other">
                <template slot-scope="{ row }">
                    <span v-if="!exchange">{{ row[item.prop] }}</span>
                    <el-input v-else v-model="row[item.prop]" />
                </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="editRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                        {{ exchange ? '保存': '编辑'}}
                        </el-button>
                        <el-button
                        @click.native.prevent="delRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                        删除
                        </el-button>
                    </template>
                </el-table-column>
    </el-table>
</template>



<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: 'Tom1',
        address: 'No. 181, Grove St, Los Angeles',
        other: { width: '180' }
      }, {
        date: '2016-05-02',
        name: 'Tom2',
        address: 'No. 183, Grove St, Los Angeles'
      }, {
        date: '2016-05-04',
        name: 'Tom3',
        address: 'No. 184, Grove St, Los Angeles'
      }, {
        date: '2016-05-01',
        name: 'Tom4',
        address: 'No. 185, Grove St, Los Angeles'
      }],
      tableColumns: [
        { prop: 'date', label: 'Date' },
        { prop: 'name', label: 'Name' },
        { prop: 'address', label: 'Address' }
      ],
      exchange: false
    }
  },
  methods: {
    editRow () {
      this.exchange = !this.exchange
    },
    delRow (i) {
      // splice会改变原数组
      this.tableData.splice(i, 1)
    }
  }
}
</script>

效果展示：