最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。
这里记录一下开发过程中遇到的一些功能。
资料相关
vue-element-admin
推荐指数：star:55k
一个基于 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":"哈哈哈"}]}}
效果是这样的
