最近在使用vue-element-admin這個后臺管理框架開源模板在做一個管理后臺，使用起來其實還挺方便的傻工，大部分的組件源碼里面都已經(jīng)寫好了，用的時候只需要把源碼拿出來修改修改孵滞，也就成了中捆。

這里記錄一下開發(fā)過程中遇到的一些功能。

資料相關(guān)

vue-element-admin

推薦指數(shù)：star:55k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo體驗：https://panjiachen.github.io/vue-element-admin/#/dashboard

一個基于 vue2.0 和 Eelement 的控制面板 UI 框架坊饶，這是使用vue技術(shù)棧開發(fā)的前端程序員的首選管理系統(tǒng)模板泄伪，模板以及非常的成熟了，并且有相關(guān)的社區(qū)和維護(hù)人員匿级，開發(fā)時候遇到問題也不要慌蟋滴。

今天記錄的是vue-element-admin實現(xiàn)一個可編輯的table染厅。

需求：
1：請求數(shù)據(jù)接口，將返回值渲染在table里面
2：在table表格里面脓杉，有三個字段不需要渲染糟秘，直接使用input輸入框，可以輸入自己想要的內(nèi)容球散。

代碼如下：

<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="注冊手機(jī)號" 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":"哈哈哈"}]}}

效果是這樣的