element ui 可编辑的表格

 

 

 

 

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
 <template slot-scope="{row}"> <el-form v-if="row.edit" > <el-form-item> <el-input v-model="row.date" size="small"/> </el-form-item> </el-form> <span v-else>{{ row.date }}</span> </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
        <el-table-column align="center" label="操作" width="120" :resizable="false">
        <template slot-scope="{row}">
          <el-tooltip v-if="row.edit" content="保存" placement="top">
            <el-button
              type="success"
              size="small"
              icon="el-icon-check"
              @click="checkEditSaveOk(row)"
            />
          </el-tooltip>
          <el-tooltip v-else content="编辑" placement="top">
            <el-button  
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="row.edit=!row.edit"
            />
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            edit:false
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            edit:false
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            edit:false
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            edit:false
          }]
        }
      },
      methods:{
        checkEditSaveOk(row){
          row.edit = !row.edit
        }
      }
    }
  </script>