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

最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。

这里记录一下开发过程中遇到的一些功能。

资料相关

vue-element-admin

推荐指数：star:55k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard

一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

今天记录的是vue-element-admin实现一个可编辑的table。

需求： 1：请求数据接口，将返回值渲染在table里面 2：在table表格里面，有三个字段不需要渲染，直接使用input输入框，可以输入自己想要的内容。

代码如下：

<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>

返回值json

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

效果是这样的