element-ui实现表格每行可以编辑数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui实现表格每行可以编辑数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

效果图如下：

element ui 行编辑,表格,表格数据修改,vue,elementui,Powered by 金山文档

代码如下：

<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请求来实现编辑功能文章来源地址https://www.toymoban.com/news/detail-525440.html

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("新增失败")
        }
    });
    
},

到了这里，关于element-ui实现表格每行可以编辑数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！