element-ui实现表格每行可以编辑数据

每行可以编辑数据可以不使用弹窗实现修改数据的功能，这里使用到element-ui框架

效果图如下：

代码如下：

<el-table :data="list" border>
          <el-table-column type="index" label="序号" align="center" show-overflow-tooltip></el-table-column>
         
          <el-table-column prop="name" label="用户名" align="center">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.name" @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="password" label="密码" align="center">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.password" @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.sex" @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话" align="center">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.phone" @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="addr" label="地址" align="center">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.addr" @change="handleEdit(scope.$index, scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="right">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="Edit(scope.$index, scope.row)">修改</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="Delete(list.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

可获取到编辑的数据

 handleEdit(index, row) {
     console.log(index, row);
     console.log(row.name)  //获取到变化行的name值
},

这里展示axios.post请求来实现编辑功能

Edit(index, row) {
    var that = this;
    //路径根据自己代码更改
    axios.post("==========这里是路径=======",{
        //下面就是获取当前行的数据，实现编辑功能
        id:row.id,
        name:row.name,
        password:row.password,
        sex:row.sex,
        phone:row.phone,
        addr:row.addr    
    }).then(function (response){
        console.log(response.data);
        //这里我是返回code==0为成功，每个人的情况不同，根据自己代码修改
        if(response.data.code==0){
            alert("修改成功")
            //下面可以加上重新加载表格数据的代码，实现修改功能
            //.......
        }else{
            alert("新增失败")
        }
    });
    
},