每行可以編輯數(shù)據(jù)可以不使用彈窗實(shí)現(xiàn)修改數(shù)據(jù)的功能，這里使用到element-ui框架

效果圖如下：

代碼如下：

<el-table :data="list" border>
          <el-table-column type="index" label="序號(hào)" 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>

可獲取到編輯的數(shù)據(jù)

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

這里展示axios.post請(qǐng)求來(lái)實(shí)現(xiàn)編輯功能文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-525440.html

Edit(index, row) {
    var that = this;
? ? //路徑根據(jù)自己代碼更改
    axios.post("==========這里是路徑=======",{
? ? ? ? //下面就是獲取當(dāng)前行的數(shù)據(jù)，實(shí)現(xiàn)編輯功能
        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為成功，每個(gè)人的情況不同，根據(jù)自己代碼修改
        if(response.data.code==0){
            alert("修改成功")
? ? ? ? ? ? //下面可以加上重新加載表格數(shù)據(jù)的代碼，實(shí)現(xiàn)修改功能
? ? ? ? ? ? //.......
        }else{
            alert("新增失敗")
        }
    });
    
},