elementUI--表格变成可编辑状态

 <template>
<div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>

<el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
          <span v-if="scope.row.isshow" @click="up(scope.$index)" >{{ scope.row.name }}</span>
          <el-input v-else v-model="str" ref="abc" @blur="shi(scope.$index)" />
       
      </template>
    </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
</div>
  </template>

  <script>
    export default {
      data() {
        return {
          arr:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          str:'',
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            isshow:true
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            isshow:true
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            isshow:true
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            isshow:true
          }]
        }
      },
      methods:{
        up(i){
          this.str = ''
          this.tableData[i].isshow = false
          var that = this
          that.$nextTick(function(){
            that.$refs.abc.focus()            
          });
        },
        shi(index){
          console.log(12212)
          this.tableData[index].isshow = true
          this.tableData[index].name   = this.str
        }
      }
    }
  </script>

  <style lang="less"  scoped>

  </style>