vue-element-admin实现一个可编辑的table

<template>
  <div class="app-container">
    <el-table :data="pvData" border fit highlight-current-row style="width: 100%;" class="tb-edit">
      <el-table-column label="日期" prop="userJigsawId" width="180"></el-table-column>
      <el-table-column label="拼图名称" prop="jigsawName" width="110px" align="center"></el-table-column>
      <el-table-column label="用户id" prop="jigsawName" width="110px" align="center"></el-table-column>
      <el-table-column label="昵称" prop="jigsawName" width="110px" align="center"></el-table-column>
      <el-table-column label="注册手机号" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.name" placeholder></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="所兑换礼物">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.address" placeholder></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="快递单号">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.order" placeholder></el-input>
          <!-- <span>{{scope.row.address}}</span> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { userJigsawtList, cashJigsawt } from "@/api/userList";
export default {
  data() {
    return {
      pvData: [],
    };
  },
  created() {
    this.userJigsawtList();
  },
  methods: {
    //已集齐拼图用户列表查询接口
    userJigsawtList() {
      const params = {
        current: this.current,
        size: this.size,
      };
      this.dataLoading = true;
      userJigsawtList().then((res) => {
        console.log("已集齐拼图用户列表查询接口", res);
        this.pvData = res.data.userJigsawtList;
      });
    },
  },
};
</script>

{"msg":"操作成功","code":"0000","data":{"userJigsawtList":[{"userJigsawId":1,"jigsawName":"拼图1","userId":"rw20082800006","nickName":"哈哈哈"}]}}