日常开发记录-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>

效果展示：