在table表格中实现文字可编辑修改

 在table中点击某一个表格的单元格点击文字实现文字变成输入框  ,实现可修改的功能

   具体思路:

                 1.  可在单元格内写入俩个标签 用v-if 和v-else  进行控制

                 2.  俩个标签的值都是以单元格的绑定的值为准

                 3.  在要编辑的文字标签上加上点击事件来控制他的显示隐藏, 变成一个可编辑的输入框

                 4.将编辑好的输入框变成原来的文字

**这里一定要注意, 记得多写个判断,不能为空,为空的话下次再点击修改就在点不出来了

<el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
        <el-table-column  prop="name" label="姓名" sortable width="180">
          <template  slot-scope="scope" >
            <el-input v-if="scope.row.isshow" v-model="scope.row.name" @focus="focusOperate(scope.row)" @blur="blurOperate(scope.row)"/>
            <span @click="showname(scope.row)" v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
</el-table>


<script>
// js部分
export default {
data(){
    return{
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isshow:false
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        isshow:false
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        isshow:false,
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          isshow:false
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          isshow:false
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        isshow:false
      }],
    }
  },
  methods:{
    showname(row){
      console.log(row)
      row.isshow = true
    },
    //隐藏输入框
    blurOperate(row){
      if (row.name !== row.oldName && row.name) {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        row.isshow = false
      }
    }
  }
}
</script>